JSFiddle - React, Tailwind, and code Playground

by orthosie

HTML

<h2>
Component Options
    </h2>
<script src="https://mbostock.github.io/d3/talk/20111116/d3/d3.js"></script>
<script src="https://mbostock.github.io/d3/talk/20111116/d3/d3.layout.js"></script>

CSS

body {
  font: 300 36px "Helvetica Neue";
  height: 640px;
  margin: 80px 160px 80px 160px;
  overflow: hidden;
  position: relative;
  width: 960px;
}

a:link, a:visited {
  color: #777;
  text-decoration: none;
}

a:hover {
  color: #666;
}

blockquote {
  margin: 0;
}

blockquote:before {
  content: "“";
  position: absolute;
  left: -.4em;
}

blockquote:after {
  content: "”";
  position: absolute;
}

body > ul {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 64px;
}

h1, h2, h3 {
  font-weight: inherit;
  margin: 0;
}

h2, h3 {
  text-align: right;
  font-size: inherit;
  position: absolute;
  bottom: 0;
  right: 0;
}

h2 {
  font-size: 24px;
  position: absolute;
}

h3 {
  bottom: -20px;
  font-size: 18px;
}

.invert {
  background: #1f1f1f;
  color: #dcdccc;
}

.invert h2, .invert h3 {
  color: #7f9f7f;
}

.string, .regexp {
  color: #f39;
}

.keyword {
  color: #00c;
}

.comment {
  color: #777;
  font-style: oblique;
}

.number {
  color: #369;
}

.class, .special {
  color: #1181B8;
}

body > svg {
  position: absolute;
  top: -80px;
  left: -160px;
}

text {
  font-size: 11px;
  pointer-events: none;
}

text.parent {
  fill: #1f77b4;
}

circle {
  fill: #ccc;
  stroke: #999;
  pointer-events: all;
}

circle.parent {
  fill: #1f77b4;
  fill-opacity: .1;
  stroke: steelblue;
}

circle.parent:hover {
  stroke: #ff7f0e;
  stroke-width: .5px;
}

circle.child {
  pointer-events: none;
}

JavaScript

var w = 1280,
    h = 800,
    r = 720,
    x = d3.scale.linear().range([0, r]),
    y = d3.scale.linear().range([0, r]),
    node,
    root;

var pack = d3.layout.pack()
    .size([r, r])
    .value(function(d) { return d.size; })

var vis = d3.select("body").insert("svg:svg", "h2")
    .attr("width", w)
    .attr("height", h)
  .append("svg:g")
    .attr("transform", "translate(" + (w - r) / 2 + "," + (h - r) / 2 + ")");

var data = {            
            "name" : "Operations",
            "children" :[
               { "name" : "Source Control",
                  "children" :[
                     { "name" : "Server",
                     "children" :[
                         {"name": "Bitbucket", "size": 3534},
                         {"name": "SVN", "size": 3534},
                         {"name": "github", "size": 3534},
                         {"name": "git", "size": 3534}
                      ]
                    } ,
                     { "name" : "GUI",
                     "children" :[
                         {"name": "SourceTree", "size": 3534},
                         {"name": "Visual Studio", "size": 3534}
                      ]
                    }                      
                  ]
               }
              ]
           };   
           
node = root = data;

  var nodes = pack.nodes(root);

  vis.selectAll("circle")
      .data(nodes)
    .enter().append("svg:circle")
      .attr("class", function(d) { return d.children ? "parent" : "child"; })
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })
      .attr("r", function(d) { return d.r; })
      .on("click", function(d) { return zoom(node == d ? root : d); });

  vis.selectAll("text")
      .data(nodes)
    .enter().append("svg:text")
      .attr("class", function(d) { return d.children ? "parent" : "child"; })
      .attr("x", function(d) { return d.x; })
      .attr("y", function(d) { return d.y; })
      .attr("dy", ".35em")
  ...