I've found a GeoJSON file containing all cities in The Netherlands. I'm now trying to plot this map using Plotly, but I can't seem to figure out how to do this. I know it's possible to set the scope on a specific country, but Plotly's default map doesn't seem to contain the individual cities for each country.
I'm working based on this JSFiddle I would elsewhere on Stackoverflow. I know the data is not relevant for The Netherlands, but that doesn't matter at this moment: all I want is a map that looks somewhat like this (but I like to do it in Plotly, since Plotly's supported in Python).
Any help is greatly appreciated!
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<br>Billions US$'
}
}];
console.log(data.locations);
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.plot(myDiv, data, layout, {showLink: false});
});