plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar
Plotly.js

Choropleth Maps in plotly.js

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

Plotly.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: 'Pure alcohol consumption
among adults (age 15+) in 2010', geo: { projection: { type: 'robinson' } } }; Plotly.plot(myDiv, data, layout, {showLink: false}); });
Plotly.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: 'Millions USD',
              thickness: 0.2
          },
          marker: {
              line:{
                  color: 'rgb(255,255,255)',
                  width: 2
              }
          }
      }];


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

      Plotly.plot(myDiv, data, layout, {showLink: false});
});
Plotly.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: 'GDP
Billions US$' } }]; var layout = { title: '2014 Global GDP
Source: CIA World Factbook', geo:{ showframe: false, showcoastlines: false, projection:{ type: 'mercator' } } }; Plotly.plot(myDiv, data, layout, {showLink: false}); });
Plotly.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, 'pop'),
              text: unpack(rows, 'state'),
              autocolorscale: true
      }];


      var layout = {
          title: '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.plot(myDiv, data, layout, {showLink: false});
});
Plotly.d3.json('https://raw.githubusercontent.com/plotly/datasets/master/florida-red-data.json', function(redjson) {

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

    Plotly.newPlot("graph", [{
      type: 'scattermapbox',
      lat: [46],
      lon: [-74]
    }], {
      title: "Florida Counties",
      height: 600,
      width: 600,
      mapbox: {
        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)'
          },        
        ]
      }
    }, {
      mapboxAccessToken: 'pk.eyJ1IjoiY2hyaWRkeXAiLCJhIjoiRy1GV1FoNCJ9.yUPu7qwD_Eqf_gKNzDrrCQ'
    });
      
    
});

});

plotly.js runs on all SVG-compatible browsers

Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to a Developer Support Plan.