stacked-bar-chart

<!DOCTYPE HTML>
<html>
<head>
<style>

body {
  font: 10px sans-serif;
}

svg {
    width: 100%;
    height: 600px;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.lessons { fill: #00AEF0; }
.want    { fill: #24d9d7; }
.check   { fill: #d9248b; }
.stress  { fill: #D92424; }
</style>

<script src="https://d3js.org/d3.v4.0.0-rc.2.min.js"></script>
<script type="text/javascript">

var data = [
    { date: '23.03', lessons: 3, want: 3, check: 2, stress: 3 },
    { date: '24.03', lessons: 5, want: 2, check: 4, stress: 1 },
    { date: '25.03', lessons: 2, want: 2, check: 2, stress: 0 },
    { date: '26.03', lessons: 1, want: 4, check: 5, stress: 2 },
    { date: '27.03', lessons: 6, want: 2, check: 1, stress: 3 },
    { date: '28.03', lessons: 3, want: 4, check: 2, stress: 0 },
    { date: '29.03', lessons: 4, want: 1, check: 1, stress: 1 }
];

var margin = { top: 20, bottom: 30, right: 20, left: 40, text: 8 };
var width = 1000;
var height = 500;
var padding = 0.02;
var primaryKey = 'date';
var dataKeys = Object.keys(data[0])
    .filter(function(x) { return x !== primaryKey; });

var flatten = function(arrs) { return [].concat.apply([], arrs) };

var dataToCoordinates = function(data) {
    return Object.keys(data)
        .filter(function(x) { return x !== primaryKey; })
        .reduce(function(r, key) {
            var len = data[key];
            r.sum = r.sum + len;
            r.coords.push({ pkey: data[primaryKey], key: key, from: r.sum, len: len });
            return r;
        }, { sum: 0, coords: [] })
        .coords;
};

// data is: { pkey, key, from, len }
var coordinatesToPixels = function(data, axisX, axisY) {
    var y = axisY(data.from);
    var height = axisY.range()[0] - axisY(data.len);
    var x = axisX(data.pkey);
    var width = axisX.bandwidth();
    return { class: data.key, x: x, y: y, height: height, width: width };
};

var applyData = function(graph, data, axisX, axisY) {
    var preparedData = flatten(data.map(dataToCoordinates))
        .map(function(d) { return coordinatesToPixels(d, axisX, axisY); });

    graph
        .selectAll('.bar')
        .data(preparedData)
        .enter()
        .append('rect')
        .attr('class',  function(x) { return x.class; })
        .attr('x',      function(x) { return x.x; })
        .attr('y',      function(x) { return x.y; })
        .attr('width',  function(x) { return x.width; })
        .attr('height', function(x) { return x.height; });
};

var applyDataOld = function(graph, data, axisX, axisY) {
    graph
        .selectAll('.bar')
        .data(data)
        .enter()
        .append('rect')
        .attr('class', 'lessons')
        .attr('x', function(x) { return axisX(x[primaryKey]); })
        .attr('y', function(x) { return axisY(x.lessons); })
        .attr('width', axisX.bandwidth())
        .attr('height', function(x) { return axisY.range()[0] - axisY(x.lessons); });
};

var applyLegend = function(graph, legend) {
    var legendGraph = graph
        .selectAll('.legend')
        .data(legend)
        .enter()
        .append('g')
        .attr('class', 'legend')
        .attr("transform", function(x, i) { return "translate(0," + i * 20 + ")"; });

    legendGraph.append('rect')
        .attr('class', function(x) { return x; })
        .attr('x', width)
        .attr('width', 18)
        .attr('height', 18);

    legendGraph.append('text')
        .attr("x", width - margin.text)
        .attr("y", 9)
        .attr("dy", ".35em")
        .style("text-anchor", "end")
        .text(function(x) { return x; });
};

window.onload = function () {
    var xlabels = d3
        .scaleBand()
        .domain(data.map(function(x) { return x[primaryKey]; }))
        .range([0, width])
        .padding(padding);

    var maxCount = d3.max(
            data,
            function(d) { return dataKeys.reduce(function(r, k) { return r + d[k]; }, 0); });
    var ylabels = d3
        .scaleLinear()
        .domain([0, maxCount]).range([height, 0]);

    var abscissa = d3.axisBottom(xlabels);
    var ordinate = d3.axisLeft(ylabels).ticks(6);

    d3.select('svg g')
        .attr('transform', `translate(${margin.left}, ${margin.top})`);

    d3.select('g#x-axis')
        .attr('transform', `translate(0, ${height})`)
        .call(abscissa);

    d3.select('g#y-axis').call(ordinate);

    applyData(d3.select('g#graph'), data, xlabels, ylabels);
    applyLegend(d3.select('g#legend'), dataKeys);
}
</script>

</head>

<body>
    <div id="chart">
        <svg><g>
            <g id="x-axis" class="axis"></g>
            <g id="y-axis" class="axis"></g>
            <g id="graph"></g>
            <g id="legend"></g>
        </g></svg>
    </div>
</body>

</html>