d3-geo-projection-picker

Hand picked d3 geo projections.

If you find yourself wanting more projections than the stock d3.geo list and feeling that the d3 geo projection module is too extensive for your needs, d3-geo-projection-picker is a tool that could help you find a happy middle ground.

Install

1# for CLI use:
2npm install -g d3-geo-projection-picker
3
4# for API use:
5npm install d3-geo-projection-picker

Usage

Say you want to use the Robinson, Miller and Winkel triplet projections, using the CLI, run:

1d3-geo-projection-picker robinson miller winkel3 > projections.js
2
3# or
4d3-geo-projection-picker robinson miller winkel3 -o projections.js
5
6# or
7d3-geo-projection-picker robinson miller winkel3 --output projections.js

or using the API:

1const fs = require('fs')
2const picker = require('d3-geo-projection-picker')
3
4picker(['robinson', 'miller', 'winkel3'], { /* bundling options */ }, (err, code) => {
5  fs.writeFileSync(/* path to output */, code)
6})

By default, d3-geo-projection-picker outputs a CommonJS module, so then one can browserify the following:

1const d3 = require('d3')
2const topojson = require('topojson-client')
3const projections = require('./projections')
4
5const context = d3.select('canvas').node().getContext('2d')
6
7// or '.geoMiller' or '.geoWinkel3'
8const projection = projections.geoRobinson()
9
10const path = d3.geoPath()
11  .projection(projection)
12  .context(context)
13
14d3.json('https://d3js.org/world-110m.v1.json', (err, world) => {
15  if (err) throw err
16
17  context.beginPath()
18  path(topojson.mesh(world))
19  context.stroke()
20})

to draw a world map with the Robinson projection.

Advanced

The picker function can bundle any combination of projections found in d3-geo-projection (see full list here).

Internally, d3-geo-projection-picker uses Rollup. You can pass any Rollup bundle-generation options (see full list here) to d3-geo-projection-picker to get the output bundle of your needs.

For example, to output a UMD bundle with natural earth projection, from the CLI:

1d3-geo-projection-picker natural-earth --format umd --moduleName d3

or from the API

1const picker = require('d3-geo-projection-picker')
2const opts = { format: 'umd', moduleName: 'd3' }
3
4picker(['natural-earth'], opts, (err, code) => {})

See the example folder for more details.

Credits

2017 Étienne Tétreault-Pinard. MIT License