D3 in Depth: Rendering Geographic Information

D3 in Depth has dedicated a chapter to rendering geographic information.

D3’s approach differs to so called raster methods such as Leaflet and Google Maps. Typically D3 requests vector geographic information in the form of GeoJSON and renders this to SVG or Canvas in the browser.

D3 in Depth: Rendering Geographic Information →

TopoJSON

topojson

TopoJSON is an extension of GeoJSON that encodes topology. Rather than representing geometries discretely, geometries in TopoJSON files are stitched together from shared line segments called arcs.

[…]

TopoJSON eliminates redundancy, allowing related geometries to be stored efficiently in the same file. For example, the shared boundary between California and Nevada is represented only once, rather than being duplicated for both states. A single TopoJSON file can contain multiple feature collections without duplication, such as states and counties. Or, a TopoJSON file can efficiently represent both polygons (for fill) and boundaries (for stroke) as two feature collections that share the same arc mesh.

A converter to convert your GeoJSON to TopoJSON is available 🙂

TopoJSON →

Landline – Simple SVG maps that work everywhere.

landline

Landline is a JavaScript library that creates SVG maps from GeoJSON. It comes with Stateline, which makes creating responsive U.S. state and county maps easy.

Also perfectly possible to load in your own GeoJSON file, packed with MultiPolygons.

Landline Source (GitHub) →
Landline Demo →

A Map of Baseball Nation

baseball-zips2

Baseball fans may not list which team they favor on the census, but millions of them do make their preferences public on Facebook. Using aggregated data provided by the company, we were able to create an unprecedented look at the geography of baseball fandom

Built using Google Maps. Also saw some GeoJSON fly by over XHR.

A Map of Baseball Nation (DataVis) →
Up Close on Baseball’s Borders (Article) →

Convert ESRI Shapefile (.shp) to geoJSON (.json)


Conversion result implemented in Google Maps, using data of my hometown Deinze, Belgium

To convert ESRI shapefiles to geoJSON (which you can perfectly use JavaScript and thus pass on to Google Maps, see screenshot above) you will need GDAL (Geospatial Data Abstraction Library) — Mac Users: download here. I have installed GDAL 1.9 Complete but perhaps the framework itself might also do.

After installation, you can use ogr2ogr to do the actual conversion.

Convert ESRI Shapefile to geoJSON:

/Library/Frameworks/GDAL.framework/Programs/ogr2ogr -f "GeoJSON" output.json input.shp

Convert ESRI Shapefile to geoJSON with Coordinates Conversion (here LAMBERT 1972 (EPSG:31370) to WGS84):

/Library/Frameworks/GDAL.framework/Programs/ogr2ogr -f "GeoJSON" -s_srs "EPSG:31370" -t_srs "WGS84" output.json input.shp

The latter is the command you’ll be looking for when working with gisoost.be buurtwegen data.

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.