D3 Examples - Getting Started with D3 Ch2

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    div.chart {
      font-family: sans-serif;
      font-size: 0.7em;
    }
    div.bar {
      background-color: DarkRed;
      color:white;
      height: 3em;
      line-height: 3em;
      padding-right: 1em;
      margin-bottom: 2px;
      text-align:right;
      margin-left:22em;
    }
    div.label {
      height: 3em;
      line-height: 3em;
      padding-right:1em;
      margin-bottom:2px;
      text-align:right;
      float:left;
      width:20em;
    }
  </style>
  <script>
    function draw(data){
      'using strict';
      // first creating a single chart div and adding label as sub div into it
      d3.select('body')
        .append('div')
            .attr('class', 'chart')
        .selectAll('div')
        .data(data.cash)
        .enter()
        .append('div')
            .attr('class', 'line');
        d3.selectAll('div.line')
        .append('div')
            .attr('class', 'label')
            .text(function(d){
        return d.name;
      });
      // now to that line division adding another sub div with bar chart to have it parallel
      d3.selectAll('div.line')
        .append('div')
            .attr('class', 'bar')
        .style('width', function(d){
        return d.count/100 + 'px';
      })
        .style('outline', '1px solid grey')
        .text(function(d){
        return Math.round(d.count);
      });
            
    }
  </script>
</head>
​
<body>
  <script>
   d3.json('plaza_traffic.json', draw)
  </script>
</body>
​
    