Skip to content

Latest commit

 

History

History
71 lines (49 loc) · 1.39 KB

README.md

File metadata and controls

71 lines (49 loc) · 1.39 KB
Raw

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.

<body>
  <div class='world-map' width='500' height='500'> </div>
</body>

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