JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "visualization">
	<button id = "button-toggle" style="float : right;">Toggle</button>
 </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src ="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

CSS

.node circle {
  cursor: pointer;
  stroke: #3182bd;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
  font-weight: bold;

  pointer-events: none;
  text-anchor: middle;
}

line.link {
  fill: none;
  stroke: #9ecae1; 
  stroke-width: 3px;
  
}
.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* aspect ratio */
    vertical-align: top;
    overflow: hidden;
}
.svg-content-responsive {
    display: inline-block;
    position: relative;
    top: 10px;
    left: 0;
    background-color: grey;
}
div.tooltip { 
    position: absolute;     
    text-align: center;     
    width: 60px;          
    height: 28px;         
    padding: 2px;       
    font: 12px sans-serif;    
    background: lightsteelblue; 
    border: 0px;    
    border-radius: 8px;     
    pointer-events: none;     
}
.gradient-class{
  height: 20px;
  
  width : 200px;
}
.div-gradient{
  float:left;
  height:20px;
  width:20px;
}

JavaScript

var width =1200,
height = 900,
root= {
  "name": "flare",
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "AgglomerativeCluster", "size": 3938},
      {"name": "CommunityStructure", "size": 3812},
      {"name": "HierarchicalCluster", "size": 6714},
      {"name": "MergeEdge", "size": 743}
     ]
    },
    {
     "name": "graph",
     "children": [
      {"name": "BetweennessCentrality", "size": 3534},
      {"name": "LinkDistance", "size": 5731},
      {"name": "MaxFlowMinCut", "size": 7840},
      {"name": "ShortestPaths", "size": 5914},
      {"name": "SpanningTree", "size": 3416}
     ]
    },
    {
     "name": "optimization",
     "children": [
      {"name": "AspectRatioBanker", "size": 7074}
     ]
    }
   ]
  }
 ]

};
var w = $(window).width(),
    h = $(window).height();
var sh = $(window).height()-100;
    //Handling the f11 (full screen mode)


   var zoom = d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoomed);
   var svg = d3.select("body").classed("svg-container",true).append("svg")
    .call(zoom)//calling the zooming and panning on clicking on background area
    .attr("preserveAspectRatio","xMinYMin meet")// For the responsiveness of the layout
    .attr("viewBox", "0 0 " + w + " " + sh )
    .attr('pointer-events', 'all')
    .classed("svg-content-responsive",true)
    .append("g");
    
$("body").keyup(function(event){


if(event.keyCode == 122){
 // console.log("event.keycode",event.keyCode);
 if(keycount%2 == 0){
 $(".svg-content-responsive").css('height',"1000");
 //$(".svg-content-responsive").css("background-color","red");
 //console.log("in keyUp function");
}
}
else{

}

});

var force = d3.layout.force()
   
    .charge(-600)
    //.charge(function(d, i) { return i==0 ? -10000 : -500; })  // charge that repel nodes from each other
    .gravity(0.08)
    .size([w,h])
    
    .on("tick", tick)
  // Increasing the link distance between the nodes dynamicaly
...