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","#FFCC33"]);

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);

var defs = svg.append("svg:defs");

d3.json("http://bost.ocks.org/mike/miserables/miserables.json", function(error, graph) {
  if (error) throw error;
    
    function marker(color) {
        defs.append("svg:marker")
            .attr("id", color.replace("#", ""))
            .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(" + color + ")";
    };
    
  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")  
      .each(function(d) {
      	var color = gradientColor(d[3]);
        console.log(d[3]);
        d3.select(this).style("stroke", color).attr("marker-end", marker(color));
      });

...