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.
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});
});
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});
});
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="/?originalUrl=https%3A%2F%2Fplotly.com%2F%26quot%3Bhttps%3A%2F%2Fwww.cia.gov%2Flibrary%2Fpublications%2Fthe-world-factbook%2Ffields%2F2195.html%26quot%3B%26gt%3B%2520CIA%2520World%2520Factbook%26lt%3B%2Fa%26gt%3B"},
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: {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});
});
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)'
},
]
}
});
});
});
