-
-
Save AlexAbes/5f11d6b8156604ff39caf0bee902568d to your computer and use it in GitHub Desktop.
d3 map (basic)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| circle.outer { | |
| fill: none; | |
| stroke: #000; | |
| stroke-width: 2px; | |
| } | |
| circle.points{ | |
| fill: none; | |
| stroke: red; | |
| } | |
| circle.bigPoints{ | |
| fill: none; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script src="http://d3js.org/queue.v1.min.js"></script> | |
| <script src="http://d3js.org/d3.geo.projection.v0.min.js" charset="utf-8"></script> | |
| <script src="map_points_basic.js" type="text/javascript"></script> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| queue() // javascript is asynchronous; queue runs the awaiting makeMap function only after the data files load | |
| .defer(d3.json, "world.json") | |
| .defer(d3.json, "geoData.json") | |
| .await(makeMap); | |
| function makeMap(error,world,geoData){ | |
| var width = 960, | |
| height = 700; | |
| var projection = d3.geo.ginzburg5() | |
| .scale(180) // total map size adjustment | |
| .translate([width / 2, height / 2]) // map center | |
| var path = d3.geo.path() // a function that essentially just draws lines | |
| .projection(projection); // translates the geo coords to screen coordinates | |
| var svg = d3.select("body").append("svg") // selections are arrays of dom elements | |
| .attr("width", width) | |
| .attr("height", height) | |
| var feature = svg.append("path") // appends a path element to the svg | |
| .datum(topojson.feature(world, world.objects.land)) // accesses the land features and appends them to the path element | |
| .attr("d", path) // uses the path function to add directions for how to draw | |
| .attr("stroke","#000"); // adds the country outline | |
| var bounds = svg.insert("path") | |
| .datum(topojson.feature(world, world.objects.countries)) | |
| .attr("class", "boundary") | |
| .attr("d", path) | |
| .attr("fill","#ccc"); | |
| var large_circle = svg.selectAll(".bigPoints") | |
| .data(geoData.features) // selects features to bind to the elements classed as points | |
| .enter() // binds the correct number of elements | |
| .append("circle") // adds data bound circle elements to the graph | |
| .style("stroke","steelblue")// overides the css to the color the circles | |
| .classed("bigPoints",true) | |
| .attr("cx",0) | |
| .attr("cy",0) | |
| .attr("transform", function(d){ return "translate("+path.centroid(d)+")"})// uses the path function to translate the long,lat into screen coords | |
| .attr("r",20) // sets the radius | |
| var small_circle = svg.selectAll(".points") | |
| .data(geoData.features) // selects features to bind to the elements classed as points | |
| .enter() // binds the correct number of elements | |
| .append("circle") // adds data bound circle elements to the graph | |
| .classed("points",true) // classes the circle elements | |
| .attr("cx",0) | |
| .attr("cy",0) | |
| .attr("transform", function(d){ return "translate("+path.centroid(d)+")"})// uses the path function to translate the long,lat into screen coords | |
| .attr("r",2) // sets the radius | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"body": "I freaking love maps!", "geo": {"type": "Point", "coordinates": [37.64, -122.09]}, "actor": {"displayName": "BrianLehman"}} | |
| {"body": "I love you @grandma_smarmy!", "geo": {"type": "Point", "coordinates": [3.18, 101.60]}, "actor": {"displayName": "Uncle_Smarmy"}} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment