Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Making a Map in D3.js v.5
City Population Longitude Lattitude Name
Vienna 1691468 16.37208 48.20849 Austria
Sarajevo 696731 18.35644 43.84864 Bosnia and Herzegovina
Brussels 1019022 4.34878 50.85045 Belgium
Prague 1165581 14.42076 50.08804 Czech Republic
Stuttgart 589793 9.17702 48.78232 Germany
Munich 1260391 11.57549 48.13743 Germany
Leipzig 504971 12.37129 51.33962 Germany
Koeln 963395 6.95 50.93333 Germany
Hannover 515140 9.73322 52.37052 Germany
Hamburg 1739117 10.01534 53.57532 Germany
Frankfurt am Main 650000 8.68417 50.11552 Germany
Essen 593085 7.01228 51.45657 Germany
Duesseldorf 573057 6.77616 51.22172 Germany
Duisburg 504358 6.76516 51.43247 Germany
Dortmund 588462 7.466 51.51494 Germany
Bremen 546501 8.80777 53.07516 Germany
Berlin 3426354 13.41053 52.52437 Germany
Tebessa 634332 8.12417 35.40417 Algeria
Oran 645984 -0.63588 35.69906 Algeria
Algiers 1977663 3.08746 36.73225 Algeria
Valencia 814208 -0.37739 39.46975 Spain
Sevilla 703206 -5.97317 37.38283 Spain
Malaga 568305 -4.42034 36.72016 Spain
Zaragoza 674317 -0.87734 41.65606 Spain
Madrid 3255944 -3.70256 40.4165 Spain
Barcelona 1621537 2.15899 41.38879 Spain
Paris 2138551 2.3488 48.85341 France
Marseille 794811 5.38107 43.29695 France
Zagreb 698966 15.97798 45.81444 Croatia
Budapest 1741041 19.03991 47.49801 Hungary
Palermo 648260 13.33561 38.13205 Italy
Turin 870456 7.68682 45.07049 Italy
Rome 2318895 12.51133 41.89193 Italy
Naples 959470 14.26811 40.85216 Italy
Milan 1236837 9.18951 45.46427 Italy
Genoa 580223 8.94439 44.40478 Italy
Tripoli 1150989 13.18746 32.87519 Libya
Tangier 688356 -5.79975 35.76727 Morocco
Rabat 1655753 -6.83255 34.01325 Morocco
Marrakesh 839296 -7.99994 31.63416 Morocco
Fes 964891 -5.00028 34.03313 Morocco
Casablanca 3144909 -7.61138 33.58831 Morocco
Agadir 698310 -9.59815 30.42018 Morocco
Lisbon 517802 -9.13333 38.71667 Portugal
Tunis 693210 10.16579 36.81897 Tunisia
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My map</title>
<script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>
<link rel="stylesheet" type="text/css" href="map.css">
<style></style>
</head>
<body>
<div id="container" class="svg-container"></div>
<script type="text/javascript">
var w = 1400;
var h = 700;
var svg = d3.select("div#container").append("svg").attr("preserveAspectRatio", "xMinYMin meet").style("background-color","#c9e8fd")
.attr("viewBox", "0 0 " + w + " " + h)
.classed("svg-content", true);
var projection = d3.geoMercator().translate([w/2, h/2]).scale(2200).center([0,40]);
var path = d3.geoPath().projection(projection);
// load data
var worldmap = d3.json("countries.geojson");
var cities = d3.csv("cities.csv");
Promise.all([worldmap, cities]).then(function(values){
// draw map
svg.selectAll("path")
.data(values[0].features)
.enter()
.append("path")
.attr("class","continent")
.attr("d", path),
// draw points
svg.selectAll("circle")
.data(values[1])
.enter()
.append("circle")
.attr("class","circles")
.attr("cx", function(d) {return projection([d.Longitude, d.Lattitude])[0];})
.attr("cy", function(d) {return projection([d.Longitude, d.Lattitude])[1];})
.attr("r", "1px"),
// add labels
svg.selectAll("text")
.data(values[1])
.enter()
.append("text")
.text(function(d) {
return d.City;
})
.attr("x", function(d) {return projection([d.Longitude, d.Lattitude])[0] + 5;})
.attr("y", function(d) {return projection([d.Longitude, d.Lattitude])[1] + 15;})
.attr("class","labels");
});
</script>
</body>
</html>
.continent {
fill: #f0e4dd;
stroke: #e0cabc;
stroke-width: 0.5;
}
.circles {
fill: #3c373d;
}
.labels {
font-family: sans-serif;
font-size: 11px;
fill: #3c373d;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment