parallel coordinate with y-axis brushes missing

forked from anonymous's block: parallel coordinate with y-axis brushes missing

<!DOCTYPE html>
<html>
    <head>
        <title>Linking to Data Table</title>
        <link rel="stylesheet" type="text/css" href="d3.parcoords.css">
        <link rel="stylesheet" type="text/css" href="style.css">
        <style>
            body, html { margin: 0; padding: 0; width: 100%; height: 100%; }
            /* parcoords */
            #nutrients { height: 360px; width: 100%; padding: 8px 0 0; border-top: 1px solid #d0d0d0; }
            #nutrients text { font-size: 10px; }
            /* data table styles */
            #grid { width: 100%; height: 200px; overflow: auto; border-top: 1px solid #d0d0d0; }
            .row, .header { clear: left; font-size: 10px; line-height: 16px; height: 16px; width: 2000px; padding: 0 16px;}
            .row:nth-child(odd) { background: rgba(0,0,0,0.05); }
            .header { font-weight: bold; }
            .cell { float: left; overflow: hidden; white-space: nowrap; width: 100px; height: 18px; }
            .faded {opacity: 0.2 !important;}
            .col-0 { width: 180px; }
        </style>
        
        <script src="//d3js.org/d3.v4.js"></script>
        <script src="https://d3js.org/d3-color.v1.min.js"></script>
        <script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
        <script src="https://d3js.org/d3-ease.v1.min.js"></script>
        <script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
        <script src="https://d3js.org/d3-timer.v1.min.js"></script>
        <script src="https://d3js.org/d3-selection.v1.min.js"></script>
        <script src="https://d3js.org/d3-transition.v1.min.js"></script>
        <script src="https://d3js.org/d3-drag.v1.min.js"></script>
        <script src="https://d3js.org/d3-brush.v1.min.js"></script>
        
        <script src="d3.svg.multibrush.js"></script>
        <script src="render-queue.js"></script>
        <script src="d3_v4.parcoords.js"></script>
        <script src="divgrid.js"></script>
        <script src="underscore.js"></script>
    </head>
    <body>
        <div id="grid"></div>
        <div id="nutrients" class="parcoords"></div>
        <script id="brushing">
            var parcoords = d3.parcoords()("#nutrients");
            var transparency = d3.scalePow()
                .exponent(0.15)
                .range([1,0.12]);

var colorList = ["#a50026","#d73027","#f46d43","#fdae61","#fee090","#ffffbf","#e0f3f8","#abd9e9","#74add1","#4575b4","#313695", "#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff","#e0e0e0","#bababa","#878787","#4d4d4d","#1a1a1a", "#40004b","#762a83","#9970ab","#c2a5cf","#e7d4e8","#f7f7f7","#d9f0d3","#a6dba0","#5aae61","#1b7837","#00441b"];

// load csv file and create the chart
            d3.csv('nutrients.csv', function(data) {
                data = data.slice(0, 1000);
                var colorMap = {};
                _(data).chain()
                    .pluck('group')
                    .uniq()
                    .each(function(d,i) {
                        colorMap[d] = colorList.length > i ? colorList[i] : "black";
                    });

var color = function(d) { return colorMap[d.group]; };
                transparency.domain([1,data.length]);

parcoords
                    .data(data)
                    .alpha(transparency(data.length))
                    .color(color)
                    .margin({ top: 64, left: 120, bottom: 12, right: 70 })
                    .mode("queue")
                    .render()
                    .brushMode("1D-axes");  // enable brushing

// create data table, row hover highlighting
                var grid = d3.divgrid();
                d3.select("#grid")
                    .datum(data.slice(0,10))
                    .call(grid)
                    .selectAll(".row")
                    .on("mouseover", function(d) { parcoords.highlight([d]) })
                    .on("mouseout", parcoords.unhighlight);

// update data table on brush event
                parcoords.on("brush", function(d) {
                    console.log("here", d);
                    parcoords.alpha(transparency(d.length));
                    d3.select("#grid")
                        .datum(d.slice(0,30))
                        .call(grid)
                        .selectAll(".row")
                        .on("mouseover", function(d) { parcoords.highlight([d]) })
                        .on("mouseout", parcoords.unhighlight);
                });

window.onresize = function() {
                    setTimeout(function(){
                        parcoords.width(document.body.clientWidth);
                        parcoords.resize();
                    }, 1000);
                };
            });
        </script>
    </body>
</html>

https://d3js.org/d3.v4.js

https://d3js.org/d3-color.v1.min.js

https://d3js.org/d3-dispatch.v1.min.js

https://d3js.org/d3-ease.v1.min.js

https://d3js.org/d3-interpolate.v1.min.js

https://d3js.org/d3-timer.v1.min.js

https://d3js.org/d3-selection.v1.min.js

https://d3js.org/d3-transition.v1.min.js

https://d3js.org/d3-drag.v1.min.js

https://d3js.org/d3-brush.v1.min.js