Module 5 - Scatterplot

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Module 5 - Scatterplot</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
    <style type="text/css">
      
      body {
      background-color: white;
      font-family: Helvetica, Arial, sans-serif;
      }

h1 {
      font-size: 24px;
      margin: 0;
      }

p {
      font-size: 14px;
      margin: 10px 0 0 0;
      }

svg {
      background-color: white;
      }

circle:hover {
      fill: orange;
      }
      
      .axis path,
      .axis line {
      fill: none;
      stroke: black;
      shape-rendering: crispEdges;
      }
      
      .axis text {
      font-family: sans-serif;
      font-size: 11px;
      }

</style>
  </head>
  <body>

<h1>Colombia CPI by Main Cities</h1>

<p>Colombia Customer Price &ldquo;(CPI)&rdquo; index by country main cities. Source: <a href="https://www.dane.gov.co/index.php/precios-e-inflacion/indice-de-precios-al-consumidor">DANE</a>, March 2015</p>

var w = 700, h = 600;
      var padding = [ 20, 10, 50, 50 ];  //Top, right, bottom, left
      var xScale = d3.scale.linear().range([padding[3],w-padding[1]-padding[3]]);
      var yScale = d3.scale.linear().range([padding[0],h-padding[2]]);
      var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(15);
      var yAxis = d3.svg.axis().scale(yScale).orient("left");

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

d3.csv("col_cpi.csv", function(data){
	  xScale.domain([d3.min(data, function(d) {
	      return +d.monthlyCPI;
	  }),d3.max(data, function(d){
	      return +d.monthlyCPI;
	  })]);
	    
	  yScale.domain([d3.max(data, function(d){
	      return +d.lowIncomeCPI;
	  }),d3.min(data, function(d) {
	      return +d.lowIncomeCPI;
	  })]);

var circles = svg.selectAll("circle").data(data).enter().append("circle");

circles.attr("cx", function(d) {
	      return xScale(d.monthlyCPI);
	  }).attr("cy", function(d) {
	      return yScale(d.lowIncomeCPI);
	  }).attr("r", 0.1).attr("fill", "teal")
	    .append("title").text(function(d) {
		return d.city + "'s Month CPI is " + d.monthlyCPI + ", and " + d.lowIncomeCPI + " is reported low income CPI";
	  });

circles.sort(function(a, b) {
	      return d3.ascending(+a.monthlyCPI, +b.monthlyCPI);
	  }).transition().delay(function(d, i) {
	      return i * 50;
	  }).duration(2000).attr("r", 4);
	  
	  svg.append("g").attr("class", "x axis")
	     .attr("transform", "translate(0," + (h - padding[2] + 10) + ")")
	     .call(xAxis);

svg.append("g").attr("class", "y axis")
	     .attr("transform", "translate(" + (padding[3] - 10) + ",0)")
	     .call(yAxis);
      });
    </script>
  </body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js