block by fil db1d5b7abf91bfe1ff6b2c3e078276d1

topojson.topology + topojson.mesh

Full Screen

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

index.html

<!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"></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});

  // draw topojson with d3js.org/topojson.v2
  context.beginPath();
  context.fillStyle = '#fee'
  context.strokeStyle = '#caa'
  path(topojson.mesh(topo));
  context.stroke();
  context.fill();

});

</script>