Skip to content

Barebone world map template build for displaying data

Notifications You must be signed in to change notification settings

Benjaki2/d3-world-maps

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Barebone world map template build for displaying data

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published