JSFiddle - React, Tailwind, and code Playground

by rolfsf

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="graph"></div>

CSS

rect {
    fill: #CCC;
    cursor: pointer;
}
.active {
    fill: orange;
}
.label {
    fill: white;
    font-family: sans-serif;
    pointer-events: none;
}

JavaScript

var data = {
    "Product": [
        {
            "type": "product",
            "name": "Product 1"
        },
        {
            "type": "product",
            "name": "Product 2"
        },
        {
            "type": "product",
            "name": "Product 3"
        },
        {
            "type": "product",
            "name": "Product 4"
        },
        {
            "type": "product",
            "name": "Product 5"
        }
    ],
    "Industry": [

        {
            "type": "industry",
            "name": "Industry 1"
        },
        {
            "type": "industry",
            "name": "Industry 2"
        },
        {
            "type": "industry",
            "name": "Industry 3"
        },
        {
            "type": "industry",
            "name": "Industry 4"
        },
        {
            "type": "industry",
            "name": "Industry 5"
        }
    ],
    "Size": [
        {
            "type": "size",
            "name": "Size 1"
        },
        {
            "type": "size",
            "name": "Size 2"
        },
        {
            "type": "size",
            "name": "Size 3"
        },
        {
            "type": "size",
            "name": "Size 4"
        },
        {
            "type": "size",
            "name": "Size 5"
        }
    ],
    "links": [
        {
            "source": "Industry 1",
            "target": "Product 1"
        },
        {
            "source": "Industry 3",
            "target": "Product 1"
        },
        {
            "source": "Industry 5",
            "target": "Product 1"
        },
        {
            "source": "Industry 2",
            "target": "Product 2"
        },
        {
            "source": "Industry 4",
            "target": "Product 2"
        },
        {
            "source": "Industry 1",
            "target": "Product 3"
        },
        {
            "source": "Industry 3",
            "target": "Product 3"
        },
        {
           ...