JSFiddle - React, Tailwind, and code Playground

by greggyNapalm

HTML

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

CSS

path.link {
  fill: none;
  stroke: #666;
  stroke-width: 2.0px;
}

marker#licensing {
  fill: green;
}

path.link.licensing {
  stroke: green;
}

marker#work-forward {
  fill: green;
}

path.link.work-forward {
  stroke: green;
}

marker#work-backward {
  fill: red;
}

path.link.work-backward {
  stroke: red;
}

path.link.resolved {
  stroke-dasharray: 0,2 1;
}

circle {
  fill: #ccc;
  stroke: #333;
  stroke-width: 1.5px;
}

text {
  font: 14px sans-serif;
  pointer-events: none;
}

text.shadow {
  stroke: #fff;
  stroke-width: 3px;
  stroke-opacity: .8;

JavaScript

var links = [
  {weight: 33, source: "Microsoft", target: "Amazon", type: "licensing"},
  {weight: 33, source: "Microsoft", target: "HTC", type: "suit"},
  {weight: 33, source: "Samsung", target: "Apple", type: "suit"},
  {weight: 33, source: "Motorola", target: "Apple", type: "suit"},
  {weight: 33, source: "Nokia", target: "Apple", type: "resolved"},
  {weight: 33, source: "HTC", target: "Apple", type: "suit"},
  {weight: 33, source: "Kodak", target: "Apple", type: "suit"},
  {weight: 33, source: "Microsoft", target: "Foxconn", type: "suit"},
  {weight: 33, source: "Apple", target: "HTC", type: "suit"},
  {weight: 33, source: "Microsoft", target: "Inventec", type: "suit"},
  {weight: 33, source: "Samsung", target: "Kodak", type: "resolved"},
  {weight: 33, source: "LG", target: "Kodak", type: "suit"},
  {weight: 33, source: "RIM", target: "Kodak", type: "suit"},
  {weight: 33, source: "Sony", target: "LG", type: "suit"},
  {weight: 33, source: "Kodak", target: "LG", type: "resolved"},
  {weight: 33, source: "Apple", target: "Nokia", type: "resolved"},
  {weight: 33, source: "Qualcomm", target: "Nokia", type: "resolved"},
  {weight: 33, source: "Apple", target: "Motorola", type: "suit"},
  {weight: 33, source: "Microsoft", target: "Motorola", type: "suit"},
  {weight: 33, source: "Motorola", target: "Microsoft", type: "work-backward"},
  {weight: 33, source: "Kodak", target: "Samsung", type: "resolved"},
  {weight: 33, source: "Apple", target: "Samsung", type: "suit"},
  {weight: 33, source: "Kodak", target: "RIM", type: "suit"},
  {weight: 33, source: "Nokia", target: "Qualcomm", type: "suit"}
];

var nodes = {};
var nodesSrc = {
    Nokia: {name: "Nokia", duration: 5},
    Kodak: {name: "Kodak", duration: 6},
    Apple: {name: "Apple", duration: 7},
    Amazon: {name: "Amazon", duration: 8},
    Motorola: {name: "Motorola", duration: 9},
    Mototola: {name: "Mototola", duration: 10},
    Microsoft: {name: "Microsoft", duration: 11},
    Inventec: {name:...