Skip to content

Instantly share code, notes, and snippets.

@espetro

espetro/cities.csv

Last active May 13, 2017 18:32
Show Gist options
  • Save espetro/53ff8f3ec370306fd8f0664e6699f328 to your computer and use it in GitHub Desktop.
Save espetro/53ff8f3ec370306fd8f0664e6699f328 to your computer and use it in GitHub Desktop.
Download ZIP
D3 challenge month [2,1]: intro to maps + zooming + ES6
Raw
readme.md

This gist has been inspired in this d3noobs' article about maps. It is the easiest way I've found to introduce SVG maps, whilst expanding the concept with the usual zooming/panning used to visualize maps. Since the previus D3 gist, I will be using ES6 Javascript specification as a standard to make shorter, more comprehensible scripts. Note that I'm using D3.v3.

Despite its simplicity, I've walked a long way before understanding the basic concepts 😭, because there are so complete yet tricky examples out there. For the sake of those who understand JS better, these tutorials may be useful to you:

Raw
cities.csv
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
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<title>World visualization</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<style type="text/css">
path {
stroke: white;
stroke-width: 0.3;
fill: grey;
}
circle {
fill: red;
}
</style>
</head>
<body>
<svg></svg>
<script type="text/javascript">
"use strict";
var width = 960,
height = 500;
var projection = d3.geo.mercator()
.center([0, 5]) // defaults to [0,0]
.scale(200) // defaults to 150
.rotate([-180, 0]);
var svg = d3.select("svg")
.attr("width", width)
.attr("height", height)
.append("g");
var path = d3.geo.path().projection(projection);
/*
On drawing maps, first load the GeoJSON because is bigger, then the data-
*/
d3.json("world-110m2.json", function (error, topo) {
svg.selectAll("path")
.data(topojson.object(topo, topo.objects.countries).geometries)
.enter()
.append("path")
.attr("d", path);
d3.csv("cities.csv", function (error, data) {
svg.selectAll("circle")
.data(data)
.enter()
.append("a")
.attr("xlink:href", function (dp) {
return "https://www.google.com/search?q=" + dp.city;
}).attr("target", "_blank")
.append("circle")
.attr("cx", function (dp) {
return projection([+dp.lon, +dp.lat])[0];
}).attr("cy", function (dp) {
return projection([+dp.lon, +dp.lat])[1];
}).attr("r", 5);
});
});
// zoom + pan behavior
var zoom = d3.behavior.zoom()
.on("zoom", function () {
svg.attr("transform", "translate( " + d3.event.translate.join(",") + ")scale( " + d3.event.scale + ") ");
svg.selectAll("circle").attr("d", path.projection(projection));
svg.selectAll("path").attr("d", path.projection(projection));
});
svg.call(zoom);
</script>
</body>
</html>
Raw
mapES6.js
let width = 960,
height = 500;
let projection = d3.geo.mercator()
.center([0,5]) // defaults to [0,0]
.scale(200) // defaults to 150
.rotate([-180,0]);
let svg = d3.select("svg")
.attr("width", width)
.attr("height", height)
.append("g");
let path = d3.geo.path().projection(projection);
/*
On drawing maps, first load the GeoJSON because is bigger, then the data-
*/
d3.json("world-110m2.json", (error, topo) => {
svg.selectAll("path")
.data( topojson.object(topo, topo.objects.countries).geometries )
.enter()
.append("path")
.attr("d", path);
d3.csv("cities.csv", (error, data) => {
svg.selectAll("circle")
.data(data)
.enter()
.append("a")
.attr("xlink:href", dp => `https://www.google.com/search?q=${dp.city}`)
.attr("target", "_blank")
.append("circle")
.attr("cx", dp => projection([+dp.lon, +dp.lat])[0])
.attr("cy", dp => projection([+dp.lon, +dp.lat])[1])
.attr("r", 5);
});
});
// zoom + pan behavior
let zoom = d3.behavior.zoom()
.on("zoom", () => {
svg.attr("transform", `translate( ${d3.event.translate.join(",")})scale( ${d3.event.scale}) `);
svg.selectAll("circle")
.attr("d", path.projection(projection));
svg.selectAll("path")
.attr("d", path.projection(projection));
});
svg.call(zoom);
Display the source blob
Display the rendered blob
Raw
world-110m2.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment