D3 Examples - Stackoverflow comment

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 colours = ["#F67280","#38817A","#10316B","#FC624D","#8E9FE6","#FFD464","#D2D4D6","#127C56","#FF6699","#10316B","#FC624D",];
    var domain = [5,10,15,20,25,30,35,40,45,50]
    var data = [7,3,6,55,31]
    
    var colour = d3.scaleThreshold()
    .domain(domain)
    .range(colours); 
    
    var width = 960    
    var boxWidth = (width / data.length) - 5
    
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
​
    svg.selectAll("rect")
        .data(data)
        .enter()
        .append("rect")
        .attr("x", function(d, i) { return i * (boxWidth + 5) })
        .attr("y", 0)
        .attr("width", boxWidth)
        .attr("height", boxWidth)
        .style("fill",function(d){ return colour(d) })
​
  </script>
</body>
​
    