JSFiddle - React, Tailwind, and code Playground

by Maria Karanasou

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.js"></script>

JavaScript

var links = localStorage.getItem("links");

var nodes = localStorage.getItem("nodes");

// Compute the distinct nodes from the links.
links.forEach(function(link) {
  link.source = nodes[link.source] || (nodes[link.source] = {
    name: link.source
  });
  link.target = nodes[link.target] || (nodes[link.target] = {
    name: link.target
  });
});

console.log(nodes);

var width = 1000,
  height = 1000;

var force = d3.layout.force()
  .nodes(d3.values(nodes))
  .links(links)
  .size([width, height])
  .linkDistance(300)
  .charge(-120)
  .friction(0.9)
  .on("tick", tick)
  .start();

var svg = d3.select("#force-graph").append("svg")
  .attr("width", width)
  .attr("height", height);

// Per-type markers, as they don't inherit styles.
svg.append("defs").selectAll("marker")
  .data(["dominating"])
  .enter().append("marker")
  .attr("id", function(d) {
    return d;
  })
  .attr("viewBox", "0 -5 10 10")
  .attr("refX", 15)
  .attr("refY", -1.5)
  .attr("markerWidth", 12)
  .attr("markerHeight", 12)
  .attr("orient", "auto")
  .append("path")
  .attr("d", "M0,-5L10,0L0,5");

svg.append("defs").selectAll("marker")
  .data(["concomidant"])
  .enter().append("marker")
  .attr("id", function(d) {
    return d;
  })
  .attr("viewBox", "0 -5 10 10")
  .attr("refX", 15)
  .attr("refY", -1.5)
  .attr("markerWidth", 12)
  .attr("markerHeight", 12)
  .attr("orient", "auto-start-reverse")
  .append("path")
  .attr("d", "M0,-5L10,0L0,5");

var path = svg.append("g").selectAll("path")
  .data(force.links())
  .enter().append("path")
  .attr("class", function(d) {
    return "link " + d.type;
  })
  .attr("marker-end", function(d) {
    return "url(#" + d.type + ")";
  })
  .attr("marker-start", function(d) {
    if (d.type == "concomidant") {
      return "url(#" + d.type + ")";
    }
  });


var circle = svg.append("g").selectAll("circle")
  .data(force.nodes())
  .enter().append("circle")
  .attr("r", function(d) {
    return d.weight * 4;
  })
  .call(force.drag);

var text...