JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

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

CSS

.join,
.link,
.node rect {
  fill: none;
  stroke: #636363;
  stroke-width: 1.5px;
}

.link {
  stroke: #969696;
}

.node rect {
  fill: white;
}

.link path,
.node rect,
.node text,
.join {
  -webkit-transition: all 500ms linear;
  -moz-transition: all 500ms linear;
  -ms-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
}

.node .element rect {
  fill: #bdbdbd;
  stroke: none;
}

.node .null rect {
  fill: none;
  stroke: none;
}

.node .null text {
  fill: #636363;
}

.node .selection rect {
  stroke: #e6550d;
}

.node .data rect {
  stroke: #3182bd;
}

.node .datum rect {
  fill: #d9d9d9;
  stroke: none;
}

.node .code text {
  font-family: monospace;
}

.node .key rect {
  fill: #a1d99b;
  stroke: none;
}

.link .to-key,
.join {
  stroke: #a1d99b;
}

.join {
  stroke-dasharray: 2,2;
}

.link .to-null {
  stroke-dasharray: .5,3.5;
  stroke-linecap: round;
}

.link .from-data {
  stroke: #3182bd;
}

.play circle {
  fill: #fff;
  stroke: #000;
  stroke-width: 3px;
}

.play:hover path {
  fill: #f00;
}

.play.mousedown circle {
  fill: #f00;
}

.play.mousedown path {
  fill: #fff;
}

.play rect {
  fill: none;
  pointer-events: all;
  cursor: pointer;
}

code span {
  -webkit-transition: background 250ms linear;
  -moz-transition: background 250ms linear;
  -ms-transition: background 250ms linear;
  -o-transition: background 250ms linear;
  transition: background 250ms linear;
}

body {
    font-family: "Helvetica";
    font-size: 11px;
}

}

JavaScript

var numbers = [4, 5, 18, 23, 42];

var letters = [
  {name: "A", frequency: .08167},
  {name: "B", frequency: .01492},
  {name: "C", frequency: .02780},
  {name: "D", frequency: .04253},
  {name: "E", frequency: .12702}
];

var vowels = [
  {name: "A", frequency: .08167},
  {name: "E", frequency: .12702},
  {name: "I", frequency: .06973},
  {name: "O", frequency: .07507},
  {name: "U", frequency: .02758}
];

var matrix = [
  [ 0,  1,  2,  3],
  [ 4,  5,  6,  7],
  [ 8,  9, 10, 11],
  [12, 13, 14, 15]
];

function name(d) {
  return d.name;
}

var margin = {top: 0, right: 40, bottom: 0, left: 40},
    width = 720,
    step = 100;

tree(
  {type: "selection", name: "selection", children: [
    {type: "array", name: "group", children: [
      {type: "element", name: "body"}
    ]}
  ]},
  24 * 1
);

function tree(leftRoot, rightRoot, outerHeight) {
  if (arguments.length < 3) outerHeight = rightRoot, rightRoot = null;

  var height = outerHeight - margin.top - margin.bottom;

  var tree = d3.layout.tree()
      .size([height, 1])
      .separation(function() { return 1; });

  var svg = d3.select("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .style("margin", "1em 0 1em " + -margin.left + "px");

  var g = svg.selectAll("g")
      .data([].concat(
        leftRoot ? {type: "left", nodes: tree.nodes(leftRoot)} : [],
        rightRoot ? {type: "right", nodes: tree.nodes(rightRoot).map(flip), flipped: true} : []
      ))
    .enter().append("g")
      .attr("class", function(d) { return d.type; })
      .attr("transform", function(d) { return "translate(" + (!!d.flipped * width + margin.left) + "," + margin.top + ")"; });

  var link = g.append("g")
      .attr("class", "link")
    .selectAll("path")
      .data(function(d) { return tree.links(d.nodes); })
    .enter().append("path")
      .attr("class", linkType);

  var node = g.append("g")
      .attr("class", "node")
   ...