iblind/city_pop.csv

## city_pop.csv

          
            city
            state
            estimate_2014
            lat
            lon

            
              Chicago
              Illinois
              2,722,389
              45.37399
              -92.888759

            
              Dallas
              Texas
              1,281,047
              40.636
              -91.168309

            
              Houston
              Texas
              2,239,558
              41.337462
              -75.733627

            
              Los Angeles
              California
              3,928,864
              34.05349
              -118.245323

            
              New York
              New York
              8,491,079
              40.71455
              -74.007124

            
              Philadelphia
              Pennsylvania
              1,560,297
              37.15477
              -94.486114

            
              Phoenix
              Arizona
              1,537,058
              32.46764
              -85.000823

            
              San Antonio
              Texas
              1,436,697
              37.706576
              -122.440612

            
              San Diego
              California
              1,381,069
              37.707815
              -122.466624

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Geo</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
		<style type ="text/css">
    	</style>
    </head>


	<body>


		<!-- JS BEGINS -->
		<script type="text/javascript">


		// Global D3 variables:

		var dataset;

		var padding = 45;
		var h = 400;
		var w = 600;

		var projection =  d3.geo.albersUsa()
							.translate([w/2,h/2])
							.scale([800]);


		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": "RoyalBlue",
						"stroke": "Navy",
						"stroke-width": 0.2,
						"opacity": 0.5
					});


			});


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

				dataset = data;

				svg.selectAll("circle")
				.data(dataset)
				.enter()
				.append("circle")
				.attr({
					"cx": function(d) { return projection([d.lon, d.lat])[0];},
					"cy": function(d) { return projection([d.lon, d.lat])[1];},
					"r": function (d) { return rScale(parseFloat(d.estimate_2014));}
				})
				.style({
					"fill": "red",
					"opacity": 0.8
				});

			});


		</script>


	</body>

</html>


## 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.
city	state	estimate_2014	lat	lon
Chicago	Illinois	2,722,389	45.37399	-92.888759
Dallas	Texas	1,281,047	40.636	-91.168309
Houston	Texas	2,239,558	41.337462	-75.733627
Los Angeles	California	3,928,864	34.05349	-118.245323
New York	New York	8,491,079	40.71455	-74.007124
Philadelphia	Pennsylvania	1,560,297	37.15477	-94.486114
Phoenix	Arizona	1,537,058	32.46764	-85.000823
San Antonio	Texas	1,436,697	37.706576	-122.440612
San Diego	California	1,381,069	37.707815	-122.466624
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Geo</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<style type ="text/css">
	</style>
	</head>




	<body>


	<!-- JS BEGINS -->
	<script type="text/javascript">


	// Global D3 variables:

	var dataset;

	var padding = 45;
	var h = 400;
	var w = 600;

	var projection = d3.geo.albersUsa()
	.translate([w/2,h/2])
	.scale([800]);




	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": "RoyalBlue",
	"stroke": "Navy",
	"stroke-width": 0.2,
	"opacity": 0.5
	});




	});



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

	dataset = data;

	svg.selectAll("circle")
	.data(dataset)
	.enter()
	.append("circle")
	.attr({
	"cx": function(d) { return projection([d.lon, d.lat])[0];},
	"cy": function(d) { return projection([d.lon, d.lat])[1];},
	"r": function (d) { return rScale(parseFloat(d.estimate_2014));}
	})
	.style({
	"fill": "red",
	"opacity": 0.8
	});

	});





	</script>


	</body>

	</html>