Getting Started with D3 Ch2_Ex2

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

https://d3js.org/d3.v4.min.js