Randomized Stacked Bar Chart

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.js"></script>
  <style>
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }

body {
      font-family: sans-serif;
      position: relative;
      margin: 10px auto;
    }
  </style>
</head>

<body>
  <div id="main"></div>
  <script>
    // D3 API: https://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.md
    // This example originated from https://stackoverflow.com/questions/15857286/how-to-create-a-bar-chart-made-up-of-very-small-squares
    var svg,
        max,
        xAxis,
        groups,
        types,
        width,
        height,
        xScale,
        yScale,
        translate,
        data = [],
        colorScale,
        squareHeight = 6, // pixel height of squares
        margin = {top: 20, right: 20, bottom: 80, left: 40};

// A helper to avoid having to use so many quotes inline
    translate = function(x,y){               
      return "translate(" + x + "," + y + ")";
    }
    
    // This color scale assigns a sequence of 10 colors to each data "type" : a,b,c
    colorScale = d3.scale.category10().domain(["a", "b", "c"]);
    
    // Populate a dummy array
    for (i=0; i < 100; i++) {
      data.push({
        a : ((Math.random() * 30) | 0),
        b : ((Math.random() * 30) | 0),
        c : ((Math.random() * 30) | 0)
      });
    }
    
    // Graph width based on data
    width = squareHeight * data.length;

// Find the height of the tallest column to set a 'y scale'
    max = d3.max(data, function(d){return d.a + d.b + d.c});
    height = max * squareHeight;
    
    // Create a linear scale for the x-axis labels
    xScale = d3.scale.linear()
        .range([0,width])
        .domain([0,data.length]);

// Create a linear vertical scale so that we can group boxes vertically
    yScale = d3.scale.linear()
        .domain([0, max])
        .rangeRound([height, 0]);
    
    // Define an axis object for x
    xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom");

// Create svg container and position its main group "g" to top left
    svg = d3.select("#main").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", translate(margin.left, margin.top + 0.5));

// Set up an "offsets" array for each color type ('a', 'b', 'c'). This
    // associates a color domain for each stack segment (starting block, ending block)
    data.forEach(function(d){
      var y0 = 0;
      d.offsets = colorScale.domain().map(function(type){
        return {type: type, y0: y0, y1: y0 += +d[type], value : d[type]}
      });
    });

// Now, render and position the x-axis in a group element
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

// Create/position a g element for each tower. 
    groups = svg.selectAll(".group")
        .data(data)
          .enter().append("g")
            .attr("transform", function(d,i){return "translate(" + xScale(i) + ", 0)"})
            .attr("class", "group");

// Create a g element for each section of a tower.
    types = groups.selectAll(".type")
        .data(function(d){return d.offsets})
        .enter().append("g")
          .attr("transform", function(d){ return translate(0,yScale(d.y1))})
          .attr("class", "type")
          .attr("fill", function(d){return colorScale(d.type)})

// Create the individual squares
    types.selectAll("rect")
        .data(function(d){return d3.range(0,d.value)})
        .enter().append("rect")
          .attr("height", squareHeight-0.5)
          .attr("width", squareHeight-0.5)
          .attr("y", function(d){ return squareHeight * d })

</script>
</body>

https://d3js.org/d3.v3.js