Skip to content

Instantly share code, notes, and snippets.

@hugolpz
Last active October 4, 2018 08:47
Show Gist options
  • Save hugolpz/1c34e14d8b7dd457f802 to your computer and use it in GitHub Desktop.
Save hugolpz/1c34e14d8b7dd457f802 to your computer and use it in GitHub Desktop.
Printing map.svg file via D3js, Nodejs, Jsdom

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.

Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment