This library was built to promote data sharing on a global scale.
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.
<body>
<div class='world-map' width='500' height='500'> </div>
</body>npm install d3-world-maps
import * as d3WorldMaps from 'd3-world-maps';var d3WorldMaps = require('d3-world-maps'); 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();const defaultOptions = {
el: '#world-map',
landFill: 'orange',
projection: 'Orthographic',
oceanFill: '#0e1e32',
locationPins: null
};The Orthographic xyz axis drag functionality was inspired by: Rotate the World
TopoJson was created using world-atlas
Workflow inspired by react-serial-forms