brightredchilli · December 11, 2015 19:39
diff --git a/49_most_populated.csv b/49_most_populated.csv
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>Page Title</title>
  <script src="http://d3js.org/d3.v3.js"></script>
  <script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
  <script src="http://d3js.org/topojson.v0.min.js"></script>
  <script src="script.js" type="text/javascript" defer></script>
  
  <style type="text/css" media="screen">
    svg {
      background: #81C1FF;
    }
    
    path {
      fill: #eee;
      stroke: rgba(0,0,0,0.2);
    }
    
    circle {
      fill: rgba(0,0,0,0.2);
      stroke: rgba(0,0,0,0.5);
    }
  </style>
 </head>
 <body>
  
 </body>
 </html>
diff --git a/script.js b/script.js
 var width = 1400,
    height = 600;

 var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)

 d3.json("world.json", function(error, world) {
  var countries = topojson.object(world, world.objects.countries);
  var projection = d3.geo.naturalEarth()
    .scale(200)
    .translate([width / 2, height / 2])
  var path = d3.geo.path()
    .projection(projection)
  
  var map = svg.append("g")
    .attr("class", "map")
  
  map.append("path")
      .datum(countries)
      .attr("d", path);
  
  d3.csv('49_most_populated.csv', function(csv) {
    locations = svg.append("g")
      .attr("class", "locations");
    
    csv.forEach(function(loc) {
      var place_ll = projection([loc.longitude, loc.latitude]);
      console.log(place_ll);
      
      locations.append("circle")
        .attr("r", 3)
        .attr("cx", place_ll[0])
        .attr("cy", place_ll[1])
    })
  })
 });
diff --git a/world.json b/world.json
city	country	population	Geocode Score	Geocode Precision	latitude	longitude
Tokyo	Japan	32450000	1.0	zip	35.6895265930799	139.691677093506
Seoul	South Korea	20550000	1.0	zip	37.5663889	126.9997222
Mexio City	Mexico	20450000	0.889	zip	20.1166667	-90.4666667
New York City	USA	19750000	0.805	zip	43.0003472	-75.4998978
Mumbai	India	19200000	1.0	zip	19.0144100168904	72.8479385375977
Jakarta	Indonesia	18900000	1.0	zip	-6.1744444	106.8294444
Sao Paulo	Brazil	18850000	1.0	zip	-23.5475	-46.63611111
Delhi	India	18680000	1.0	zip	28.6666667	77.2166667
Shanghai	China	16650000	1.0	zip	31.2222222	121.4580556
Manila	Philippines	16300000	1.0	zip	14.6041667	120.9822222
Los Angeles	USA	15250000	0.804	zip	34.3666648	-118.2009079
Calcutta	India	15100000	1.0	zip	22.5697222	88.3697222
Moscow	Russia	15000000	1.0	zip	55.7522222	37.6155556
Cairo	Egypt	14450000	1.0	zip	30.05	31.25
Lagos	Nigeria	13488000	1.0	zip	6.4530556	3.3958333
Buenos Aires	Argentina	13170000	1.0	zip	-34.5761256318848	-58.4088134765625
London	United Kingdom	12875000	1.0	zip	51.5084152563931	-0.125532746315002
Beijing	China	12500000	1.0	zip	39.9074977414405	116.397228240967
Karachi	Pakistan	11800000	1.0	zip	24.8666667	67.05
Dhaka	Bangladesh	10979000	1.0	zip	23.7230556	90.4086111
Rio de Janeiro	Brazil	10556000	1.0	zip	-22.90277778	-43.2075
Tianjin	China	10556000	1.0	zip	39.1422222	117.1766667
Paris	France	9638000	1.0	zip	48.85341	2.3488
Istanbul	Turkey	9413000	1.0	zip	41.0350820029997	28.9833068847656
Lima	Peru	7443000	1.0	zip	-12.05	-77.05
Tehran	Iran	7380000	1.0	zip	35.6719444	51.4244444
Bangkok	Thailand	7221000	1.0	zip	13.75	100.5166667
Chicago	USA	6945000	0.857	zip	41.850033	-87.6500523
Bogota	Colombia	6834000	0.857	zip	4.6	-74.0833333
Hyderbad	India	6833000	0.984	zip	17.3752778	78.4744444
Chennai	India	6639000	1.0	zip	13.0878385345075	80.2784729003906
Essen	Germany	6559000	1.0	zip	51.45	7.0166667
Ho Chi Minh City	Vietnam	6424519	0.868	zip	16.4666667	107.6
Hangzhou	China	6389000	1.0	zip	30.2552778	120.1688889
Hong Kong	China	6097000	0.911	zip	39.2488889	117.7891667
Lahore	Pakistan	6030000	1.0	zip	31.5497222	74.3436111
Shenyang	China	5681000	1.0	zip	41.7922222	123.4327778
Changchun	China	5566000	1.0	zip	43.88	125.3227778
Bangalore	India	5544000	0.952	zip	12.9762266976805	77.6032912731171
Harbin	China	5475000	1.0	zip	45.75	126.65
Chengdu	China	5293000	1.0	zip	30.6666667	104.0666667
Santiago	Chile	5261000	1.0	zip	-33.4262838490987	-70.5665588378906
Guangzhou	China	5162000	1.0	zip	23.1166667	113.25
St. Petersburg	Russia	5132000	0.881	zip	59.15	37.55
Kinshasa	DRC	5068000	0.857	zip	-4.3297222	15.315
Baghdad	Irag	4796000	0.857	zip	33.3386111	44.3938889
Jinan	China	4789000	1.0	zip	36.6683333	116.9972222
Houston	USA	4750000	0.857	zip	29.7632836	-95.3632715
Toronto	Canada	4657000	1.0	zip	43.700113788	-79.416304194
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Page Title</title>
	<script src="http://d3js.org/d3.v3.js"></script>
	<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
	<script src="http://d3js.org/topojson.v0.min.js"></script>
	<script src="script.js" type="text/javascript" defer></script>

	<style type="text/css" media="screen">
	svg {
	background: #81C1FF;
	}

	path {
	fill: #eee;
	stroke: rgba(0,0,0,0.2);
	}

	circle {
	fill: rgba(0,0,0,0.2);
	stroke: rgba(0,0,0,0.5);
	}
	</style>
	</head>
	<body>

	</body>
	</html>
	var width = 1400,
	height = 600;

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)

	d3.json("world.json", function(error, world) {
	var countries = topojson.object(world, world.objects.countries);
	var projection = d3.geo.naturalEarth()
	.scale(200)
	.translate([width / 2, height / 2])
	var path = d3.geo.path()
	.projection(projection)

	var map = svg.append("g")
	.attr("class", "map")

	map.append("path")
	.datum(countries)
	.attr("d", path);

	d3.csv('49_most_populated.csv', function(csv) {
	locations = svg.append("g")
	.attr("class", "locations");

	csv.forEach(function(loc) {
	var place_ll = projection([loc.longitude, loc.latitude]);
	console.log(place_ll);

	locations.append("circle")
	.attr("r", 3)
	.attr("cx", place_ll[0])
	.attr("cy", place_ll[1])
	})
	})
	});