d3-geo-projection-picker

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

# for CLI use:
npm install -g d3-geo-projection-picker

# for API use:
npm install d3-geo-projection-picker

Usage

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

d3-geo-projection-picker robinson miller winkel3 > projections.js

# or
d3-geo-projection-picker robinson miller winkel3 -o projections.js

# or
d3-geo-projection-picker robinson miller winkel3 --output projections.js

or using the API:

const fs = require('fs')
const picker = require('d3-geo-projection-picker')

picker(['robinson', 'miller', 'winkel3'], { /* bundling options */ }, (err, code) => {
  fs.writeFileSync(/* path to output */, code)
})

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

const d3 = require('d3')
const topojson = require('topojson-client')
const projections = require('./projections')

const context = d3.select('canvas').node().getContext('2d')

// or '.geoMiller' or '.geoWinkel3'
const projection = projections.geoRobinson()

const path = d3.geoPath()
  .projection(projection)
  .context(context)

d3.json('https://d3js.org/world-110m.v1.json', (err, world) => {
  if (err) throw err

  context.beginPath()
  path(topojson.mesh(world))
  context.stroke()
})

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:

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

or from the API

const picker = require('d3-geo-projection-picker')
const opts = { format: 'umd', moduleName: 'd3' }

picker(['natural-earth'], opts, (err, code) => {})

See the example folder for more details.

Credits

2017 Étienne Tétreault-Pinard. MIT License