D3 GeoJson and TopoJson Renderer

Online GeoJSON and TopoJSON renderer

Recently, GitHub announced that it supports automatic rendering of GeoJSON files that you upload and store on GitHub repositories. They use Leaflet.js and I think it is an awesome feature as GitHub stores many GeoJSON files. Thirteen days later they added support for TopoJSON and it inspired me to create my own online automatic renderer of geographic files. Why? Simply because there are many times when I don’t feel like committing files to GitHub. Also, I want to use D3 to render the file with a simple drag and drop and do all the processing on the client side with HTML5.

I have used my Imgur file and directory upload example as a starting point to create the drag and drop functionality and process the data using HTML5 FileReader. If the file extension is JSON, I read the contents. If the type is Topology, I process it as a topoJSON file and if the type is FeatureCollection, I process it as GeoJSON file. I’m using the mercator geo projection for rendering and I also added a zoom function so that you can really play around with the geographical data.

Here is the Online D3.js Geo File Renderer

External:

Online GeoJSON and TopoJSON Converter
indiemapper
GeoJSON.io
distillery