JSFiddle - React, Tailwind, and code Playground

by Aaron Bramson

JavaScript

var width = 960,
    height = 500;

var color = d3.scale.category20();
var gradientColor = d3.scale.linear().domain([0,15]).range(["#08519c","#bdd7e7"]);

var force = d3.layout.force()
    .linkDistance(10)
    .linkStrength(2)
    .size([width, height]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("http://bost.ocks.org/mike/miserables/miserables.json", function(error, graph) {
  if (error) throw error;

    
function marker (color) {
	var reference;
	svg.append("svg:defs").selectAll("marker")
    	.data([reference]) 
   	  .enter().append("svg:marker")    
    	.attr("id", String)
	    .attr("viewBox", "0 -5 10 10")
    	.attr("refX", 15)  // This sets how far back it sits, kinda
    	.attr("refY", 0)
    	.attr("markerWidth", 9)
    	.attr("markerHeight", 9)
    	.attr("orient", "auto")
    	.attr("markerUnits", "userSpaceOnUse")
  	  .append("svg:path")
    	.attr("d", "M0,-5L10,0L0,5")
    	.style("fill", color);
    return "url(#" + reference + ")";
};
    
  var nodes = graph.nodes.slice(),
      links = [],
      bilinks = [];

  graph.links.forEach(function(link) {
    var s = nodes[link.source],
        t = nodes[link.target],
        i = {},   // intermediate node
        linkValue = link.value    // for transfering value from the links to the bilinks
    ; 
    nodes.push(i);
    links.push({source: s, target: i}, {source: i, target: t});
    bilinks.push([s, i, t, linkValue]);
  });

  force
      .nodes(nodes)
      .links(links)
      .start();

  var link = svg.selectAll(".link")
      .data(bilinks)
    .enter().append("path")
      .attr("class", "link")
      .style("fill", "none")
      .style("opacity", "0.5")    
      .style("stroke-width", "2")  
      .style("stroke", function(d) { return gradientColor(d[3]); } )
    .attr("marker-end", marker( "#FFCC33" ) );

  var node = svg.selectAll(".node")
      .data(graph.nodes)
      .enter().append("g")
      .attr("class", "node")
  ...