block by micahstubbs 703b1c69a28f5a9d17b645d1253c1233

correlation graph

Full Screen

a visualization that draws a correlation network from pairwise correlations between features (dataset columns). this calculation of correlations between each column in a dataset is one method to prepare a graph of relationships from tabular data.

the correlations are calculated by h2o for the famous airlines_all dataset as aggregated by h2o-3. comparisons between numeric columns use Pearson Correlation while comparisons between pairs of two categorical columns as well as a mixed pair of one categorical column and one numeric column use a novel method developed by Lee Wilkinson

this example draws from a static graph.json file produced from the tabular airlines dataset by the h2o server.

community detection with jLouvain

repo for the correlation-graph visualization component shown in this example: https://github.com/micahstubbs/correlation-graph

index.html

<!DOCTYPE html>
<html lang='en-US'>
<meta charset='utf-8'>
<head>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
  <link rel='stylesheet' href='style.css'>
  <link rel="icon" href="data:;base64,iVBORw0KGgo=">
  <script src='d3.v4.min.js'></script>
  <script src='babel.min.js'></script>
  <script src='jLouvain.js'></script>
  <script src='lodash.js'></script>
  <script src='correlation-graph.js'></script>
  <script src='draw-pictogram-table.js'></script>
</head>
<body>
  <main class='main'>
    <div class='main-content'>
      <div class='graph-container' id='graph'></div>
    </div>
    <div class='sidebar'>
      <div class='table-container'></div>
      <div class='stats-container'></div>
    </div>  
  </main>
<script>
  d3.queue()
    .defer(d3.json, 'graph.json')
    .await((error, data) => {
      //
      // draw correlation graph
      //
      if (error) throw error;
      const correlationGraphProps = {
        selector: '.graph-container',
        data,
        options: { 
          fixedNodeSize: undefined
        }
      }
      window.correlationGraph(correlationGraphProps);
      //
      // draw pictogram table
      //
      const pictogramTableProps = {
        selector: '.table-container',
        data,
        options: {
          topN: 48,
          linksVariable: 'edges',
          valueVariable: 'weight',
          sourceVariable: 'source',
          targetVariable: 'target',
          valueVariableHeader: 'correlation',
          sourceVariableLabel: 'sourceName',
          targetVariableLabel: 'targetName'
        }
      }
      drawPictogramTable(pictogramTableProps);
    });
    //
    // draw stats table on node mouseover
    //
</script>
</body>
</html>

correlation-graph.js

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
	typeof define === 'function' && define.amd ? define(factory) :
	(global.correlationGraph = factory());
}(this, (function () { 'use strict';

function ticked(link, soloNodesIds, textMainGray, color, communities, nodeG, backgroundNode, node) {
  link.attr('x1', function (d) {
    return d.source.x;
  }).attr('y1', function (d) {
    return d.source.y;
  }).attr('x2', function (d) {
    return d.target.x;
  }).attr('y2', function (d) {
    return d.target.y;
  }).style('stroke', function (d, i) {
    if (soloNodesIds.indexOf(d.source.id) === -1) {
      return textMainGray;
    }
    return color(communities[d.source.id]);
  });
  // .style('stroke-opacity', 0.4);

  nodeG.attr('transform', function (d) {
    return 'translate(' + d.x + ',' + d.y + ')';
  });

  backgroundNode.style('fill', 'white').style('fill-opacity', 1);

  node.style('fill', function (d, i) {
    if (soloNodesIds.indexOf(d.id) === -1) {
      return textMainGray;
    }
    return color(communities[d.id]);
  }).style('fill-opacity', 0.4).style('stroke', 'white').style('stroke-width', '2px');
}

/* global d3 */

function dragstarted(simulation) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d3.event.subject.fx = d3.event.subject.x;
  d3.event.subject.fy = d3.event.subject.y;
}

/* global d3 */

function dragged() {
  d3.event.subject.fx = d3.event.x;
  d3.event.subject.fy = d3.event.y;
}

/* global d3 */

function dragended(simulation) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d3.event.subject.fx = null;
  d3.event.subject.fy = null;
}

function drawText(props) {
  var selector = props.selector;
  var height = props.height;
  var xOffset = props.xOffset;
  var yOffset = props.yOffset;
  var text = props.text;
  d3.select(selector).append('g').attr('transform', 'translate(' + xOffset + ',' + yOffset + ')').append('text').style('fill', '#666').style('fill-opacity', 1).style('pointer-events', 'none').style('stroke', 'none').style('font-size', 10).text(text);
}

/* global d3 _ jLouvain window document */
/* eslint-disable newline-per-chained-call */

function render(props) {
  //
  // configuration
  //

  var selector = props.selector;
  var inputData = props.data;
  var options = props.options;

  // const parent = d3.select(selector).nodes()[0];
  var parent = document.getElementById('graph');
  var parentWidth = parent.innerWidth || parent.clientWidth || 600;
  var parentHeight = parent.innerHeight || parent.clientHeight || 600;
  console.log('parent', parent);
  console.log('parent.scrollWidth', parent.scrollWidth);
  console.log('parentWidth', parentWidth);
  console.log('parentHeight', parentHeight);

  var width = parentWidth;
  var height = parentHeight;
  console.log('width', width);
  console.log('height', height);

  var linkWeightThreshold = 0.79;
  var soloNodeLinkWeightThreshold = 0.1;
  var labelTextScalingFactor = 28;

  // separation between same-color circles
  var padding = 9; // 1.5

  // separation between different-color circles
  var clusterPadding = 48; // 6

  var maxRadius = 12;

  var z = d3.scaleOrdinal(d3.schemeCategory20);

  // determines if nodes and node labels size is fixed
  // defaults to `undefined`
  var fixedNodeSize = options.fixedNodeSize;
  var defaultNodeRadius = '9px';

  //
  //
  //

  var svg = d3.select(selector).append('svg').attr('width', width).attr('height', height);

  var backgroundRect = svg.append('rect').attr('width', width).attr('height', height).classed('background', true).style('fill', 'white');

  var linkWidthScale = d3.scalePow().exponent(2).domain([0, 1]).range([0, 5]);

  // http://colorbrewer2.org/?type=qualitative&scheme=Paired&n=12
  var boldAlternating12 = ['#1f78b4', '#33a02c', '#e31a1c', '#ff7f00', '#6a3d9a', '#b15928', '#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f', '#cab2d6', '#ffff99'];

  var gephiSoftColors = ['#81e2ff', // light blue
  '#b9e080', // light green
  '#ffaac2', // pink
  '#ffc482', // soft orange
  '#efc4ff', // soft violet
  '#a6a39f', // smoke gray
  '#80deca', // teal
  '#e9d9d8' // pink gray
  ];

  var textMainGray = '#635F5D';

  var color = d3.scaleOrdinal().range(boldAlternating12);

  //
  // data-driven code starts here
  //

  var graph = inputData;
  var nodes = _.cloneDeep(graph.nodes);
  var links = _.cloneDeep(graph.edges);

  // total number of nodes
  var n = nodes.length;

  var staticLinks = graph.edges;
  var linksAboveThreshold = [];
  staticLinks.forEach(function (d) {
    if (d.weight > linkWeightThreshold) {
      linksAboveThreshold.push(d);
    }
  });
  var linksForCommunityDetection = linksAboveThreshold;

  var nodesAboveThresholdSet = d3.set();
  linksAboveThreshold.forEach(function (d) {
    nodesAboveThresholdSet.add(d.source);
    nodesAboveThresholdSet.add(d.target);
  });
  var nodesAboveThresholdIds = nodesAboveThresholdSet.values().map(function (d) {
    return Number(d);
  });
  var nodesForCommunityDetection = nodesAboveThresholdIds;

  //
  // manage threshold for solo nodes
  //

  var linksAboveSoloNodeThreshold = [];
  staticLinks.forEach(function (d) {
    if (d.weight > soloNodeLinkWeightThreshold) {
      linksAboveSoloNodeThreshold.push(d);
    }
  });
  var nodesAboveSoloNodeThresholdSet = d3.set();
  linksAboveSoloNodeThreshold.forEach(function (d) {
    nodesAboveSoloNodeThresholdSet.add(d.source);
    nodesAboveSoloNodeThresholdSet.add(d.target);
  });
  var soloNodesIds = nodesAboveSoloNodeThresholdSet.values().map(function (d) {
    return Number(d);
  });

  //
  //
  //

  console.log('nodes', nodes);
  console.log('nodesAboveThresholdIds', nodesAboveThresholdIds);
  console.log('nodesForCommunityDetection', nodesForCommunityDetection);
  console.log('staticLinks', staticLinks);
  console.log('linksAboveThreshold', linksAboveThreshold);
  console.log('linksForCommunityDetection', linksForCommunityDetection);

  //
  // calculate degree for each node
  // where `degree` is the number of links
  // that a node has
  //

  nodes.forEach(function (d) {
    d.inDegree = 0;
    d.outDegree = 0;
  });
  links.forEach(function (d) {
    nodes[d.source].outDegree += 1;
    nodes[d.target].inDegree += 1;
  });

  //
  // calculate the linkWeightSums for each node
  //
  nodes.forEach(function (d) {
    d.linkWeightSum = 0;
  });
  links.forEach(function (d) {
    nodes[d.source].linkWeightSum += d.weight;
    nodes[d.target].linkWeightSum += d.weight;
  });

  //
  // detect commnunities
  //

  var communityFunction = jLouvain().nodes(nodesForCommunityDetection).edges(linksForCommunityDetection);

  var communities = communityFunction();
  console.log('clusters (communities) detected by jLouvain', communities);

  //
  // add community and radius properties to each node
  //

  var defaultRadius = 10;
  nodes.forEach(function (node) {
    node.r = defaultRadius;
    node.cluster = communities[node.id];
  });

  //
  // collect clusters from nodes
  //

  var clusters = {};
  nodes.forEach(function (node) {
    var radius = node.r;
    var clusterID = node.cluster;
    if (!clusters[clusterID] || radius > clusters[clusterID].r) {
      clusters[clusterID] = node;
    }
  });
  console.log('clusters', clusters);

  //
  // now we draw elements on the page
  //

  var link = svg.append('g').style('stroke', '#aaa').selectAll('line').data(links).enter().append('line').style('stroke-width', function (d) {
    return linkWidthScale(d.weight);
  }).style('stroke-opacity', 0.4);

  link.attr('class', 'link').attr('marker-end', 'url(#end-arrow)');

  var nodesParentG = svg.append('g').attr('class', 'nodes');

  var node = nodesParentG.selectAll('.node').data(nodes).enter().append('g').classed('node', true).attr('id', function (d) {
    return 'node' + d.id;
  });

  var nodeRadiusScale = d3.scaleLinear().domain([0, nodes.length]).range([5, 30]);

  var backgroundNode = node.append('circle').attr('r', function (d) {
    if (typeof fixedNodeSize !== 'undefined') {
      return defaultRadius + 'px';
    }
    // return `${nodeRadiusScale(d.inDegree)}px`
    return nodeRadiusScale(d.linkWeightSum) + 'px';
  }).classed('background', true);

  var nodeCircle = node.append('circle').attr('r', function (d) {
    if (typeof fixedNodeSize !== 'undefined') {
      return defaultRadius + 'px';
    }
    // return `${nodeRadiusScale(d.inDegree)}px`
    return nodeRadiusScale(d.linkWeightSum) + 'px';
  }).on('mouseover', fade(0.1))
  // .on('mouseout', fade(0.4))
  .classed('mark', true);

  // draw labels
  var label = node.append('text').text(function (d) {
    return d.name;
  }).style('font-size', function (d) {
    if (typeof fixedNodeSize !== 'undefined') {
      return defaultRadius * 1 + 'px';
    }
    return Math.max(Math.min(2 * nodeRadiusScale(d.linkWeightSum), (2 * nodeRadiusScale(d.linkWeightSum) - 8) / this.getComputedTextLength() * labelTextScalingFactor),
    // Math.min(
    //   2 * nodeRadiusScale(d.inDegree),
    //   (2 * nodeRadiusScale(d.inDegree) - 8) / this.getComputedTextLength() * labelTextScalingFactor
    // ),
    8) + 'px';
  }).style('fill', '#666').style('fill-opacity', 1).style('pointer-events', 'none').style('stroke', 'none').attr('class', 'label').attr('dx', function (d) {
    var dxValue = -1 * (this.getComputedTextLength() / 2) + 'px';
    return dxValue;
  }).attr('dy', '.35em');

  var linkedByIndex = {};
  linksAboveSoloNodeThreshold.forEach(function (d) {
    // console.log('d from linkedByIndex creation', d);
    linkedByIndex[d.source + ',' + d.target] = true;
  });
  console.log('linkedByIndex', linkedByIndex);

  // click on the background to reset the fade
  // to show all nodes
  backgroundRect.on('click', resetFade());

  var boundTicked = ticked.bind(this, link, soloNodesIds, textMainGray, color, communities, node, backgroundNode, node);

  var simulation = d3.forceSimulation().nodes(nodes).force('link', d3.forceLink().id(function (d) {
    return d.id;
  })).velocityDecay(0.2).force('x', d3.forceX().strength(0.0005)).force('y', d3.forceY().strength(0.0005)).force('collide', collide).force('cluster', clustering).force('charge', d3.forceManyBody().strength(-1200)).force('center', d3.forceCenter(width / 2, height / 2)).on('tick', boundTicked);

  simulation.force('link').links(links);

  var boundDragstarted = dragstarted.bind(this, simulation);
  var boundDragended = dragended.bind(this, simulation);

  node.call(d3.drag().on('start', boundDragstarted).on('drag', dragged).on('end', boundDragended));

  // draw the help text for the main network plot
  drawText({
    selector: 'svg',
    text: 'mouse over a node to see it\'s relationships. click the background to reset.',
    xOffset: 75,
    yOffset: 10
  });

  d3.select('body').append('svg').attr('height', 100).attr('width', 960).attr('class', 'sliderTextSVG');

  // draw the help text for the slider
  drawText({
    selector: '.sliderTextSVG',
    text: 'slide to increase the correlation threshold -->',
    xOffset: 115,
    yOffset: 40
  });

  d3.select('div#graph').append('div').attr('id', 'slider-container');

  // draw the slider control
  drawSliderControl({
    selector: 'div#slider-container',
    padding: '10px',
    defaultLinkOpacity: 0.4,
    defaultMarkOpacity: 0.4,
    defaultLabelOpacity: 1
  });

  //
  // implement custom forces for clustering communities
  //

  function clustering(alpha) {
    nodes.forEach(function (d) {
      var cluster = clusters[d.cluster];
      if (cluster === d) return;
      var x = d.x - cluster.x;
      var y = d.y - cluster.y;
      var l = Math.sqrt(x * x + y * y);
      var r = d.r + cluster.r;
      if (l !== r) {
        l = (l - r) / l * alpha;
        d.x -= x *= l;
        d.y -= y *= l;
        cluster.x += x;
        cluster.y += y;
      }
    });
  }

  function collide(alpha) {
    var quadtree = d3.quadtree().x(function (d) {
      return d.x;
    }).y(function (d) {
      return d.y;
    }).addAll(nodes);

    nodes.forEach(function (d) {
      var r = d.r + maxRadius + Math.max(padding, clusterPadding);
      var nx1 = d.x - r;
      var nx2 = d.x + r;
      var ny1 = d.y - r;
      var ny2 = d.y + r;
      quadtree.visit(function (quad, x1, y1, x2, y2) {
        if (quad.data && quad.data !== d) {
          var x = d.x - quad.data.x;
          var y = d.y - quad.data.y;
          var l = Math.sqrt(x * x + y * y);
          var _r = d.r + quad.data.r + (d.cluster === quad.data.cluster ? padding : clusterPadding);
          if (l < _r) {
            l = (l - _r) / l * alpha;
            d.x -= x *= l;
            d.y -= y *= l;
            quad.data.x += x;
            quad.data.y += y;
          }
        }
        return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
      });
    });
  }

  //
  //
  //

  function isConnected(a, b) {
    return isConnectedAsTarget(a, b) || isConnectedAsSource(a, b) || a.index === b.index;
  }

  function isConnectedAsSource(a, b) {
    return linkedByIndex[a.index + ',' + b.index];
  }

  function isConnectedAsTarget(a, b) {
    return linkedByIndex[b.index + ',' + a.index];
  }

  function fade(opacity) {
    return function (d) {
      node.style('stroke-opacity', function (o) {
        // console.log('o from fade node.style', o);
        // console.log('isConnected(d, o)', isConnected(d, o));
        // const thisOpacity = isConnected(d, o) ? defaultOpacity : opacity;
        // console.log('thisOpacity from fade node.style', thisOpacity);
        // console.log('this from fade node.style', this);

        // style the mark circle
        // console.log('this.id', this.id);
        // this.setAttribute('fill-opacity', thisOpacity);
        var defaultMarkOpacity = 0.4;
        d3.select('#' + this.id).selectAll('.mark').style('fill-opacity', function (p) {
          // console.log('p from fade mark', p);
          // console.log('isConnected(d, p) mark', isConnected(d, p));
          var markOpacity = isConnected(d, p) ? defaultMarkOpacity : opacity;
          // console.log('markOpacity', markOpacity);
          return markOpacity;
        });

        // style the label text
        var defaultLabelOpacity = 1;
        d3.select('#' + this.id).selectAll('.label').style('fill-opacity', function (p) {
          // console.log('p from fade label', p);
          // console.log('isConnected(d, p) label', isConnected(d, p));
          var labelOpacity = 1;
          if (!isConnected(d, p) && opacity !== defaultMarkOpacity) {
            labelOpacity = opacity;
          }
          // console.log('labelOpacity', labelOpacity);
          return labelOpacity;
        });

        return 1;
      });

      // style the link lines
      var defaultLinkOpacity = 0.4;
      link.style('stroke-opacity', function (o) {
        // console.log('o from fade link style', o);
        // console.log('d from fade link style', d);
        if (o.source.id === d.id || o.target.id === d.id) {
          return defaultLinkOpacity;
        }
        return opacity;
      });
      link.attr('marker-end', function (o) {
        if (opacity === defaultLinkOpacity || o.source.id === d.id || o.target.id === d.id) {
          return 'url(#end-arrow)';
        }
        return 'url(#end-arrow-fade)';
      });
    };
  }

  function resetFade() {
    return function () {
      console.log('resetFade function was called');
      // reset marks
      var defaultMarkOpacity = 0.4;
      d3.select(selector).selectAll('.mark').style('fill-opacity', defaultMarkOpacity);

      // reset labels
      var defaultLabelOpacity = 1;
      d3.select(selector).selectAll('.label').style('fill-opacity', defaultLabelOpacity);

      // reset links
      var defaultLinkOpacity = 0.4;
      d3.select(selector).selectAll('.link').style('stroke-opacity', defaultLinkOpacity);
    };
  }

  /* global d3 */
  function drawSliderControl(props) {
    var selector = props.selector;
    var padding = props.padding;
    var defaultMarkOpacity = props.defaultMarkOpacity;
    var defaultLinkOpacity = props.defaultLinkOpacity;
    var defaultLabelOpacity = props.defaultLabelOpacity;

    d3.select(selector).append('input').attr('type', 'range').attr('min', 0).attr('max', 1).attr('value', 0.356).attr('step', 0.001).style('top', '604px').style('left', '90px').style('height', '36px').style('width', '450px').style('position', 'fixed').attr('id', 'slider');

    d3.select('#slider').on('input', function () {
      update(+this.value);
    });

    function update(sliderValue) {
      console.log('sliderValue', sliderValue);
      // adjust the text on the range slider
      d3.select('#nRadius-value').text(sliderValue);
      d3.select('#nRadius').property('value', sliderValue);

      d3.selectAll('.link').style('stroke-opacity', function (d) {
        // console.log('d from slider update', d);
        if (d.weight < sliderValue) {
          return 0;
        }
        return defaultLinkOpacity;
      });

      // fade marks below the threshold
      d3.selectAll('.mark').style('fill-opacity', function (d) {
        // first style the label associated with the mark
        // console.log('d from mark selection', d);
        d3.select('#node' + d.id).selectAll('.label').style('fill-opacity', function () {
          if (d.maxLinkWeight < sliderValue) {
            return 0.1;
          }
          return defaultLabelOpacity;
        });

        // then style the mark itself
        if (d.maxLinkWeight < sliderValue) {
          return 0.1;
        }
        return defaultMarkOpacity;
      });

      // if there is a pictogram table on the page
      if (d3.select('.pictogramTable').nodes().length > 0) {
        // fade table text for rows below the threshold
        d3.select('.pictogramTable').selectAll('tr').style('color', function (d) {
          // first style the label associated with the mark
          // console.log('d from span selection', d);
          if (d.weight < sliderValue) {
            return '#CCC';
          }
          return 'black';
        });
      }
    }
  }
}

/* global d3 _ jLouvain window document */
/* eslint-disable newline-per-chained-call */
var index = function (selector, inputData, options) {
  render(selector, inputData, options);
};

return index;

})));

draw-pictogram-table.js

/* global d3  queue */

function drawPictogramTable(props) {
  const selector = props.selector;
  const inputData = props.data;
  const options = props.options;

  let linksVariable = 'links';
  if (typeof options.linksVariable !== 'undefined') {
    linksVariable = options.linksVariable;
  }
  let nodesVariable = 'nodes';
  if (typeof options.nodesVariable !== 'undefined') {
    nodesVariable = options.nodesVariable;
  }
  let nameVariable = 'name';
  if (typeof options.nameVariable !== 'undefined') {
    nameVariable = options.nameVariable;
  }
  let sourceVariableLabel = 'name';
  if (typeof options.sourceVariableLabel !== 'undefined') {
    sourceVariableLabel = options.sourceVariableLabel;
  }
  let targetVariableLabel = 'name';
  if (typeof options.targetVariableLabel !== 'undefined') {
    targetVariableLabel = options.targetVariableLabel;
  }
  const valueVariable = options.valueVariable;
  let valueVariableHeader = valueVariable;
  if (typeof options.valueVariableHeader !== 'undefined') {
    valueVariableHeader = options.valueVariableHeader;
  }
  const sourceVariable = options.sourceVariable;
  const targetVariable = options.targetVariable;
  let topN = 32;
  if (typeof options.topN !== 'undefined') {
    topN = options.topN;
  }

  const table = d3.select(selector).append('table');
  table.attr('class', 'pictogramTable');
  table.append('thead');
  table.append('tbody');

  // call setupTable function once to initialize the table
  setupTable(inputData);

  function setupTable(inputData) {
    const nodes = inputData[nodesVariable];
    console.log('nodes from drawPictogramTable', nodes);
    let tableData = inputData[linksVariable];
    tableData.forEach(d => {
      d[valueVariable] = Number(d[valueVariable]);
      d[`${sourceVariable}Name`] = nodes[d[sourceVariable]][nameVariable];
      d[`${targetVariable}Name`] = nodes[d[targetVariable]][nameVariable];
    });

    // sort descending by the valueVariable value
    tableData.sort((a, b) => b[valueVariable] - a[valueVariable]);

    // subset and only show the top 32 values
    tableData = tableData.slice(0, topN);

    const columns = [
      {
        head: valueVariableHeader,
        cl: valueVariable,
        align: 'center',
        html(row) {
          const scale = d3
            .scaleThreshold()
            .domain([1, 2, 4, 6])
            .range([1, 2, 3, 4, 5]);

          const icon = '<span class="fa fa-male"></span>';
          const value = row[valueVariable];
          const text = `<span class='value'>${value}</span>`;
          return text;
        }
      },
      {
        head: sourceVariable,
        cl: sourceVariable,
        align: 'left',
        html(row) {
          const source = row[sourceVariableLabel];
          const text = `<span class='title left'>${source}</span>`;
          return text;
        }
      },
      {
        head: '',
        cl: 'arrow',
        align: 'right',
        html(row) {
          const arrowLeft = `<span class='fa fa-arrow-left'></span>`;
          const arrowRight = `<span class='fa fa-arrow-right'></span>`;
          return arrowLeft + arrowRight;
        }
      },
      {
        head: targetVariable,
        cl: targetVariable,
        align: 'right',
        html(row) {
          const target = row[targetVariableLabel];
          const text = `<span class='title'>${target}</span>`;
          return text;
        }
      }
    ];

    // global variables to hold selection state
    // out side of renderTable 'update' function
    let tableUpdate;
    let tableEnter;
    let tableMerge;

    table.call(renderTable);

    function renderTable(table) {
      // console.log('arguments from renderTable', arguments);

      tableUpdate = table
        .select('thead')
        .selectAll('th')
        .data(columns);

      if (typeof tableUpdate !== 'undefined') {
        const tableExit = tableUpdate.exit();
        tableExit.remove();
      }

      tableEnter = tableUpdate.enter().append('th');

      tableEnter
        .attr('class', d => `${d.cl} ${d.align}`)
        .text(d => d.head)
        .on('click', d => {
          console.log('d from click', d);
          let ascending;
          if (d.ascending) {
            ascending = false;
          } else {
            ascending = true;
          }
          d.ascending = ascending;
          // console.log('ascending', ascending);
          // console.log('d after setting d.ascending property', d);
          // console.log('tableData before sorting', tableData);
          tableData.sort((a, b) => {
            if (ascending) {
              return d3.ascending(a[d.cl], b[d.cl]);
            }
            return d3.descending(a[d.cl], b[d.cl]);
          });
          // console.log('tableData after sorting', tableData);
          table.call(renderTable);
        });

      if (typeof trUpdate !== 'undefined') {
        const trExit = trUpdate.exit();
        trExit.remove();
      }
      trUpdate = table
        .select('tbody')
        .selectAll('tr')
        .data(tableData);

      tableMerge = tableUpdate.merge(tableEnter);

      trEnter = trUpdate.enter().append('tr');

      trMerge = trUpdate
        .merge(trEnter)
        .on('mouseenter', mouseenter)
        .on('mouseleave', mouseleave);

      const tdUpdate = trMerge.selectAll('td').data((row, i) =>
        columns.map(c => {
          const cell = {};
          d3.keys(c).forEach(k => {
            cell[k] = typeof c[k] === 'function' ? c[k](row, i) : c[k];
          });
          return cell;
        })
      );

      const tdEnter = tdUpdate.enter().append('td');

      tdEnter
        .attr('class', d => d.cl)
        .style('background-color', 'rgba(255,255,255,0.9)')
        .style('border-bottom', '.5px solid white');

      tdEnter.html(d => d.html);
    }
  }

  function mouseenter() {
    d3
      .select(this)
      .selectAll('td')
      .style('background-color', '#f0f0f0')
      .style('border-bottom', '.5px solid slategrey');
  }

  function mouseleave() {
    d3
      .select(this)
      .selectAll('td')
      .style('background-color', 'rgba(255,255,255,0.9)')
      .style('border-bottom', '.5px solid white');
  }
}

jLouvain.js

/* 
 Author: Corneliu S. (github.com/upphiminn)

 This is a javascript implementation of the Louvain
 community detection algorithm (http://arxiv.org/abs/0803.0476)
 Based on https://bitbucket.org/taynaud/python-louvain/overview

 */
(function () {
  jLouvain = function () {
    //Constants
    var __PASS_MAX = -1;
    var __MIN = 0.0000001;

    //Local vars
    var original_graph_nodes;
    var original_graph_edges;
    var original_graph = {};
    var partition_init;

    //Helpers
    function make_set(array) {
      var set = {};
      array.forEach(function (d, i) {
        set[d] = true;
      });

      return Object.keys(set);
    }

    function obj_values(obj) {
      var vals = [];
      for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
          vals.push(obj[key]);
        }
      }

      return vals;
    }

    function get_degree_for_node(graph, node) {
      var neighbours = graph._assoc_mat[node] ? Object.keys(graph._assoc_mat[node]) : [];
      var weight = 0;
      neighbours.forEach(function (neighbour, i) {
        var value = graph._assoc_mat[node][neighbour] || 1;
        if (node === neighbour) {
          value *= 2;
        }
        weight += value;
      });

      return weight;
    }

    function get_neighbours_of_node(graph, node) {
      if (typeof graph._assoc_mat[node] === 'undefined') {
        return [];
      }

      var neighbours = Object.keys(graph._assoc_mat[node]);

      return neighbours;
    }


    function get_edge_weight(graph, node1, node2) {
      return graph._assoc_mat[node1] ? graph._assoc_mat[node1][node2] : undefined;
    }

    function get_graph_size(graph) {
      var size = 0;
      graph.edges.forEach(function (edge) {
        size += edge.weight;
      });

      return size;
    }

    function add_edge_to_graph(graph, edge) {
      update_assoc_mat(graph, edge);

      var edge_index = graph.edges.map(function (d) {
        return d.source + '_' + d.target;
      }).indexOf(edge.source + '_' + edge.target);

      if (edge_index !== -1) {
        graph.edges[edge_index].weight = edge.weight;
      } else {
        graph.edges.push(edge);
      }
    }

    function make_assoc_mat(edge_list) {
      var mat = {};
      edge_list.forEach(function (edge, i) {
        mat[edge.source] = mat[edge.source] || {};
        mat[edge.source][edge.target] = edge.weight;
        mat[edge.target] = mat[edge.target] || {};
        mat[edge.target][edge.source] = edge.weight;
      });

      return mat;
    }

    function update_assoc_mat(graph, edge) {
      graph._assoc_mat[edge.source] = graph._assoc_mat[edge.source] || {};
      graph._assoc_mat[edge.source][edge.target] = edge.weight;
      graph._assoc_mat[edge.target] = graph._assoc_mat[edge.target] || {};
      graph._assoc_mat[edge.target][edge.source] = edge.weight;
    }

    function clone(obj) {
      if (obj === null || typeof(obj) !== 'object')
        return obj;

      var temp = obj.constructor();

      for (var key in obj) {
        temp[key] = clone(obj[key]);
      }

      return temp;
    }

    //Core-Algorithm Related 
    function init_status(graph, status, part) {
      status['nodes_to_com'] = {};
      status['total_weight'] = 0;
      status['internals'] = {};
      status['degrees'] = {};
      status['gdegrees'] = {};
      status['loops'] = {};
      status['total_weight'] = get_graph_size(graph);

      if (typeof part === 'undefined') {
        graph.nodes.forEach(function (node, i) {
          status.nodes_to_com[node] = i;
          var deg = get_degree_for_node(graph, node);

          if (deg < 0)
            throw 'Bad graph type, use positive weights!';

          status.degrees[i] = deg;
          status.gdegrees[node] = deg;
          status.loops[node] = get_edge_weight(graph, node, node) || 0;
          status.internals[i] = status.loops[node];
        });
      } else {
        graph.nodes.forEach(function (node, i) {
          var com = part[node];
          status.nodes_to_com[node] = com;
          var deg = get_degree_for_node(graph, node);
          status.degrees[com] = (status.degrees[com] || 0) + deg;
          status.gdegrees[node] = deg;
          var inc = 0.0;

          var neighbours = get_neighbours_of_node(graph, node);
          neighbours.forEach(function (neighbour, i) {
            var weight = graph._assoc_mat[node][neighbour];

            if (weight <= 0) {
              throw "Bad graph type, use positive weights";
            }

            if (part[neighbour] === com) {
              if (neighbour === node) {
                inc += weight;
              } else {
                inc += weight / 2.0;
              }
            }
          });
          status.internals[com] = (status.internals[com] || 0) + inc;
        });
      }
    }

    function __modularity(status) {
      var links = status.total_weight;
      var result = 0.0;
      var communities = make_set(obj_values(status.nodes_to_com));

      communities.forEach(function (com, i) {
        var in_degree = status.internals[com] || 0;
        var degree = status.degrees[com] || 0;
        if (links > 0) {
          result = result + in_degree / links - Math.pow((degree / (2.0 * links)), 2);
        }
      });

      return result;
    }

    function __neighcom(node, graph, status) {
      // compute the communities in the neighb. of the node, with the graph given by
      // node_to_com
      var weights = {};
      var neighboorhood = get_neighbours_of_node(graph, node);//make iterable;

      neighboorhood.forEach(function (neighbour, i) {
        if (neighbour !== node) {
          var weight = graph._assoc_mat[node][neighbour] || 1;
          var neighbourcom = status.nodes_to_com[neighbour];
          weights[neighbourcom] = (weights[neighbourcom] || 0) + weight;
        }
      });

      return weights;
    }

    function __insert(node, com, weight, status) {
      //insert node into com and modify status
      status.nodes_to_com[node] = +com;
      status.degrees[com] = (status.degrees[com] || 0) + (status.gdegrees[node] || 0);
      status.internals[com] = (status.internals[com] || 0) + weight + (status.loops[node] || 0);
    }

    function __remove(node, com, weight, status) {
      //remove node from com and modify status
      status.degrees[com] = ((status.degrees[com] || 0) - (status.gdegrees[node] || 0));
      status.internals[com] = ((status.internals[com] || 0) - weight - (status.loops[node] || 0));
      status.nodes_to_com[node] = -1;
    }

    function __renumber(dict) {
      var count = 0;
      var ret = clone(dict); //deep copy :) 
      var new_values = {};
      var dict_keys = Object.keys(dict);
      dict_keys.forEach(function (key) {
        var value = dict[key];
        var new_value = typeof new_values[value] === 'undefined' ? -1 : new_values[value];
        if (new_value === -1) {
          new_values[value] = count;
          new_value = count;
          count = count + 1;
        }
        ret[key] = new_value;
      });

      return ret;
    }

    function __one_level(graph, status) {
      //Compute one level of the Communities Dendogram.
      var modif = true;
      var nb_pass_done = 0;
      var cur_mod = __modularity(status);
      var new_mod = cur_mod;

      while (modif && nb_pass_done !== __PASS_MAX) {
        cur_mod = new_mod;
        modif = false;
        nb_pass_done += 1

        graph.nodes.forEach(function (node, i) {
          var com_node = status.nodes_to_com[node];
          var degc_totw = (status.gdegrees[node] || 0) / (status.total_weight * 2.0);
          var neigh_communities = __neighcom(node, graph, status);
          __remove(node, com_node, (neigh_communities[com_node] || 0.0), status);
          var best_com = com_node;
          var best_increase = 0;
          var neigh_communities_entries = Object.keys(neigh_communities);//make iterable;

          neigh_communities_entries.forEach(function (com, i) {
            var incr = neigh_communities[com] - (status.degrees[com] || 0.0) * degc_totw;
            if (incr > best_increase) {
              best_increase = incr;
              best_com = com;
            }
          });

          __insert(node, best_com, neigh_communities[best_com] || 0, status);

          if (best_com !== com_node) {
            modif = true;
          }
        });
        new_mod = __modularity(status);
        if (new_mod - cur_mod < __MIN) {
          break;
        }
      }
    }

    function induced_graph(partition, graph) {
      var ret = {nodes: [], edges: [], _assoc_mat: {}};
      var w_prec, weight;
      //add nodes from partition values
      var partition_values = obj_values(partition);
      ret.nodes = ret.nodes.concat(make_set(partition_values)); //make set
      graph.edges.forEach(function (edge, i) {
        weight = edge.weight || 1;
        var com1 = partition[edge.source];
        var com2 = partition[edge.target];
        w_prec = (get_edge_weight(ret, com1, com2) || 0);
        var new_weight = (w_prec + weight);
        add_edge_to_graph(ret, {'source': com1, 'target': com2, 'weight': new_weight});
      });

      return ret;
    }

    function partition_at_level(dendogram, level) {
      var partition = clone(dendogram[0]);
      for (var i = 1; i < level + 1; i++) {
        Object.keys(partition).forEach(function (key, j) {
          var node = key;
          var com = partition[key];
          partition[node] = dendogram[i][com];
        });
      }

      return partition;
    }


    function generate_dendogram(graph, part_init) {
      if (graph.edges.length === 0) {
        var part = {};
        graph.nodes.forEach(function (node, i) {
          part[node] = node;
        });
        return part;
      }
      var status = {};

      init_status(original_graph, status, part_init);
      var mod = __modularity(status);
      var status_list = [];
      __one_level(original_graph, status);
      var new_mod = __modularity(status);
      var partition = __renumber(status.nodes_to_com);
      status_list.push(partition);
      mod = new_mod;
      var current_graph = induced_graph(partition, original_graph);
      init_status(current_graph, status);

      while (true) {
        __one_level(current_graph, status);
        new_mod = __modularity(status);
        if (new_mod - mod < __MIN) {
          break;
        }

        partition = __renumber(status.nodes_to_com);
        status_list.push(partition);

        mod = new_mod;
        current_graph = induced_graph(partition, current_graph);
        init_status(current_graph, status);
      }

      return status_list;
    }

    var core = function () {
      var status = {};
      var dendogram = generate_dendogram(original_graph, partition_init);

      return partition_at_level(dendogram, dendogram.length - 1);
    };

    core.nodes = function (nds) {
      if (arguments.length > 0) {
        original_graph_nodes = nds;
      }

      return core;
    };

    core.edges = function (edgs) {
      if (typeof original_graph_nodes === 'undefined')
        throw 'Please provide the graph nodes first!';

      if (arguments.length > 0) {
        original_graph_edges = edgs;
        var assoc_mat = make_assoc_mat(edgs);
        original_graph = {
          'nodes': original_graph_nodes,
          'edges': original_graph_edges,
          '_assoc_mat': assoc_mat
        };
      }

      return core;

    };

    core.partition_init = function (prttn) {
      if (arguments.length > 0) {
        partition_init = prttn;
      }
      return core;
    };

    return core;
  }
})();

style.css

@font-face {
   font-family: 'StateFaceRegular';
   src: url('stateface-regular-webfont.eot');
   src: url('stateface-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('stateface-regular-webfont.woff') format('woff'),
        url('stateface-regular-webfont.ttf') format('truetype'),
        url('stateface-regular-webfont.svg#StateFaceRegular') format('svg');
   font-weight: normal;
   font-style: normal;
}

.stateface {
  font-family: "StateFaceRegular";
}
/* tiny reset */
body {
  font: 12px monospace;
  margin: 0;
  padding: 0;
}

/* end tiny reset */
.main {
  display: flex;
  -webkit-flex-direction: row; /* Safari */
  flex-direction:         row;
  flex-wrap: wrap;
}

@media screen and (min-width: 480px) {
  .main-content {
    padding-right: 20px;
    padding-left: 20px;
    
  }
  .sidebar {
    flex-direction: column;
    background-color: rgba(255,255,255,0.0);
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1,startColorStr="#E6FFFFFF",endColorStr="#E6FFFFFF");
    -ms-filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1,startColorStr="#E6FFFFFF",endColorStr="#E6FFFFFF");
}
  }
}

.table-container {
  overflow: auto;
  background-color: rgba(255,255,255,0.0);
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1,startColorStr="#E6FFFFFF",endColorStr="#E6FFFFFF");
  -ms-filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1,startColorStr="#E6FFFFFF",endColorStr="#E6FFFFFF");
}

table {
  font: 8px monospace;
  border-collapse: collapse;
  position: relative;
  left: 0px;
}

th {
  border-bottom: 0px solid black;
  cursor: pointer;
}

td, th {
  padding-left: 3px;
  padding-right: 3px;
}

span.stateface,
span.fa {
  display: inline-block;
}

span.arrow {
  width: 35px;
  line-height: 14px;
  text-align: center;
}

td > span {
  float: left;
}

td > span.left {
  float: right;
}

th.left {
  text-align: right;
}

th.right {
  text-align: left;
}

span.text {
  width: 40px;
  text-align: right;
  padding-right: 10px;
}

th.emp, td.emp
th.wage, td.wage {
  width: 100px;
}

th.emp_pc, td.emp_pc
th.wage_pc, td.wage_pc {
  width: 90px;
}

.emp span.fa {
  width: 8px;
}

.fa-arrow-up {
  color: darkgreen;
}

.fa-arrow-left {
  color: slategrey;
}

.fa-arrow-right {
  color: slategrey;
}

.fa-arrow-down {
  color: red;
}