all files / src/visualizations/ parallel_coordinates.js

26.32% Statements 10/38
0% Branches 0/6
0% Functions 0/7
26.32% Lines 10/38
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94                                                                                                                                                                        
import d3 from 'd3';
import '../../vendor/parallel_coordinates/d3.parcoords.css';
import './parallel_coordinates.css';
 
d3.parcoords = require('../../vendor/parallel_coordinates/d3.parcoords.js');
d3.divgrid = require('../../vendor/parallel_coordinates/divgrid.js');
 
const $ = require('jquery');
 
function parallelCoordVis(slice, payload) {
  $('#code').attr('rows', '15');
  const fd = slice.formData;
  const data = payload.data;
 
  let cols = fd.metrics;
  if (fd.include_series) {
    cols = [fd.series].concat(fd.metrics);
  }
 
  const ttypes = {};
  ttypes[fd.series] = 'string';
  fd.metrics.forEach(function (v) {
    ttypes[v] = 'number';
  });
 
  let ext = d3.extent(data, function (d) {
    return d[fd.secondary_metric];
  });
  ext = [ext[0], (ext[1] - ext[0]) / 2, ext[1]];
  const cScale = d3.scale.linear()
    .domain(ext)
    .range(['red', 'grey', 'blue'])
    .interpolate(d3.interpolateLab);
 
  const color = function (d) {
    return cScale(d[fd.secondary_metric]);
  };
  const container = d3.select(slice.selector);
  container.selectAll('*').remove();
  const effHeight = fd.show_datatable ? (slice.height() / 2) : slice.height();
 
  container.append('div')
      .attr('id', 'parcoords_' + slice.container_id)
      .style('height', effHeight + 'px')
      .classed('parcoords', true);
 
  const parcoords = d3.parcoords()('#parcoords_' + slice.container_id)
      .width(slice.width())
      .color(color)
      .alpha(0.5)
      .composite('darken')
      .height(effHeight)
      .data(data)
      .dimensions(cols)
      .types(ttypes)
      .render()
      .createAxes()
      .shadows()
      .reorderable()
      .brushMode('1D-axes');
 
  if (fd.show_datatable) {
      // create data table, row hover highlighting
    const grid = d3.divgrid();
    container.append('div')
        .style('height', effHeight + 'px')
        .datum(data)
        .call(grid)
        .classed('parcoords grid', true)
        .selectAll('.row')
        .on({
          mouseover(d) {
            parcoords.highlight([d]);
          },
          mouseout: parcoords.unhighlight,
        });
      // update data table on brush event
    parcoords.on('brush', function (d) {
      d3.select('.grid')
        .datum(d)
        .call(grid)
        .selectAll('.row')
        .on({
          mouseover(dd) {
            parcoords.highlight([dd]);
          },
          mouseout: parcoords.unhighlight,
        });
    });
  }
}
 
module.exports = parallelCoordVis;