D3 Examples - simple_bar

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; }
  </style>
</head>
​
<body>
<svg height = 300 width = 500></svg>
​
<script>
  var rectWid = 10
  var height = 300
  var data = [204, 183, 111, 134, 186, 108, 259, 255, 95, 168, 271, 101, 75, 263, 208, 70, 225, 63, 264, 253, 292, 100, 151, 231, 117, 121, 146, 251, 275, 90, 242, 185, 181, 239, 78, 174, 168, 181, 178, 153, 53, 273, 225, 162, 281, 284, 108, 210, 179, 240, 191, 298, 177, 159, 180, 61, 274, 62, 99, 115, 220, 170, 136, 82, 175, 183, 102, 250, 197, 264, 77, 187, 208, 103, 243, 138, 91, 251, 93, 293, 269, 174, 247, 92, 92, 185, 262, 97, 258, 233, 231, 213, 249, 173, 151, 141, 256, 71, 89, 152];
  var svg = d3.select("svg")
  svg.selectAll("rect").data(data)
  .enter().append("rect")
  .attr("x",(d,i) => i * rectWid)
  .attr("y", d => height - d)
  .attr("width", rectWid)
  .attr("height", height)
  .attr("fill", "steelblue")
  .attr("stroke","#fff")
</script>
</body>
    