D3 Examples - horizontal bars and scales

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>
  
  <script>
    var data = [54, 31, 65, 80, 125,109];
    var barH = 1;
    var chartH = 200;
    var chartW = 452;
    
    var xScale = d3.scaleLinear().domain([0, d3.max(data)]).range([0, chartW])
    var yScale = d3.scaleLinear().domain([0, data.length * barH]).range([0, chartH])
    
    var colorScale = d3.scaleLinear()
        .domain([d3.min(data), d3.mean(d3.extent(data)), d3.max(data)]) // the input [min, max] of the mapping
      .range(['green', 'orange', 'red']) // the output
​
    var svg = d3.select("body").append("svg")
      .attr("width", chartW)
      .attr("height", chartH)
    
    svg.selectAll('rect') 
      .data(data) // binds to data
      .enter() // returns placeholders for needed data items representation (if some where already existing, they are not passed further)
      .append('rect') // replaces each placeholder with the given element
      .attr('y', (d, i) => yScale(i * barH))
        .attr('height', yScale(barH))
        .attr('x', xScale(0))
        .attr('width', (d, i) => xScale(d))
        .attr('fill', (d, i) => colorScale(d))
      .attr('stroke', '#000')
    
    
  </script>
</body>
​
    