Adrien Vetterli adriennn

This is a demonstration of a bi-directional hierarchical sankey diagram produced in javascript, html and css using d3. (Refresh page to generate new random data)

Sankey diagrams represent flows between nodes by varying the thickness of the connecting links.

This diagram was based off of Mike Bostock's sankey diagram, but additionally incorporates bi-directionality into the flow and caters for hierarchical relationships between nodes to allow drill down into the data.

All javascript code to generate the diagram markup is contained in the app.js file, but the underlying calculations are performed using a custom plugin: bihisankey.js.

This version addresses the issue with double clicking. Demo: http://bl.ocks.org/emoruzzi/6f8140c4d903e64ae35dce0c971e488f

	/*
	* Timer to measure timing of stuff in nodejs
	*/

	class Chrono {

	Start() {
	this.start = new Date().getTime()
	}

	# A CORS (Cross-Origin Resouce Sharing) config for nginx
	# see details at https://gist.github.com/himyouten/df57b21958fba9c75ea7

	if ($http_origin ~* (https?://.*\.garbagepla\.net(:[0-9]+)?)) {
	rewrite ^ /__cors__/$request_method$uri last;
	}

	location /__cors__/GET/ {
	add_header 'Access-Control-Allow-Origin' "$http_origin";
	add_header 'Access-Control-Allow-Credentials' 'true';

	// modified from http://codepen.io/gisminister/pen/Hdorv

	// Create a marker
	var myMarker = L.divIcon({
	className: 'map-marker marker-color-gray a-class',
	iconSize: [28,28],
	html:'<i class="fa fa-fw fa-2x fa-question"></i>' // FontAwesome.io
	});

	// Style with css