Choropleth Maps in JavaScript

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

Plotly is known for its graphing libraries, but it's also a broader ecosystem for building interactive data apps, AI data analysis tools, and deploying and hosting Dash apps. Explore the full set of tools and platforms designed to help turn data into action. Discover Plotly.

World Choropleth Map (Robinson Projection)

d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2010_alcohol_consumption_by_country.csv', (err, rows) => {
    var unpack = (rows, key) => rows.map((row) => 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);
});

USA Choropleth Map

d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2011_us_ag_exports.csv', (err, rows) => {
    var unpack = (rows, key) => rows.map((row) => 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);
});

Country GDP Choropleth Map

d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_world_gdp_with_codes.csv', (err, rows) => {
    var unpack = (rows, key) => rows.map((row) => 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
            }
        },
        zmin: 0,
        colorbar: {
            dtick: 1000,
            tick0: 0,
            tickmode: 'linear',
            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);
});

Choropleth Map of 2014 US Population by State

d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_usa_states.csv', (err, rows) => {
    var unpack = (rows, key) => rows.map((row) => 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 Population 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);
});

Choropleth Map of Florida Counties Colored by Political Party

d3.json('https://raw.githubusercontent.com/plotly/datasets/master/florida-red-data.json', (redjson) => {
    d3.json('https://raw.githubusercontent.com/plotly/datasets/master/florida-blue-data.json', (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)'
                    },
                ]
            }
        });
    });
});