D3 Examples

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>D3 Test</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style>div.bar {
      display: inline-block;
      width: 20px;
      height: 75px;   /* We'll override this later */
      background-color: teal;
      margin-right: 2px;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">
      var w = 500;
      var h = 100;
      var barPadding = 1;
      var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);
      var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
      svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x", function(d, i) {
          return i * (w / dataset.length);
          })
        .attr("y", function(d) {
          return h - (d * 4);
        })
        .attr("width", w / dataset.length - barPadding)
        .attr("height", function(d) {
          return d * 4;
        })
        .attr("fill", function(d) {
          return "rgb(0, 0, " + (d * 10) + ")";
        })
      svg.selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
        .text(function(d) {
          return d;
        })
      .attr("x", function(d, i) {
        return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
        })
      .attr("y", function(d) {
        return h - (d * 4) + 14;
        })
      .attr("font-family", "sans-serif")
      .attr("font-size", "11px")
      .attr("fill", "white")
      .attr("text-anchor", "middle");  
    </script>
  </body>
</html>
    