JSFiddle - React, Tailwind, and code Playground

by teichmaj

HTML

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://syntagmatic.github.io/parallel-coordinates/d3.parcoords.js"></script>
<div id="example" class="parcoords" style="width:100%;height:300px;"></div>

CSS

body {
    font-size: 14px;
    font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
    margin: 24px;
    background: #fcfcfc;
    line-height: 1.45em;
}
a {
    color: #555;
}
a:hover {
    color: #000;
}
ul {
    margin: 0 20px;
    padding: 0;
}
.dark {
    background: #222;
}
p {
    width: 560px;
}
pre {
    color: #444;
    font-family: Ubuntu Mono, Monaco, monospace;
    padding: 4px 8px;
    background: #f2f2f2;
    border: 1px solid #ccc;
}
h1 small {
    font-weight: normal;
    font-size: 0.5em;
}
h3 {
    margin-top: 40px;
}
.float {
    float: left;
}
.centered {
    text-align: center;
}
.hide {
    display: none;
}
input {
    font-size: 16px;
}
.parcoords > svg, .parcoords > canvas {
    font: 14px sans-serif;
    position: absolute;
}
.parcoords > canvas {
    pointer-events: none;
}
.parcoords text.label {
    cursor: default;
}
.parcoords rect.background {
    fill: transparent;
}
.parcoords rect.background:hover {
    fill: rgba(120, 120, 120, 0.2);
}
.parcoords .resize rect {
    fill: rgba(0, 0, 0, 0.1);
}
.parcoords rect.extent {
    fill: rgba(255, 255, 255, 0.25);
    stroke: rgba(0, 0, 0, 0.6);
}
.parcoords .axis line, .parcoords .axis path {
    fill: none;
    stroke: #222;
    shape-rendering: crispEdges;
}
.parcoords canvas {
    opacity: 1;
    -moz-transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
}
.parcoords canvas.faded {
    opacity: 0.25;
}
.parcoords {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

JavaScript

$.getScript('https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js', function (data, textStatus) {
        $.getScript('https://syntagmatic.github.io/parallel-coordinates/d3.parcoords.js', function (data, textStatus) {
            var blue_to_brown = d3.scale.linear()
                .domain([9, 50])
                .range(["steelblue", "brown"])
                .interpolate(d3.interpolateLab);
            var color = function (d) {
                return blue_to_brown(d['economy (mpg)']);
            };
            var parcoords = d3.parcoords()("#example")
                .color(color)
                .alpha(0.4);
            // load csv file and create the chart
            d3.csv('https://gist.githubusercontent.com/teichmaj/b1c6973b965c44d69d19/raw/1f16cb67e2c327c5bfa7b0d0732f67c5dc4907a2/gistfile1.txt', function (data) {
                parcoords.data(data)
                    .render()
                    .shadows()
                    .reorderable()
                    .brushMode("1D-axes"); // enable brushing
            });
            var sltBrushMode = d3.select('#sltBrushMode');
            sltBrushMode.selectAll('option')
                .data(parcoords.brushModes())
                .enter()
                .append('option')
                .text(function (d) {
                return d;
            });
            sltBrushMode.on('change', function () {
                parcoords.brushMode(this.value);
                switch (this.value) {
                    case 'None':
                        d3.select("#pStrums").style("visibility", "hidden");
                        d3.select("#lblPredicate").style("visibility", "hidden");
                        d3.select("#sltPredicate").style("visibility", "hidden");
                        d3.select("#btnReset").style("visibility", "hidden");
                        break;
                    case '2D-strums':
                        d3.select("#pStrums").style("visibility", "visible");
                  ...