D3 Examples - Module 5

xxxxxxxxxx
 
<!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>
​
    <script type="text/javascript">     
​
​
      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>
​
    