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: 'Pure alcohol consumption<br>among adults (age 15+) in 2010',
geo: {
projection: {
type: 'robinson'
}
}
};
Plotly.newPlot("myDiv", data, layout, {showLink: false});
});
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.newPlot("myDiv", data, layout, {showLink: false});
});
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<br>Billions US$'
}
}];
var layout = {
title: '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});
});
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: '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});
});
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: "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)'
},
]
}
});
});
});