iblind/SO_city_pop.csv

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Map</title>
        <script src="http://d3js.org/d3.v3.js"></script>
    </head>


	<body>

		<div id = "n2"> Option #1
		</div>

		<div id = "n1"> Option #2
		</div>

		<div id = "tooltip" class="hidden">

		</div>

		<br>

		<script type="text/javascript">

		var dataset;
		var padding = 45;
		var h = 500;
		var w = 700;
		var projection =  d3.geo.albersUsa()
							.translate([w/2,h/2])
							.scale([900]);
		var population;
		var path = d3.geo.path()
							.projection(projection);

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

			d3.json("us-states.json", function(json){

				svg.selectAll("path")
					.data(json.features)
					.enter()
					.append("path")
					.attr("d", path)
					.attr({
						"fill": "black",
						"stroke": "White",
						"stroke-width": 0.3,
						"opacity": 0.6
					});
			});


			d3.csv("SO_city_pop.csv", function(data){
					console.log(data);
				var rScale = d3.scale.linear()
								.domain([0, d3.max(data, function(d){
									return parseFloat(d.x1);
								})])
								.range([5,15]);

				var circleXCoord;
				var circleYCoord;

				dataset = data;

				svg.selectAll("circle")
				.data(dataset)
				.enter()
				.append("circle")
				.attr({
					"cx": function(d) { circleXCoord = projection([d.lon, d.lat])[0]; return circleXCoord},
					"cy": function(d) { circleYCoord = projection([d.lon, d.lat])[1]; return circleYCoord},
					"r": function (d) { return rScale(parseFloat(d.x1));}
				})
				.style({
					"fill": "#0000FF",
					"opacity": 0,
					"stroke-width":0.7,
					"stroke":"white"
				})
				.transition()
				.duration(1000)
				.ease("circle")
				.style("opacity",0.9)


			});
		</script>


		<script> //CHANGING CIRCLE COLOUR AND SHAPE
			d3.select("#n1")
			.on("click", function(){

			var rScale = d3.scale.linear()
							.domain([0, d3.max(dataset, function(d){
								return parseFloat(d.x2);
							})])
							.range([5,15]);

			var circleXCoord;
			var circleYCoord;

			svg.selectAll("circle")
				.transition()
	 		    .delay(300)
				.duration(1000)
				.ease("circle")
				.style({
					"fill": "DeepPink",
					"stroke": "white",
					"opacity": 0.9,
					"stroke-width": 0.7
				})
				.attr({
					"cx": function(d) { circleXCoord = projection([d.lon, d.lat])[0]; return circleXCoord},
					"cy": function(d) { circleYCoord = projection([d.lon, d.lat])[1]; return circleYCoord},
					"r": function (d) { return rScale(parseFloat(d.x2));}
				})
				;
		});


		d3.select("#n2")
		.on("click", function(){

		// svg.selectAll("circle")
		// 	.transition()
		// 	.duration(500)
		// 	.style("opacity", 0);

		var rScale = d3.scale.linear()
						.domain([0, d3.max(dataset, function(d){
							return parseFloat(d.x1);
						})])
						.range([5,15]);

		var circleXCoord;
		var circleYCoord;

		svg.selectAll("circle")
			.transition()
 		    .delay(300)
			.duration(1000)
			.ease("circle")
			.style({
				"fill": "#0000FF",
				"stroke": "white",
				"opacity": 0.9,
				"stroke-width": 0.7
			})
			.attr({
				"cx": function(d) { circleXCoord = projection([d.lon, d.lat])[0]; return circleXCoord},
				"cy": function(d) { circleYCoord = projection([d.lon, d.lat])[1]; return circleYCoord},
				"r": function (d) { return rScale(parseFloat(d.x1));}
			});


	});


		</script>

	</body>
</html>

## SO_city_pop.csv

          
            city
            x2
            state
            x1
            y1
            lat
            lon

            
              Dallas
              1581
              Texas
              1,281,047
              1,197,816
              32.769582
              -96.791764

            
              Phoenix
              1356
              Arizona
              1,537,058
              1,445,632
              33.462898
              -112.076986

            
              San Diego
              1168
              California
              1,381,069
              1,307,402
              32.745467
              -117.154215

            
              Chicago
              1938
              Illinois
              2,722,389
              2,695,598
              41.864933
              -87.625039

            
              Philadelphia
              940
              Pennsylvania
              1,560,297
              1,526,006
              39.962926
              -75.159232

            
              Houston
              1021
              Texas
              2,239,558
              2,100,263
              29.748644
              -95.362839

            
              San Antonio
              624
              Texas
              1,436,697
              1,327,407
              29.409079
              -98.489685

            
              New York
              2669
              New York
              8,491,079
              8,175,133
              40.71455
              -74.007124

            
              Los Angeles
              718
              California
              3,928,864
              3,792,621
              34.037002
              -118.234578

## us-states.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us-states.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.
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Map</title>
	<script src="http://d3js.org/d3.v3.js"></script>
	</head>




	<body>

	<div id = "n2"> Option #1
	</div>

	<div id = "n1"> Option #2
	</div>

	<div id = "tooltip" class="hidden">

	</div>

	<br>

	<script type="text/javascript">

	var dataset;
	var padding = 45;
	var h = 500;
	var w = 700;
	var projection = d3.geo.albersUsa()
	.translate([w/2,h/2])
	.scale([900]);
	var population;
	var path = d3.geo.path()
	.projection(projection);

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

	d3.json("us-states.json", function(json){

	svg.selectAll("path")
	.data(json.features)
	.enter()
	.append("path")
	.attr("d", path)
	.attr({
	"fill": "black",
	"stroke": "White",
	"stroke-width": 0.3,
	"opacity": 0.6
	});
	});



	d3.csv("SO_city_pop.csv", function(data){
	console.log(data);
	var rScale = d3.scale.linear()
	.domain([0, d3.max(data, function(d){
	return parseFloat(d.x1);
	})])
	.range([5,15]);

	var circleXCoord;
	var circleYCoord;

	dataset = data;

	svg.selectAll("circle")
	.data(dataset)
	.enter()
	.append("circle")
	.attr({
	"cx": function(d) { circleXCoord = projection([d.lon, d.lat])[0]; return circleXCoord},
	"cy": function(d) { circleYCoord = projection([d.lon, d.lat])[1]; return circleYCoord},
	"r": function (d) { return rScale(parseFloat(d.x1));}
	})
	.style({
	"fill": "#0000FF",
	"opacity": 0,
	"stroke-width":0.7,
	"stroke":"white"
	})
	.transition()
	.duration(1000)
	.ease("circle")
	.style("opacity",0.9)


	});
	</script>









	<script> //CHANGING CIRCLE COLOUR AND SHAPE
	d3.select("#n1")
	.on("click", function(){

	var rScale = d3.scale.linear()
	.domain([0, d3.max(dataset, function(d){
	return parseFloat(d.x2);
	})])
	.range([5,15]);

	var circleXCoord;
	var circleYCoord;

	svg.selectAll("circle")
	.transition()
	.delay(300)
	.duration(1000)
	.ease("circle")
	.style({
	"fill": "DeepPink",
	"stroke": "white",
	"opacity": 0.9,
	"stroke-width": 0.7
	})
	.attr({
	"cx": function(d) { circleXCoord = projection([d.lon, d.lat])[0]; return circleXCoord},
	"cy": function(d) { circleYCoord = projection([d.lon, d.lat])[1]; return circleYCoord},
	"r": function (d) { return rScale(parseFloat(d.x2));}
	})
	;
	});





	d3.select("#n2")
	.on("click", function(){

	// svg.selectAll("circle")
	// .transition()
	// .duration(500)
	// .style("opacity", 0);

	var rScale = d3.scale.linear()
	.domain([0, d3.max(dataset, function(d){
	return parseFloat(d.x1);
	})])
	.range([5,15]);

	var circleXCoord;
	var circleYCoord;

	svg.selectAll("circle")
	.transition()
	.delay(300)
	.duration(1000)
	.ease("circle")
	.style({
	"fill": "#0000FF",
	"stroke": "white",
	"opacity": 0.9,
	"stroke-width": 0.7
	})
	.attr({
	"cx": function(d) { circleXCoord = projection([d.lon, d.lat])[0]; return circleXCoord},
	"cy": function(d) { circleYCoord = projection([d.lon, d.lat])[1]; return circleYCoord},
	"r": function (d) { return rScale(parseFloat(d.x1));}
	});


	});


	</script>

	</body>
	</html>
city	x2	state	x1	y1	lat	lon
Dallas	1581	Texas	1,281,047	1,197,816	32.769582	-96.791764
Phoenix	1356	Arizona	1,537,058	1,445,632	33.462898	-112.076986
San Diego	1168	California	1,381,069	1,307,402	32.745467	-117.154215
Chicago	1938	Illinois	2,722,389	2,695,598	41.864933	-87.625039
Philadelphia	940	Pennsylvania	1,560,297	1,526,006	39.962926	-75.159232
Houston	1021	Texas	2,239,558	2,100,263	29.748644	-95.362839
San Antonio	624	Texas	1,436,697	1,327,407	29.409079	-98.489685
New York	2669	New York	8,491,079	8,175,133	40.71455	-74.007124
Los Angeles	718	California	3,928,864	3,792,621	34.037002	-118.234578