| license: mit |
Remember: unpkg.com/topojson@2 is not d3js.org/topojson.v2.js
unpkg.com/topojson@2 is topojson/topojson and converts GeoJSON to topologies.
d3js.org/topojson.v2.js is topojson/topojson-client and knows what to do with topologies.
Built with blockbuilder.org
forked from Fil's block: topojson.topology + topojson.mesh
| <!DOCTYPE html> | |
| <canvas width="960" height="600"></canvas> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/d3-geo-projection.v1.min.js"></script> | |
| <script src="https://d3js.org/topojson.v2.min.js"></script> | |
| <script src="https://unpkg.com/topojson-client@2"></script> | |
| <script src="https://unpkg.com/topojson-simplify@2"></script> | |
| <script> | |
| var context = d3.select("canvas").node().getContext("2d"), | |
| path = d3.geoPath() | |
| .projection(d3.geoAitoff()) | |
| .context(context); | |
| d3.json("USA.json", function(error, geo) { | |
| if (error) throw error; | |
| // convert geojson to topojson with unpkg.com/topojson | |
| // for performance reasons, should rather be off browser | |
| const topo = topojson.topology({foo: geo}); | |
| topojson.presimplify(topo); | |
| topojson.simplify(topo, 120); | |
| console.log(topo.arcs[0].length); | |
| // draw topojson with d3js.org/topojson.v2 | |
| context.beginPath(); | |
| context.fillStyle = '#fee' | |
| context.strokeStyle = '#caa' | |
| path(topojson.mesh(topo)); | |
| context.stroke(); | |
| context.fill(); | |
| }); | |
| </script> |