JSFiddle - React, Tailwind, and code Playground

by davidmarx

HTML

<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.29.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script>

CSS

path.link {
    fill: #666;
    stroke: #666;
    stroke-width: 1.5px;
}
path.link.licensing {
    fill: green;
    stroke: green;
}
path.link.resolved {
    fill: lightskyblue;
    stroke: lightskyblue;
}
circle {
    fill: #ccc;
    stroke: #333;
    stroke-width: 1.5px;
}
text {
    font: 10px sans-serif;
    pointer-events: none;
}
text.shadow {
    stroke: #fff;
    stroke-width: 3px;
    stroke-opacity: .8;
}

JavaScript

// http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/
var links = [{
    source: "Microsoft",
    target: "Amazon",
    type: "licensing"
}, {
    source: "Microsoft",
    target: "HTC",
    type: "licensing"
}, {
    source: "Samsung",
    target: "Apple",
    type: "suit"
}, {
    source: "Motorola",
    target: "Apple",
    type: "suit"
}, {
    source: "Nokia",
    target: "Apple",
    type: "resolved"
}, {
    source: "HTC",
    target: "Apple",
    type: "suit"
}, {
    source: "Kodak",
    target: "Apple",
    type: "suit"
}, {
    source: "Microsoft",
    target: "Barnes & Noble",
    type: "suit"
}, {
    source: "Microsoft",
    target: "Foxconn",
    type: "suit"
}, {
    source: "Oracle",
    target: "Google",
    type: "suit"
}, {
    source: "Apple",
    target: "HTC",
    type: "suit"
}, {
    source: "Microsoft",
    target: "Inventec",
    type: "suit"
}, {
    source: "Samsung",
    target: "Kodak",
    type: "resolved"
}, {
    source: "LG",
    target: "Kodak",
    type: "resolved"
}, {
    source: "RIM",
    target: "Kodak",
    type: "suit"
}, {
    source: "Sony",
    target: "LG",
    type: "suit"
}, {
    source: "Kodak",
    target: "LG",
    type: "resolved"
}, {
    source: "Apple",
    target: "Nokia",
    type: "resolved"
}, {
    source: "Qualcomm",
    target: "Nokia",
    type: "resolved"
}, {
    source: "Apple",
    target: "Motorola",
    type: "suit"
}, {
    source: "Microsoft",
    target: "Motorola",
    type: "suit"
}, {
    source: "Motorola",
    target: "Microsoft",
    type: "suit"
}, {
    source: "Huawei",
    target: "ZTE",
    type: "suit"
}, {
    source: "Ericsson",
    target: "ZTE",
    type: "suit"
}, {
    source: "Kodak",
    target: "Samsung",
    type: "resolved"
}, {
    source: "Apple",
    target: "Samsung",
    type: "suit"
}, {
    source: "Kodak",
    target: "RIM",
    type: "suit"
}, {
    source: "Nokia",
    target: "Qualcomm",
    type: "suit"
}];

var nodes =...