D3 Examples - Module 4 - Adding Scales and Axes

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Module 4 - Adding Scales and Axes</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;
      }
​
      rect:hover {
      fill: orange;
      }
      
      .axis path,
      .axis line {
      fill: none;
      stroke: black;
      shape-rendering: crispEdges;
      }
      
      .axis text {
      font-family: sans-serif;
      font-size: 11px;
      }
​
      .y.axis path,
      .y.axis line {
      opacity: 0;
      }
​
    </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, 30, 120 ];  //Top, right, bottom, left
      var widthScale = d3.scale.linear().range([0,w-padding[1]-padding[3]]);
      var heightScale = d3.scale.ordinal().rangeRoundBands([padding[0],h-padding[2]],0.1);
      var xAxis = d3.svg.axis().scale(widthScale).orient("bottom");
      var yAxis = d3.svg.axis().scale(heightScale).orient("left");
​
      var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);
​
      d3.csv("col_cpi.csv", function(data){
      data.sort(function(a, b) {
          return d3.descending(+a.monthlyCPI, +b.monthlyCPI);
      });
      widthScale.domain([0,d3.max(data, function(d){
          return +d.monthlyCPI;
      })]);
      heightScale.domain(data.map(function(d) { return d.city; } ));
​
      var rects = svg.selectAll("rect").data(data).enter().append("rect");
      rects.attr("x", padding[3]).attr("y", function(d){
          return heightScale(d.city);
      }).attr("width", function(d){
          return widthScale(d.monthlyCPI);
      }).attr("height", heightScale.rangeBand()).attr("fill", "teal")
      .append("title").text(function(d){
          return d.city + "'s Month CPI is " + d.monthlyCPI;
      });
​
      svg.append("g").attr("class", "x axis")
         .attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
         .call(xAxis);
​
      svg.append("g").attr("class", "y axis")
         .attr("transform", "translate(" + padding[3] + ",0)")
         .call(yAxis);
      });
​
    </script>
​
  </body>
</html>
​
    