D3 map client & server side
Minimal demo on how to create maps both :
- client side via d3js, topojson, & queue.js
- server side via exact same ressources + nodejs.
JS
- d3.v3.min.js
- topojson.v1.min.js
- queue.v1.min.js
- script.js : custom d3js map code (minimal example).
Data
The topojson data is loaded via http request and so should be stored online. Client side accept relative url, serverside requires absolute url (http://x.yz/a/file.json).
Client side
Open ./index.html in web browser. Viz based on ./script.js D3js codes.
Server side via Nodejs
Based on the exact same ./script.js. Thanks to npm jsdom, we create on serverside a virtual browser, the svg dataviz, to grab this svg element and print it out.
Dependencies:
npm install # install jsdom locally
In terminal, pass variables and run the nodejs code:
WIDTH=800 \
URL=http://bl.ocks.org/hugolpz/raw/1c34e14d8b7dd457f802/administrative.topo.json \
node mapIt.node.js
It creates the standalone map.svg file similar to the client side map.