D3 Examples - InterativeDataVis

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; }
    .bar {
      display: inline-block;
      width: 20px;
      height: 75px;
      margin: 10px;
      background-color: teal;
    }
  </style>
</head>
​
<body>
  <script>
    
    var dataset = [
      [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
      [410, 12], [475, 44], [25, 67], [85, 21], [220, 88],
      [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], 
      [410, 12], [475, 44],[25, 67], [85, 21], [220, 88]
    ];
    
    function chartParams(w, h, dataset, x, y) {
      
      var yScale = d3.scaleLinear()
        .domain([0, d3.max(dataset, y)])
        .range([0, h])
      
      var barW = (w-2)/dataset.length - 1
      
      return {
        w: w,
        h: h,
        dataset: dataset,
        barW: barW,
        x: (d, i) => 1 + (barW+1)*i,
        y: (d,i) => h - y(d, i),
        yScale: yScale,
        height: (d, i) => yScale(y(d, i))
      }
    }
    
    var p = chartParams(900, 200, dataset, (d) => d[0], (d) => d[1])
    
    var svg = d3.select("body")
      .append("svg")
      .attr("height", p.h)
      .attr("width", p.w)
​
    svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("width", p.barW)
        .attr("height", p.height)
        .attr("x", p.x)
        .attr("y", p.y)
        
  </script>
</body>
​
    