JSFiddle - React, Tailwind, and code Playground

by mattboy

HTML

<script src="http://nickqizhu.github.io/dc.js/js/d3.js"></script>
<script src="http://nickqizhu.github.io/dc.js/js/crossfilter.js"></script>
<link rel="stylesheet" href="http://nickqizhu.github.io/dc.js/css/dc.css">
<script src="http://nickqizhu.github.io/dc.js/js/dc.js"></script>
<div id="line-chart" />
<div id="line-chart-reverse" />

CSS

#line-chart-reverse{
    float:left;
}

JavaScript

var lineChartExample = {
    initChart: function (experiments) {
        var chart = dc.lineChart("#line-chart");

        experiments.forEach(function (x) {
            x.Speed = +x.Speed;
        });

        var ndx = crossfilter(experiments),
            runDimension = ndx.dimension(function (d) {
                return +d.Run;
            }),
            speedSumGroup = runDimension.group().reduceSum(function (d) {
                return d.Speed * d.Run / 1000;
            });

        chart.width(300)
            .height(240)
            .x(d3.scale.linear().domain([0, 20]))
            .renderDataPoints(true)
            .yAxisLabel("Speed")
            .xAxisLabel("Run")
            .dimension(runDimension)
            .group(speedSumGroup);
        
        var chart2 = dc.lineChart("#line-chart-reverse");

        chart2.width(300)
            .height(240)
            .x(d3.scale.linear().domain([20, 0]))
            .renderDataPoints(true)
            .yAxisLabel("Speed")
            .xAxisLabel("Run-Reverse")
            .dimension(runDimension)
            .group(speedSumGroup);

        dc.renderAll();
    }
};
var experiments =...