JSFiddle - React, Tailwind, and code Playground

by Don Hatch

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v1.1.2.min.js"></script>
<div id="chartContainer"></div>

JavaScript

// starting with example code from dimple source:
    //   advanced_interactive_legend.html
    //   bars_vertical_grouped_stacked.html

    // undoubtably there's a better way to do this
    var deepCopyData = function (data) {
        var answer = []
        data.forEach(function (datum) {
            var answerDatum = new Object();
            for (var key in datum) {
                answerDatum[key] = datum[key];
            }
            answer.push(answerDatum);
        });
        return answer;
    };

    var svg = dimple.newSvg("#chartContainer", 590, 400);

    //var exampleDataURI = "/data/example_data.tsv"; // the way it was in example source
    var exampleDataURI = "http://dimplejs.org/data/example_data.tsv";
    d3.tsv(exampleDataURI, function (data) {

        // Latest period only
        dimple.filterData(data, "Date", "01/12/2012");
        // Create the chart
        var myChart = new dimple.chart(svg, data);
        //myChart.setBounds(60, 30, 420, 330) // original
        myChart.setBounds(60, 30, 210, 330) // half as wide
        var xAxis = myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
        xAxis.addOrderRule("Price Tier", true);
        xAxis.title = "original hide method: remove";
        myChart.addMeasureAxis("y", "Unit Sales");
        myChart.addSeries("Owner", dimple.plot.bar)
            .addOrderRule("Owner");
        var myLegend = myChart.addLegend(530, 100, 60, 300, "Right");
        myChart.draw();

        // And another chart to demonstrate alternate hiding strategy.  No legend.
        var myChart2 = new dimple.chart(svg, data);
        myChart2.setBounds(310, 30, 210, 330)
        var xAxis2 = myChart2.addCategoryAxis("x", ["Price Tier", "Channel"])
        xAxis2.addOrderRule("Price Tier", true);
        xAxis2.title = "workaround hide method: zero out";
        myChart2.addMeasureAxis("y", "Unit Sales");
        myChart2.addSeries("Owner", dimple.plot.bar)
            .addOrderRule("Owner");
       ...