D3 map client & server side

Minimal demo on how to create maps both :

1. client side via d3js, topojson, & queue.js
2. 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.