D3 World Maps Template
This library was built to promote data sharing on a global scale.
How it works
In your html, you must create an element with an id of 'world-map' or create a custom class or id to select. Specify the dimensions here with height & width attributes.
Install
npm install d3-world-maps
Make a Map
ES6
import * as d3WorldMaps from 'd3-world-maps';CommonJS
var d3WorldMaps = require('d3-world-maps'); Initiate Map
var map = new d3WorldMaps.WorldMap( { el: '.world-map', // where the Map Lies projection: 'Mercator', locationPins: [ {coords: [55, 55], opacity: 0.2}, {coords: [13, 13], radius: 4}, {coords: [12, -45], color: 'yellow', radius: 4, opacity: 0.7} ], oceanFill: 'black');map.init();Options
const defaultOptions = { el: '#world-map', landFill: 'orange', projection: 'Orthographic', oceanFill: '#0e1e32', locationPins: null}; Credits
The Orthographic xyz axis drag functionality was inspired by: Rotate the World
TopoJson was created using world-atlas
Workflow inspired by react-serial-forms