JSFiddle - React, Tailwind, and code Playground

by gdicerbo

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Vertical Tree Visualization</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <style>
        body {
            background: #fff;
            font-family: sans-serif;
            margin: 0;
            padding: 0;
        }
        
        #tree {
            margin: 0;
            padding: 0;
        }
        
        .node {
            cursor: pointer;
        }

        .node circle {
            stroke-width: 3px;
        }

        .node text {
            font: 12px sans-serif;
            fill: #000;
        }

        .link {
            fill: none;
            stroke: #ccc;
            stroke-width: 2px;
        }

        .tree {
            margin-bottom: 10px;
            overflow: auto;
        }

        .node circle {
            fill: lightsteelblue;
        }

        .node text {
            text-anchor: middle;
            font-size: 14px;
            fill: #333;
        }
    </style>
</head>
<body>
    <div id="tree"></div>

    <script>
        $(document).ready(function () {
            //build tree
            function BuildVerticaLTree(treeData, treeContainerDom) {
                var margin = { top: 40, right: 120, bottom: 20, left: 120 };
                var width = 960 - margin.right - margin.left;
                var height = 500 - margin.top - margin.bottom;

                var i = 0, duration = 750;
                var tree = d3.layout.tree()
                    .size([height, width]);
                var diagonal = d3.svg.diagonal()
                    .projection(function (d) { return [d.x, d.y]; });

                var svg = d3.select(treeContainerDom).append("svg")
                    .attr("width", width + margin.right + margin.left)
                    .attr("height", height +...