D3 Examples - Selections: Data Example

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;
    }
​
    svg {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
​
<body>
​
  <svg>
  </svg>
​
</body>
​
<script>
  var rectWidth = 100;
  var height = 300;
  var data = [100, 224, 187, 124, 200];
​
  var svg = d3.select('svg');
  
  svg.selectAll('rect')
    .data(data)
    .enter().append('rect')
    .attr('x', function (d, i) {
      return i * rectWidth;
    })
    .attr('y', function (d) {
        return(height - d);
    })
    .attr('width', rectWidth)
    .attr('height', function (d) {
      return d;
    })
    .attr('fill', 'blue')
    .attr('stroke', '#fff');
</script>
    