Choropleth Maps in JavaScript

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

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.

World Choropleth Map (Robinson Projection)

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

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

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

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

USA Choropleth Map

d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2011_us_ag_exports.csv', (err, rows) => {
    const unpack = (rows, key) => rows.map((row) => row[key]);

    const 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
            }
        }
    }];

    const 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});
});

Country GDP Choropleth Map

d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_world_gdp_with_codes.csv', (err, rows) => {
    const unpack = (rows, key) => rows.map((row) => row[key]);

    const 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$'}
        }
    }];

    const 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});
});

Choropleth Map of 2014 US Population by State

d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_usa_states.csv', (err, rows) => {
    const unpack = (rows, key) => rows.map((row) => row[key]);

    const data = [{
        type: 'choropleth',
        locationmode: 'USA-states',
        locations: unpack(rows, 'Postal'),
        z: unpack(rows, 'Population'),
        text: unpack(rows, 'State'),
        autocolorscale: true
    }];

    const 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, {showLink: false});
});

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)'
                    },
                ]
            }
        });
    });
});

");