block by mbostock 2dd741099154a4da55a7db31fd96a892

Streaming Shapefile

Full Screen

This is a 12.9MB shapefile! If your browser supports streaming fetch, it will start being displayed even before it has finished downloading. Streaming in-browser parsing is new in shapefile 0.5.

Updated Example →

index.html

<!DOCTYPE html>
<canvas width="960" height="600"></canvas>
<script src="https://unpkg.com/d3-array@1"></script>
<script src="https://unpkg.com/d3-geo@1"></script>
<script src="https://unpkg.com/d3-geo-projection@2"></script>
<script src="https://unpkg.com/shapefile@0.6"></script>
<script>

var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d");

var path = d3.geoPath()
    .context(context)
    .projection(d3.geoAlbersUsa()
        .scale(1285)
        .translate([canvas.width / 2, canvas.height / 2]));

context.lineWidth = 0.5;

shapefile.open("https://cdn.rawgit.com/matplotlib/basemap/v1.1.0/lib/mpl_toolkits/basemap/data/UScounties.shp", null)
  .then(function(source) {
    return source.read().then(function next(result) {
      if (result.done) return;
      context.beginPath();
      path(result.value);
      context.stroke();
      return source.read().then(next);
    });
  })
  .catch(function(error) {
    console.error(error.stack);
  });

</script>