D3 Examples - Module 3

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Module 3 - Bar cchar</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
    <style type="text/css">
      
      body {
      background-color: #ddddff;
      }
​
      svg {
      background-color: white;
      }
​
    </style>
  </head>
  <body>
​
    <script type="text/javascript">     
      var svg = d3.select("body").append("svg").attr("width", 300).attr("height", 400);
      d3.csv("col_cpi.csv", function(data) {
      data.sort(function(a, b) {
          return d3.descending(+a.monthlyCPI, +b.monthlyCPI);
      });
      var rects = svg.selectAll("rect").data(data).enter().append("rect");
      rects.attr("x", 0).attr("y", function(d, i) {
          return i * 15;
      }).attr("width", function(d) {
          return d.monthlyCPI * 300;
      }).attr("height", 8).append("title").text(function(d) {
          return d.city + "'s Month CPI is " + d.monthlyCPI;
      });
      });
    </script>
​
  </body>
</html>
​
    