superset/assets/visualizations/parallel_coordinates.js

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;