<commit_before><!doctype html>
<title>Brushing Example</title>
<link rel="stylesheet" type="text/css" href="../d3.parcoords.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="lib/d3.min.js"></script>
<script src="../d3.parcoords.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.

<p>
  <button id="btnReset">Reset Brushes</button>
  <button id="btnToggle">Disable brushing</button>
  <label for="sltPredicate">Predicate:</label>
  <select id="sltPredicate">
    <option>AND</option>
    <option>OR</option>
  </select>
</p>
<script>
// quantitative color scale
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('data/cars.csv', function(data) {
  parcoords
    .data(data)
    .render()
    .shadows()
    .brushMode("1D-axes");  // enable brushing
});

d3.select('#btnReset').on('click', function() {parcoords.brushReset();})
d3.select('#btnToggle').on('click', function() {
  if (parcoords.brushMode() === '1D-axes') {
    parcoords.brushMode('None');
    d3.select(this).text('Enable brushing');
    d3.select('label').style('visibility', 'hidden');
    d3.select('#sltPredicate').style('visibility', 'hidden');
  } else {
    parcoords.brushMode('1D-axes');
    d3.select(this).text('Disable brushing');
    d3.select('label').style('visibility', 'visible');
    d3.select('#sltPredicate').style('visibility', 'visible');
  }
});
d3.select('#sltPredicate').on('change', function() {<commit_msg>Extend the brush example to demo all brush related options.<commit_after><!doctype html>
<title>Brushing Example</title>
<link rel="stylesheet" type="text/css" href="../d3.parcoords.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="lib/d3.min.js"></script>
<script src="../d3.parcoords.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.

<p>
  <label for="sltBrushMode">Brush mode:</label>
  <select id="sltBrushMode">
  </select>
  <label id="lblPredicate" for="sltPredicate">Predicate:</label>
  <select id="sltPredicate">
    <option>AND</option>
    <option>OR</option>
  </select>
  <button id="btnReset">Reset Brushes</button>
</p>
<script>
// quantitative color scale
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('data/cars.csv', function(data) {
  parcoords
    .data(data)
    .render()
    .shadows()
    .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("#lblPredicate").style("visibility", "hidden");
    d3.select("#sltPredicate").style("visibility", "hidden");
    d3.select("#btnReset").style("visibility", "hidden");
    break;
  default:
    d3.select("#lblPredicate").style("visibility", "visible");
    d3.select("#sltPredicate").style("visibility", "visible");
    d3.select("#btnReset").style("visibility", "visible");
    break;
  }
});

sltBrushMode.property('value', '1D-axes');

d3.select('#btnReset').on('click', function() {parcoords.brushReset();})
d3.select('#sltPredicate').on('change', function() {
{'fraction_non_alphanumeric': 0.20941929583904892, 'fraction_numerical': 0.017146776406035666, 'mean_word_length': 5.170662905500706, 'pattern_counts': {'":': 0, '<': 71, '<?xml version=': 0, '>': 71, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6163280', 'n_tokens_mistral': 1611, 'n_tokens_neox': 1534, 'n_words': 264}