Stacked Step Area Plot

This code uses D3 and Dimple.js.

<!-- Create an element for our chart -->
<div id="chart" style="height: 400px; width: 100%;"></div>

<!-- Load D3 -->
<script src="https://d3js.org/d3.v4.min.js"></script>

<!-- Load Dimple -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.3.0/dimple.latest.min.js"></script>

<!-- Create a dimble chart -->
<script type="text/javascript">
    // Create a new svg variable
    var svg = dimple.newSvg("#chart", "100%", "100%");
    // Create a url to the data
    var url = "https://raw.githubusercontent.com/chrisalbon/learn_js/master/data/example_data.tsv"
    // Load the data
    d3.tsv(url, function(data) {
        // Create a chart
        var myChart = new dimple.chart(svg, data);
        // Add an x-axis of time, grouped by Month
        var x = myChart.addCategoryAxis("x", "Month");
        // Order the x-axis by date
        x.addOrderRule("Date");
        // Add a y-axis
        myChart.addMeasureAxis("y", "Unit Sales");
        // Add the actual data, grouped by owner
        var s = myChart.addSeries(null, dimple.plot.area);
        // Display as a step chart
        s.interpolation = "step";
        // Add some margins
        myChart.setMargins("10%", "10%", "10%", "20%");
        // Draw the chart
        myChart.draw();
    });
</script>