edwardloveall · December 11, 2015 09:58
diff --git a/100_most_populated.csv b/100_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>100 Most Populated</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 = 976,
    height = 506;

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

 d3.json("http://bl.ocks.org/d/4090846/world-110m.json", function(error, world) {
  var countries = topojson.object(world, world.objects.countries);
  var projection = d3.geo.naturalEarth()
    .scale(180)
    .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('100_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])
    })
  })
 });
City	latitude	Country	rank	population	longitude
Tokyo	35.670479	Japan	1	28,025,000	139.740921
Mexico City	19.32792	Mexico	2	18,131,000	-99.19109
Mumbai	19.11105	India	3	18,042,000	72.87093
S·o Paulo	0.3617	Brazil	4	17, 711,000	-52.147511
New York City	40.71455	USA	5	16,626,000	-74.7124
Shanghai	31.247709	China	6	14,173,000	121.472618
Lagos	6.43918	Nigeria	7	13,488,000	3.42348
Los Angeles	34.5329	USA	8	13,129,000	-118.245009
Calcutta	22.52667	India	9	12,900,000	88.34616
Buenos Aires	-34.554539	Argentina	10	12,431,000	-58.469082
SeÛul	37.557121	South Korea	11	12,215,000	126.977379
Beijing	39.90601	China	12	12,033,000	116.387909
Karachi	24.88978	Pakistan	13	11,774,000	67.28511
Delhi	24.6353	India	14	11,680,000	81.56905
Dhaka	23.709801	Bangladesh	15	10,979,000	90.407112
Manila	14.60962	Philippines	16	10,818,000	121.589
Cairo	30.8374	Egypt	17	10,772,000	31.25536
’saka	34.677471	Japan	18	10,609,000	135.50325
Rio de Janeiro	-22.8901	Brazil	19	10,556,000	-43.216202
Tianjin	39.128399	China	20	10,239,000	117.185112
Jakarta	-6.18287	Indonesia	21	9,815,000	106.829109
Paris	48.856925	France	22	9,638,000	2.34121
Istanbul	41.1144	Turkey	23	9,413,000	28.965521
Moscow	30.317137	Russian Fed	24	9,299,000	-97.56554
London	51.506325	United Kingdom	25	7,640,000	0.127144
Lima	-12.436	Peru	26	7,443,000	-77.21217
Tehr„n	35.702591	Iran	27	7,380,000	51.408829
Bangkok	13.72635	Thailand	28	7,221,000	100.641418
Chicago	41.88415	USA	29	6,945,000	-87.632409
Bogot·	4.65637	Colombia	30	6,834,000	-74.11779
Hyderabad	17.4376	India	31	6,833,000	78.4706
Chennai	13.6397	India	32	6,639,000	80.24311
Essen	51.45181	Germany	33	6,559,000	7.1063
Ho Chi Minh City	10.75918	Vietnam	34	6,424,519	106.662498
Hangzhou	30.252501	China	35	6,389,000	120.165024
Hong Kong	22.411249	China	36	6,097,000	114.153542
Lahore	31.54991	Pakistan	37	6,030,000	74.327301
Shenyang	41.788509	China	38	5,681,000	123.40612
Changchun	43.88131	China	39	5,566,000	125.312622
Bangalore	12.97092	India	40	5,544,000	77.60482
Harbin	45.755199	China	41	5,475,000	126.62252
Chengdu	30.67	China	42	5,293,000	104.71022
Santiago	-33.463039	Chile	43	5,261,000	-70.647942
Guangzhou	23.107389	China	44	5,162,000	113.267616
St ' Petersburg	30.317137	Russian Fed	45	5,132,000	-97.56554
Kinshasa	-4.31642	DRC	46	5,068,000	15.29834
Baghd„d	33.328152	Iraq	47	4,796,000	44.386028
Jinan	36.65551	China	48	4,789,000	116.96701
Wuhan	30.572399	China	49	4,750,000	114.279121
Toronto	43.648565	Canada	50	4,657,000	-79.385329
Yangon	16.80389	Myanmar (Burma)	51	4,458,000	96.154694
Alger	36.765808	Algeria	52	4,447,000	3.3193
Philadelphia	39.95227	USA	53	4,398,000	-75.162369
Qingdao	36.87509	China	54	4,376,000	120.34272
Milano	45.468945	Italy	55	4,251,000	9.18103
Pusan	35.170429	South Korea	56	4,239,000	128.999481
Belo Horizonte	-19.936501	Brazil	57	4,160,000	-43.9617
Almadabad	23.8539	India	58	4,154,000	72.615692
Madrid	40.4203	Spain	59	4,072,000	-3.705774
San Francisco	37.77916	USA	60	4,051,000	-122.420049
Alexandria	31.19224	Egypt	61	3,995,000	29.88987
Washington DC	38.89037	USA	62	3,927,000	-77.31959
Houston	29.76045	USA	63	3,918,000	-95.369784
Dallas	32.778155	USA	64	3,912,000	-96.795404
Guadalajara	20.68759	Mexico	65	3,908,000	-103.351079
Chongging	29.544001	China	66	3,896,000	106.522621
Medellin	6.23651	Colombia	67	3,831,000	-75.590279
Detroit	42.331685	USA	68	3,785,000	-83.47924
Handan	36.60194	China	69	3,763,000	114.470253
Frankfurt	50.112035	Germany	70	3,700,000	8.6834
Porto Alegre	-30.39909	Brazil	71	3,699,000	-51.208
Hanoi	21.3195	Vietnam	72	3,678,000	105.819908
Sydney	-33.869629	Australia	73	3,665,000	151.206955
Santo Domingo	39.922985	Domincian Republic	74	3,601,000	-97.820189
Singapore	1.29378	Singapore	75	3,587,000	103.853256
Casablanca	33.605381	Morocco	76	3,535,000	-7.63194
Katowice	50.256055	Poland	77	3,488,000	19.30948
Pune	18.52671	India	78	3,485,000	73.8616
Bangdung	-6.91242	Indonesia	79	3,420,000	107.606911
Monterrey	25.630215	Mexico	80	3,416,000	-100.284894
MontrÈal	45.512288	Canada	81	3,401,000	-73.554392
Nagoya	35.14986	Japan	82	3,377,000	136.926224
Nanjing	32.485	China	83	3,375,000	118.778969
Abidjan	5.32339	CÙte d'Ivoire	84	3,359,000	-4.2627
Xi'an	31.644899	China	85	3,352,000	104.414009
Berlin	52.516074	Germany	86	3,337,000	13.376987
Riyadh	24.64039	Saudi Arabia	87	3,328,000	46.7533
Recife	-8.775	Brazil	88	3,307,000	-34.9007
Dusseldorf	51.21563	Germany	89	3,251,000	6.776055
Ankara	39.94293	Turkey	90	3,190,000	32.86048
Melbourne	-37.817532	Australia	91	3,188,000	144.967148
Salvador	-12.996	Brazil	92	3,180,000	-38.494011
Dalian	38.94381	China	93	3,153,000	121.576523
Caracas	10.49605	Venezuela	94	3,153,000	-66.898277
Adis Abeba	9.2273	Ethiopia	95	3,112,000	38.746792
Athina	37.97615	Greece	96	3,103,000	23.736415
Cape Town	-33.979012	South Africa	97	3,092,000	18.4823
Koln	50.941655	Germany	98	3.067,000	6.955065
Maputo	-25.9681	Mozambique	99	3,017,000	32.58065
Napoli	40.839901	Italy	100	3,012,000	14.251852
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>100 Most Populated</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 = 976,
	height = 506;

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

	d3.json("http://bl.ocks.org/d/4090846/world-110m.json", function(error, world) {
	var countries = topojson.object(world, world.objects.countries);
	var projection = d3.geo.naturalEarth()
	.scale(180)
	.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('100_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])
	})
	})
	});