JSFiddle - React, Tailwind, and code Playground

by davidmarx

HTML

<title>Vega Interaction Test</title>
<script src="http://trifacta.github.io/vega/lib/d3.v3.min.js"></script>
<script src="http://trifacta.github.io/vega/vega.js"></script>
<script>
    var miserables = {
    "nodes": [{
        "name": "Myriel",
        "group": 1
    }, {
        "name": "Napoleon",
        "group": 1
    }, {
        "name": "Mlle.Baptistine",
        "group": 1
    }, {
        "name": "Mme.Magloire",
        "group": 1
    }, {
        "name": "CountessdeLo",
        "group": 1
    }, {
        "name": "Geborand",
        "group": 1
    }, {
        "name": "Champtercier",
        "group": 1
    }, {
        "name": "Cravatte",
        "group": 1
    }, {
        "name": "Count",
        "group": 1
    }, {
        "name": "OldMan",
        "group": 1
    }, {
        "name": "Labarre",
        "group": 2
    }, {
        "name": "Valjean",
        "group": 2
    }, {
        "name": "Marguerite",
        "group": 3
    }, {
        "name": "Mme.deR",
        "group": 2
    }, {
        "name": "Isabeau",
        "group": 2
    }, {
        "name": "Gervais",
        "group": 2
    }, {
        "name": "Tholomyes",
        "group": 3
    }, {
        "name": "Listolier",
        "group": 3
    }, {
        "name": "Fameuil",
        "group": 3
    }, {
        "name": "Blacheville",
        "group": 3
    }, {
        "name": "Favourite",
        "group": 3
    }, {
        "name": "Dahlia",
        "group": 3
    }, {
        "name": "Zephine",
        "group": 3
    }, {
        "name": "Fantine",
        "group": 3
    }, {
        "name": "Mme.Thenardier",
        "group": 4
    }, {
        "name": "Thenardier",
        "group": 4
    }, {
        "name": "Cosette",
        "group": 5
    }, {
        "name": "Javert",
        "group": 4
    }, {
        "name": "Fauchelevent",
        "group": 0
    }, {
        "name": "Bamatabois",
        "group": 2
    }, {
        "name": "Perpetue",
        "group": 3
    }, {
        "name":...

CSS

* {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
body {
    width: 450px;
    line-height: 16pt;
}

JavaScript

var spec = {
    "name": "force",
        "width": 500,
        "height": 500,
        "padding": {
        "top": 0,
        "bottom": 0,
        "left": 0,
        "right": 0
    },
        "data": [{
        "name": "edges",
        "values": miserables,
            "format": {
            "type": "json",
            "property": "links"
        },
            "transform": [{
            "type": "copy",
            "from": "data",
            "fields": ["source", "target"]
        }]
    }, {
        "name": "nodes",
            "values": miserables,
            "format": {
            "type": "json",
            "property": "nodes"
        },
            "transform": [{
            "type": "force",
                "links": "edges",
                "linkDistance": 70,
                "charge": -100,
                "iterations": 1000
        }]
    }],
        "marks": [{
        "type": "path",
            "from": {
            "data": "edges",
                "transform": [{
                "type": "link",
                "shape": "line"
            }]
        },
            "properties": {
            "update": {
                "path": {
                    "field": "path"
                },
                    "stroke": {
                    "value": "#ccc"
                },
                    "strokeWidth": {
                    "value": 0.5
                }
            }
        }
    }, {
        "type": "symbol",
            "from": {
            "data": "nodes"
        },
            "properties": {
            "enter": {
                "fillOpacity": {
                    "value": 0.3
                },
                    "stroke": {
                    "value": "steelblue"
                }
            },
                "update": {
                "x": {
                    "field": "x"
                },
                    "y": {
                    "field": "y"
                },
                    "fill": {
                    "value":...