Old school D3 from simpler times

All examples By author By category About

AndresClavijo

Full window Github gist

Module 3 - Bar Chart

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

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

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