Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active Mar 9, 2019
Embed
What would you like to do?
Streaming Shapefile
license: gpl-3.0
height: 600
redirect: https://observablehq.com/@mbostock/streaming-shapefiles

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.

<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment