Simple Map D3

Easy "choropleth" style maps with D3.

How to use

All you need is a dataset. Installing with Bower is easy:

bower install simple-map-d3

Include dependencies (Topojson if you are using that format).

<script src="bower_components/d3/d3.min.js" charset="utf-8"></script>
<script src="bower_components/topojson/topojson.js" charset="utf-8"></script>

Include library:

<link rel="stylesheet" href="bower_components/simple-map-d3/dist/simple-map-d3.css">
<script src="bower_components/simple-map-d3/dist/simple-map-d3.js" charset="utf-8"></script>

Make a container:

<div id="simple-map-d3-example"></div>

Make a map:


  var map = new SimpleMapD3({
    container: '#simple-map-d3-example',
    datasource: 'mn-county-2010.geo.json'
  });

Examples

Population of Minnesota by County

Minnesota census data per county, colored by population.


  var mnPopMap = SimpleMapD3({
    container: '.simple-map-d3-mn-pop-map',
    datasource: 'example-data/mn-county-2010.geo.json',
    colorOn: true,
    colorProperty: 'POPULATION',
    legendFormatter: d3.format(',f0')
  });

Europe Population Density Map

A simple map of European countries and their population density using a different projection, a slight rotation, custom color set, ability to pan, and a custom tooltip output.


  var europePopMap = SimpleMapD3({
    container: '.simple-map-d3-europe-pop-map',
    datasource: 'example-data/europe-population-density-geocommons.geo.json',
    colorSet: 'Spectral',
    colorOn: true,
    colorProperty: 'population',
    colorReverse: true,
    projection: 'azimuthalEqualArea',
    rotation: [0, 0, -20],
    canvasDragOn: true,
    tooltipContent: function(d) {
      var p = d.properties;
      return '<h5>' + p.country + '</h5>' +
        p.population + ' population per square kilometer';
    }
  });

Basic US Map

A simple map of US counties using a Topojson data source with some custom styling.


  var usMap = SimpleMapD3({
    container: '.simple-map-d3-us-map',
    datasource: 'example-data/us-counties.topo.json',
    tooltipOn: false,
    styles: {
      stroke: '#EDEDED',
      fill: '#232323'
    }
  });

World Map

A simple map of 2005 world population with graticule and globe turned on and started "manually".


  var worldMap = SimpleMapD3({
    container: '.simple-map-d3-world-map',
    datasource: 'example-data/world-population.geo.json',
    projection: 'equirectangular',
    colorOn: true,
    colorProperty: 'POP2005',
    colorSet: 'Paired',
    colorScale: 'quantize',
    tooltipOn: true,
    graticuleOn: true,
    globeOn: true,
    legendOn: false,
    startManually: true
  }).start();

Data sources

Simple Map supports any latitude and longitude (EPSG:4326) based GeoJSON or TopoJSON file.

Options

The following is a list of supported options when using Simple Map.

Color set reference

KeyColors

Events

There are a couple custom events that are fired through the map rendering process that may be helpful. These are created with the D3.dispatch system, and internally under .events object.