D3 Examples - highlight2

Live Demo

This diagram shows the survival statistics of the Titanic disaster. The thickness of ribbons (links) represents the number of people.

Move the mouse over nodes or links. The specific portion will be highlighted from end to end.

Double click on the diagram to turn off rich tooltips.

Drag the rectangles to move them.

Features of the Visualization

1. Flow-based API and End-to-end highlighting

The original plugin take nodes and links as input, while this one has a different API. Instead of links, the input data contain flows, which have a single weight but multiple nodes in a chain. Here's an example of input data

{ nodes: [ { "name": "node0", "disp": "A", }, { "name": "node1", "disp": "B", } // ...... ], flows: [ { value: 50, thru: [ "node0", "node1"] }, { value: 30, thru: [ 0, 1, 2 ] } // ...... ] }

Compared to the link API, the flows are easier to construct because our raw data are in a multi-attribute table, where each row corresponds to a flow. Moreover, flows retain more information than links. It knows where the flow is coming from at any given place. Thus the end-to-end highlighting is made possible. Whenever the mouse hover over an element, there is a certain subset of flows going through it. Then some new links (called dlinks) are dynamically computed from this flow subset, and rendered in highlight. The endpoints of dlinks are positioned so as to make the highlighted flows look visually consistent. Though the positioning algorithm is coarse and can be improved.

The plugin is also very suitable for visualizing parallel sets. The demo shows the same data as parallel set visualization, but notice that their highlighting is very different.

2. Rich tooltips

The rich tooltip shows the subset of flows under your mouse. Double click on the diagram to switch between the rich and the simple modes.

Licensed under the MIT License. See LICENSE in the project root for terms

xxxxxxxxxx
 
<!DOCTYPE html>
<!--
-->
<html>
<head>
<meta charset="utf-8">
<title>Process Flow Sankey Diagram</title>
 
<script src="https://d3js.org/d3.v3.min.js?2.9.1"></script>
    
​
<script src="showdown.min.js"></script>
  
  
  
<link rel="stylesheet" href="highlightjs.css">
<script src="highlight.pack.js"></script>
​
​
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>  
  
<script src="sankey.js"></script>
<script src="sankey-driver.js"></script>
<link rel="stylesheet" href="global.css">
  
  
</head>
​
​
  
  <style>
​
​
 
​
        </style>
​
<body oncontextmenu="return false">
​
<header>
​
</header>
​
<h1 id="title">Process Flow Sankey Diagram</h1>
  
 <!-- 
<div class="legend">
<div class="legend-item" style="width:8.7%; text-align:start;">Texturing</div>
<div class="legend-item" style="width:17.7%; text-align:center;">Diffusion</div>
<div class="legend-item" style="width:17.7%; text-align:center;">Etching</div>
<div class="legend-item" style="width:17.7%; text-align:center;">Annealing</div>
  <div class="legend-item" style="width:17.7%; text-align:center;">PECVD</div>
  <div class="legend-item" style="width:8.7%; text-align:end;">Printing</div>
</div>
​
-->
  
<div id='canvas'></div>
​
​
  
​
  
<script>
​
var driver = new SankeyDriver();
d3.json('titanic-data.json', function(titanicData){
  var margin = {
    top: 0, bottom: 10, left: 10, right: 10,
  };
  var size = {
    width:880, height: 420,
  }
  driver.prepare(d3.select("#canvas"), size, margin);
  driver.draw(titanicData);
});
​
</script>
​
 
 
    <body>
​
<div class="dviz" id="dviz-hbar"></div>
        
  </body>  
  
<footer>
​
</footer>
</body>
</html>
​
    