Choropleth Maps in JavaScript

How to make a D3.js-based choropleth map in JavaScript. A choropleth map shades geographic regions by value.


New to Plotly?

Plotly is a free and open-source graphing library for JavaScript. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.

d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2010_alcohol_consumption_by_country.csv', function(err, rows){
      function unpack(rows, key) {
          return rows.map(function(row) { return row[key]; });
      }

    var data = [{
        type: 'choropleth',
        locationmode: 'country names',
        locations: unpack(rows, 'location'),
        z: unpack(rows, 'alcohol'),
        text: unpack(rows, 'location'),
        autocolorscale: true
    }];

    var layout = {
      title: {text: 'Pure alcohol consumption<br>among adults (age 15+) in 2010'},
      geo: {
          projection: {
              type: 'robinson'
          }
      }
    };

    Plotly.newPlot("myDiv", data, layout, {showLink: false});

});
Click to copy
51015Pure alcohol consumptionamong adults (age 15+) in 2010
d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2011_us_ag_exports.csv', function(err, rows){
      function unpack(rows, key) {
          return rows.map(function(row) { return row[key]; });
      }

      var data = [{
          type: 'choropleth',
          locationmode: 'USA-states',
          locations: unpack(rows, 'code'),
          z: unpack(rows, 'total exports'),
          text: unpack(rows, 'state'),
          zmin: 0,
          zmax: 17000,
          colorscale: [
              [0, 'rgb(242,240,247)'], [0.2, 'rgb(218,218,235)'],
              [0.4, 'rgb(188,189,220)'], [0.6, 'rgb(158,154,200)'],
              [0.8, 'rgb(117,107,177)'], [1, 'rgb(84,39,143)']
          ],
          colorbar: {
              title: {text: 'Millions USD'},
              thickness: 0.2
          },
          marker: {
              line:{
                  color: 'rgb(255,255,255)',
                  width: 2
              }
          }
      }];


      var layout = {
          title: {text: '2011 US Agriculture Exports by State'},
          geo:{
              scope: 'usa',
              showlakes: true,
              lakecolor: 'rgb(255,255,255)'
          }
      };

      Plotly.newPlot("myDiv", data, layout, {showLink: false});
});
Click to copy
05k10k15kMillions USD2011 US Agriculture Exports by State
d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_world_gdp_with_codes.csv', function(err, rows){
      function unpack(rows, key) {
          return rows.map(function(row) { return row[key]; });
      }

       var data = [{
            type: 'choropleth',
            locations: unpack(rows, 'CODE'),
            z: unpack(rows, 'GDP (BILLIONS)'),
            text: unpack(rows, 'COUNTRY'),
            colorscale: [
                [0,'rgb(5, 10, 172)'],[0.35,'rgb(40, 60, 190)'],
                [0.5,'rgb(70, 100, 245)'], [0.6,'rgb(90, 120, 245)'],
                [0.7,'rgb(106, 137, 247)'],[1,'rgb(220, 220, 220)']],
            autocolorscale: false,
            reversescale: true,
            marker: {
                line: {
                    color: 'rgb(180,180,180)',
                    width: 0.5
                }
            },
            tick0: 0,
            zmin: 0,
            dtick: 1000,
            colorbar: {
                autotic: false,
                tickprefix: '$',
                title: {text: 'GDP<br>Billions US$'}
            }
      }];

      var layout = {
          title: {text: '2014 Global GDP<br>Source: <a href="https://www.cia.gov/library/publications/the-world-factbook/fields/2195.html"> CIA World Factbook</a>'},
          geo:{
              showframe: false,
              showcoastlines: false,
              projection:{
                  type: 'mercator'
              }
          }
      };
      Plotly.newPlot("myDiv", data, layout, {showLink: false});
});
Click to copy
$0$5k$10k$15kGDPBillions US$2014 Global GDPSource: CIA World Factbook
d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_usa_states.csv', function(err, rows){
                function unpack(rows, key) {
return rows.map(function(row) { return row[key]; });
}
var data = [{
    type: 'choropleth',
    locationmode: 'USA-states',
    locations: unpack(rows, 'Postal'),
    z: unpack(rows, 'Population'),
    text: unpack(rows, 'State'),
    autocolorscale: true
}];

var layout = {
title: {text: '2014 US Popultaion by State'},
    geo:{
        scope: 'usa',
        countrycolor: 'rgb(255, 255, 255)',
        showland: true,
        landcolor: 'rgb(217, 217, 217)',
        showlakes: true,
        lakecolor: 'rgb(255, 255, 255)',
        subunitcolor: 'rgb(255, 255, 255)',
        lonaxis: {},
        lataxis: {}
    }
};
Plotly.newPlot("myDiv", data, layout, {showLink: false});
});
Click to copy
10M20M30M2014 US Popultaion by State
d3.json('https://raw.githubusercontent.com/plotly/datasets/master/florida-red-data.json', function(redjson) {

  d3.json('https://raw.githubusercontent.com/plotly/datasets/master/florida-blue-data.json', function(bluejson) {

    Plotly.newPlot('myDiv', [{
      type: 'scattermap',
      lat: [46],
      lon: [-74]
    }], {
      title: {text: "Florida Counties"},
      height: 600,
      width: 600,
      map: {
        center: {
          lat: 28,
          lon: -84
        },
        style: 'light',
        zoom: 4.8,
        layers: [
          {
            sourcetype: 'geojson',
            source: redjson,
            type: 'fill',
            color: 'rgba(163,22,19,0.8)'
          },
          {
            sourcetype: 'geojson',
            source: bluejson,
            type: 'fill',
            color: 'rgba(40,0,113,0.8)'
          },
        ]
      }
    });


});

});
Click to copy
© CARTO, © OpenStreetMap contributors
Florida Counties