v Proportional Stacked Bar Chart - Javascript

Proportional Stacked Bar Chart

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 new chart
        var myChart = new dimple.chart(svg, data);
        // Add an x-axis that groups the data by month
        var x = myChart.addCategoryAxis("x", "Month");
        // Order the x axis by date
        // Add a y-axis that is the percent of unit sales.
        myChart.addPctAxis("y", "Unit Sales");
        // Add the data to the chart, grouped by "Channel"
        var avg = myChart.addSeries("Channel", dimple.plot.bar);
        // Calculate the average Unit Sales
        avg.aggregate = dimple.aggregateMethod.avg;
        // Add some margins
        myChart.setMargins("10%", "10%", "10%", "20%");
        // Draw the chart