quizzicol · December 8, 2015 11:50
diff --git a/README.md b/README.md
diff --git a/cities.csv b/cities.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <title>SVG intro</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
 
  <style>
    
    body {
      background: black;
    }
    
    circle {
      fill: rgba(255, 255, 255, .5);
      stroke-opacity:0.5;
    }
    
    
   
  </style>
 	
 </head>

 <body>
  
  
  <script>
   
    var outerWidth = 800;
    var outerHeight = 400;
    var margin = { left: -50, right:-50, top:0, bottom: 0};
    
    var innerWidth = outerWidth - margin.left - margin.right;
    var innerHeight = outerHeight - margin.top - margin.bottom;
    var circleRadius = 5;
    var xColumn = "longitude";
    var yColumn = "latitude";
    var rColumn = "population";
    var rMin = 0; rMax = 10;
    var r = 2;
    
    var svg = d3. select("body").append("svg")
    	.attr("width", outerWidth)
    	.attr("height", outerHeight);
    
    var g = svg.append('g')
    	.attr('transform',"translate(" + margin.left + ", " + margin.top + ")");
    
    var xScale = d3.scale.linear().range([0,innerWidth]);
    var yScale = d3.scale.linear().range([innerHeight,0]);
    var rScale = d3.scale.sqrt().range([rMin,rMax]);  // make the area of the circle proportional to the size of the circle.

    
    function render(data) {
      xScale.domain(d3.extent(data, function(d) { return d[xColumn]; }));
      yScale.domain(d3.extent(data, function(d) { return d[yColumn]; }));
      rScale.domain([0, d3.max(data, function(d) { return d[rColumn]; })]);  // go from 0 to the max value
      
      var circles = g.selectAll("circle").data(data);
      circles.enter().append("circle").attr("r", circleRadius);
      
      circles
      	.attr("cx", 		function (d) { return 	  xScale(d[xColumn]); })
      	.attr("cy", 		function (d) { return 	  yScale(d[yColumn]); })
      	.attr("r",  		function (d) { return 	  rScale(d[rColumn]); })
      
      circles.exit().remove();
    }
    
    
  	function type(d) {
 			// name,latitude,longitude,population

      d.latitude = +d.latitude;
      d.longitude = +d.longitude;
      d.population = +d.population;
      return d;
    }
  
    d3.csv("cities.csv", type, render);
    
    
  </script>
 </body>
 ,
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<title>SVG intro</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

	<style>

	body {
	background: black;
	}

	circle {
	fill: rgba(255, 255, 255, .5);
	stroke-opacity:0.5;
	}



	</style>

	</head>

	<body>


	<script>

	var outerWidth = 800;
	var outerHeight = 400;
	var margin = { left: -50, right:-50, top:0, bottom: 0};

	var innerWidth = outerWidth - margin.left - margin.right;
	var innerHeight = outerHeight - margin.top - margin.bottom;
	var circleRadius = 5;
	var xColumn = "longitude";
	var yColumn = "latitude";
	var rColumn = "population";
	var rMin = 0; rMax = 10;
	var r = 2;

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

	var g = svg.append('g')
	.attr('transform',"translate(" + margin.left + ", " + margin.top + ")");

	var xScale = d3.scale.linear().range([0,innerWidth]);
	var yScale = d3.scale.linear().range([innerHeight,0]);
	var rScale = d3.scale.sqrt().range([rMin,rMax]); // make the area of the circle proportional to the size of the circle.


	function render(data) {
	xScale.domain(d3.extent(data, function(d) { return d[xColumn]; }));
	yScale.domain(d3.extent(data, function(d) { return d[yColumn]; }));
	rScale.domain([0, d3.max(data, function(d) { return d[rColumn]; })]); // go from 0 to the max value

	var circles = g.selectAll("circle").data(data);
	circles.enter().append("circle").attr("r", circleRadius);

	circles
	.attr("cx", function (d) { return xScale(d[xColumn]); })
	.attr("cy", function (d) { return yScale(d[yColumn]); })
	.attr("r", function (d) { return rScale(d[rColumn]); })

	circles.exit().remove();
	}


	function type(d) {
	// name,latitude,longitude,population

	d.latitude = +d.latitude;
	d.longitude = +d.longitude;
	d.population = +d.population;
	return d;
	}

	d3.csv("cities.csv", type, render);


	</script>
	</body>
	,
No results found