Module 4 - Adding Scales and Axes

<!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>

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; } ));

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>

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

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