JSFiddle - React, Tailwind, and code Playground

by Musakkhir Sayyed

HTML

<script src="https://www.google.com/jsapi"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div>d3.js force directed node focus:<strong>Site Tag Explorer</strong><span style="color:darslateblue;"> <small>click a node to focus, double click to visit page</small></span><aside><small>
   <a href='http://ramblings.mcpher.com'>ramblings.mcpher.com</a><br>
    works best on Chrome<br> ackowledgements:<a href='http://bost.ocks.org/mike/'>Mike Bostok for d3.js</a></small>
   </aside>
</div>
  <div id="chart">

  </div>

CSS

body {
    position: relative;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    margin: 1em auto 4em auto;
    width: 960px;
   }

   h1 {
    font-size: 64px;
    font-weight: 300;
    letter-spacing: -2px;
    margin: .3em 0 .1em 0;
   }

   h2 {
    margin-top: 2em;
   }

   h1, h2 {
    text-rendering: optimizeLegibility;
   }

   h2 a {
    color: #ccc;
    left: -20px;
    position: absolute;
    width: 740px;
   }

   footer {
    font-size: small;
    margin-top: 8em;
   }

   header aside {
    margin-top: 20px;
   }

   header aside, footer aside {
    color: #636363;
    text-align: right;
   }

   aside {
 float:right;
 display:inline;
 font-size: small;
   }
   .attribution {
    font-size: small;
    margin-bottom: 2em;
   }

   body > p, li > p {
    line-height: 1.5em;
   }

   body > p {
    width: 720px;
   }

   body > blockquote {
    width: 640px;
   }

   li {
    width: 680px;
   }

   pre, code, textarea {
    font-family: "Menlo", monospace;
   }

   code {
    line-height: 1em;
   }

   textarea {
    font-size: 100%;
   }

   body > pre {
    border-left: solid 2px #ccc;
    padding-left: 18px;
    margin: 2em 0 2em -20px;
   }

   .html .value, .javascript .string, .javascript .regexp {
    color: #756bb1;
   }

   .html .tag, .css .tag, .javascript .keyword {
    color: #3182bd;
   }

   .comment {
    color: #636363;
   }

   .html .doctype, .javascript .number {
    color: #31a354;
   }

   .html .attribute, .css .attribute, .javascript .class, .javascript .special {
    color: #e6550d;
   }

   svg {
    font: 10px sans-serif;
   }

   .axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
   }

   sup, sub {
    line-height: 0;
   }

   q:before, blockquote:before {
    content: "?";
   }

   q:after, blockquote:after {
    content: "?";
   }

   blockquote:before {
    position: absolute;
    left: 2em;
   }

   blockquote:after {
    position: absolute;
   }

  </style>
 ...

JavaScript

google.load("jquery", "1");
   google.setOnLoadCallback(function() {
        initialize().then (
            function (control) {
                doTheTreeViz(control);
            }
        );
   });

  function doTheTreeViz(control) {

    var svg = control.svg;

    var force = control.force;
    force.nodes(control.nodes)
        .links(control.links)
        .start();

    // Update the links
    var link = svg.selectAll("line.link")
        .data(control.links, function(d) { return d.unique; } );
 
   // Enter any new links
    link.enter().insert("svg:line", ".node")
        .attr("class", "link")
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; })
      .append("svg:title")
        .text(function(d) { return d.source[control.options.nodeLabel] + ":" + d.target[control.options.nodeLabel] ; });
    
    // Exit any old links.
    link.exit().remove();


  // Update the nodes
    var node = svg.selectAll("g.node")
        .data(control.nodes, function(d) { return d.unique; });

    node.select("circle")
        .style("fill", function(d) {
            return getColor(d);
        })
        .attr("r", function(d) {
            return getRadius(d);
        })

  // Enter any new nodes.
    var nodeEnter = node.enter()
      .append("svg:g")
        .attr("class", "node")
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
        .on("dblclick", function(d){
            control.nodeClickInProgress=false;
            if (d.url)window.open(d.url);
        })
        .on("click", function(d){
            // this is a hack so that click doesnt fire on the1st click of a dblclick
            if (!control.nodeClickInProgress ) {
                control.nodeClickInProgress = true;
                setTimeout(function(){
                    if...