demo/brush-with-arguments.html

<!doctype html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
</head>
<title>Brushing Example</title>
<link rel="stylesheet" type="text/css" href="./parcoords.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="./lib/d3.v5.min.js"></script>
<script src="./parcoords.standalone.js"></script>
<div id="example" class="parcoords" style="width:960px;height:200px;"></div>
<p>Loads an external <a href="data/cars.csv">csv file</a>, creates a custom <a
        href="https://github.com/mbostock/d3/wiki/Quantitative-Scales#wiki-quantitative">quantitative color scale</a>
    using <a href="http://bl.ocks.org/3014589">L*a*b interpolation</a>, and enables brushing.

<h3>Brush Debug</h3>
<p id="brush-results" style="background-color:#ccc;">
</p>


    <script>
        var parcoords = ParCoords()("#example")
        //    .color(color)
            .alpha(0.4)
            .on("brushstart", function(brushed, args){
              if(args !== undefined) {
                d3.select("#brush-results").html([
                  '<span style="font-weight:bold;">brush end</span>',
                  'dimension: ' + args.axis
                ].join("<br/>"))
              } else {
                d3.select("#brush-results").html('cleared brush')
              }
            })
            .on("brush", function(brushed, args){
              if(args !== undefined) {
                var brush_selection = args.selection
                d3.select("#brush-results").html([
                  '<span style="font-weight:bold;">brushing</span>',
                  'dimension: ' + args.axis,
                  'selection (raw): ' + JSON.stringify(args.selection.raw),
                  'selection : ' + JSON.stringify(args.selection.scaled)
                ].join("<br/>"))
              } else {
                d3.select("#brush-results").html('cleared brush')
              }
            })
            .on("brushend", function(brushed, args){
              if(args !== undefined  && Object.keys(this.brushExtents()).length > 0) {
                var brush_selection = args.selection;
                d3.select("#brush-results").html([
                  '<span style="font-weight:bold;">brush end</span>',
                  'dimension: ' + args.axis,
                  'selection (raw): ' + brush_selection.raw,
                  'selection : ' + JSON.stringify(brush_selection.scaled)
                ].join("<br/>"))
              } else {
                d3.select("#brush-results").html('cleared brush')
              }
            })


        // load csv file and create the chart
        d3.csv('data/cars.csv').then(function(data) {
            parcoords
                .data(data)
                .hideAxis(["name"])
                .composite("darker")
                .render()
                .shadows()
                .reorderable()
                .brushMode("1D-axes");  // enable brushing
        });

    </script>