JSFiddle - React, Tailwind, and code Playground

by Joe LeMonnier

HTML

<!doctype html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.8/d3.min.js" type="text/JavaScript"></script>
    <style>
    </style>
  </head>
  <body>
    <div id="viz">
      <svg style="width:600px;height:600px;" ></svg>
    </div>
    <script>
    
    
var json={
"tweets": [
{"user": "Al", "content": "A",  "retweets": ["Pris","Roy"], "favorites": []},
{"user": "Al", "content": "B",  "retweets": ["Roy"], "favorites": ['SAM']},
{"user": "Al", "content": "C",  "retweets": [], "favorites": ["Roy","Sam"]},
{"user": "Roy", "content": "D",  "retweets": ['Ben','Pam'], "favorites": []},
{"user": "Roy", "content": "E",  "retweets": [], "favorites": ['Ben','Pam']},
{"user": "Roy", "content": "F",  "retweets": ['Sam','Pris'], "favorites": []},
{"user": "Roy", "content": "G",  "retweets": [], "favorites": ["Sam", "Pris"]},
{"user": "Pris", "content": "H","retweets": [], "favorites": ["Sally",'Paul']},
{"user": "Pris", "content": "I", "retweets": ['Paul'], "favorites": ["Sally"]},
{"user": "Sam", "content": "J", "retweets": ["Pris"], "favorites": [ ]}
]
}


    
    
    
    
    
     // d3.json("../data/tweets4f.json", viz);
viz(json);      
      function viz(data) {
    	  
        var depthScale = d3.scaleOrdinal()
          .range(["#5EAFC6", "#FE9922", "#93c464", "#75739F"]);
        
        var nestedTweets = d3.nest()
          .key(d => d.user)
          .entries(data.tweets);
        var packableTweets = {id: "All Tweets", values: nestedTweets};
        
        var root = d3.hierarchy(packableTweets, d => d.values)
          .sum(d => d.retweets ? d.retweets.length + d.favorites.length + 1 : undefined);
        
        
    
        var treemapLayout = d3.treemap()
          .size([500,500])
          .padding(d => d.depth * 5 + 5);
        
        treemapLayout(root);
        
   var box=     d3.select("svg")
          .selectAll("rect")
          .data(root.descendants(),
            d => d.data.content || d.data.user ||...