espetro/cities.csv

## readme.md

      
    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:

Mike Bostock's Choropleth 1 (on bl.ocks.org)
Jonathan Soma's interactive map (on Youtube)
Mike Bostock's Choropleth 2 (on Medium)


## 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

## 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>

## 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);

## world-110m2.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world-110m2.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
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>
	<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>
	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);