Skip to content

Instantly share code, notes, and snippets.

@d3noob
Last active November 30, 2019 18:26
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 12 You must be signed in to fork a gist
  • Save d3noob/5193723 to your computer and use it in GitHub Desktop.
Save d3noob/5193723 to your computer and use it in GitHub Desktop.
World map with zoom / pan and cities
license: mit

A World map with zoom / pan functionality and added markers on cities.

code city country lat lon
ZNZ ZANZIBAR TANZANIA -6.13 39.31
TYO TOKYO JAPAN 35.68 139.76
AKL AUCKLAND NEW ZEALAND -36.85 174.78
BKK BANGKOK THAILAND 13.75 100.48
DEL DELHI INDIA 29.01 77.38
SIN SINGAPORE SINGAPOR 1.36 103.75
BSB BRASILIA BRAZIL -15.67 -47.43
RIO RIO DE JANEIRO BRAZIL -22.90 -43.24
YTO TORONTO CANADA 43.64 -79.40
IPC EASTER ISLAND CHILE -27.11 -109.36
SEA SEATTLE USA 47.61 -122.33
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
stroke: white;
stroke-width: 0.25px;
fill: grey;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var width = 960,
height = 500;
var projection = d3.geo.mercator()
.center([0, 5 ])
.scale(200)
.rotate([-180,0]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var path = d3.geo.path()
.projection(projection);
var g = svg.append("g");
// load and display the World
d3.json("world-110m2.json", function(error, topology) {
// load and display the cities
d3.csv("cities.csv", function(error, data) {
g.selectAll("circle")
.data(data)
.enter()
.append("a")
.attr("xlink:href", function(d) {
return "https://www.google.com/search?q="+d.city;}
)
.append("circle")
.attr("cx", function(d) {
return projection([d.lon, d.lat])[0];
})
.attr("cy", function(d) {
return projection([d.lon, d.lat])[1];
})
.attr("r", 5)
.style("fill", "red");
});
g.selectAll("path")
.data(topojson.object(topology, topology.objects.countries)
.geometries)
.enter()
.append("path")
.attr("d", path)
});
// zoom and pan
var zoom = d3.behavior.zoom()
.on("zoom",function() {
g.attr("transform","translate("+
d3.event.translate.join(",")+")scale("+d3.event.scale+")");
g.selectAll("circle")
.attr("d", path.projection(projection));
g.selectAll("path")
.attr("d", path.projection(projection));
});
svg.call(zoom)
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@jmaroa
Copy link

jmaroa commented Mar 4, 2015

How can I keep the same size for the circles?

@joeSaad
Copy link

joeSaad commented Dec 5, 2016

Where do i get world-110m2.json from?

@AmauryVanEspen
Copy link

Good morning,

this is an awesome feature,
would it be compliant with "Gephi Maps of Countries plugin" ? to use the background borders map from OSM into Gephi ?

Thank you

Amaury

@harshithabraj
Copy link

its not working fine for me, can anybody send me the zip file of it ??

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment