https://jsfiddle.net/angjelinhila/g1ek0o6q/56/#run

Grand Unification of Physics

by angjelinhila

HTML

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.min.js"></script>

<!-- Load the sankey.js function -->
<script src="https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/sankey.js"></script>
<script src="//d3js.org/d3-scale-chromatic.v0.3.min.js"></script>

<!-- Create a div where the graph will take place -->
<div id="grandUnification"></div>

<!-- Add style to links or they won't appear properly-->
<style>
.link {
  fill: none;
  stroke: midnightBlue;
  stroke-opacity: .7;
}
.link:hover {
  stroke-opacity: .95;
}

.node {
 fill-opacity: 1;
 stroke: none;
}

.node:hover {
  fill-opacity: .8;
  stroke-opacity: .8;
}



</style>

<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 10, bottom: 10, left: 10},
    width = window.innerWidth - margin.left - margin.right,
    height = window.innerHeight - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#grandUnification").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// Color scale used
var t = [0, 1];
var color = d3.scaleOrdinal(d3.schemeCategory10);
var color2 = d3.scaleSequential(d3.interpolatePuBu).domain([0, 20]);

// Set the sankey diagram properties
var sankey = d3.sankey()
    .nodeWidth(5)
    .nodePadding(90)
    .size([width, height]);

// load the data
var graph = 
{
"nodes": [
{"node":0, "name": "Electricity"},
{"node":1, "name": "Magnetism"},
{"node":2, "name": "Optics"},
{"node":3, "name": "Electromagnetism"},
{"node":4, "name": "Radioactivity"},
{"node":5, "name": "Weak Nuclear Force"},
{"node":6, "name": "Strong Nuclear Force"},
{"node":7, "name": "Celestial Gravitation"},
{"node":8, "name": "Terrestrial Gravitation"},
{"node":9, "name": "Universal Gravitation"},
{"node":10, "name":...