A demo of TopoJSON on a U.S. counties shapefile from the U.S. census bureau.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| path { | |
| fill: none; | |
| stroke: #000; | |
| stroke-width: .25px; | |
| stroke-linejoin: round; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script src="//d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500; | |
| var path = d3.geo.path(); | |
| var projection = path.projection(); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| d3.json("/mbostock/raw/4090846/us.json", function(error, us) { | |
| if (error) throw error; | |
| var tf = us.transform, | |
| kx = tf.scale[0], | |
| ky = tf.scale[1], | |
| dx = tf.translate[0], | |
| dy = tf.translate[1]; | |
| svg.append("path") | |
| .datum(topojson.mesh(us)) | |
| .attr("d", path); | |
| svg.selectAll("circle") | |
| .data(us.arcs) | |
| .enter().append("circle") | |
| .attr("transform", function(d) { return "translate(" + projection([d[0][0] * kx + dx, d[0][1] * ky + dy]) + ")"; }) | |
| .attr("r", 1.25); | |
| }); | |
| </script> |
aesnyder
commented
May 6, 2014
Monalisa17
commented
Sep 25, 2015
d3.json("/mbostock/raw/4090846/us.json", function(error, us)
what this line indicate?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I noticed a ton of examples are no longer working, this one included. Any plans to fix?