JSFiddle - React, Tailwind, and code Playground

by Maria Karanasou

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
 <script
  src="https://code.jquery.com/jquery-2.2.4.js"
  integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
  crossorigin="anonymous"></script>
 <div id="tree-container"></div>

CSS

.node {
    cursor: pointer;
}
.overlay {
    background-color:#EEE;
}
.node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
}
.node text {
    font-size:10px;
    font-family:sans-serif;
}
.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
}
.templink {
    fill: none;
    stroke: red;
    stroke-width: 3px;
}
.ghostCircle.show {
    display:block;
}
.ghostCircle, .activeDrag .ghostCircle {
    display: none;
}

JavaScript

myJSON = { "name": "அகல்", "children": [
	                        {"name": "விலகு","color" : "red"},
{"name" : "நீங்கு","color" : "red","l":"red","f":"360","t":"நீங்குதல், பாயிருளகல (புறநா.25).", "children" : [
							{"name": "விலகு","color" : "red"},
							{"name": "பின்னிடு","color" : "red"},
							{"name": "ஒதுங்கு","color" : "red"},
							{"name": "இடம்விட்டுப் பெயர்","color" : "red"},
							{"name": "பிரி","color" : "red"},
							{"name": "பின்வாங்கு","color" : "red"}
						    ] },
{"name": "பிரி","color" : "red","t":"பிரிதல். அகன்ற பூங்கொடியை (பாரத.குரு.79)"} ,
{"name": "கட","color" : "#1E90FF","t":"கடத்தல். (திவா.)" } ,
{"name": "விருத்தியடை","color" : "green","t":"விருத்தியடைதல் (குறள்,170.)" } ,
{"name": "விசாலி","color" : "#00C957","t":"விசாலித்தல். (புறநா.3,16.)" },
{"name": "நீட்டு","color" : "#00C957"},
{"name": "விரி","color" : "#00C957"},
{"name": "பரப்பு","color" : "#00C957"},
{"name": "விரிவு","color" : "#00C957"},
{"name": "விளக்குத் தகழி","color" : "#D15FEE","t":"விளக்குத் தகழி. திருவிளக்குத் திரியிட்டங் ககல்பரப்பி (பெரியபு.கலிய.15)."},
{"name": "சட்டி","color" : "orange","l":"red","f":"360","t":"சட்டி. காரகற்கூவியன் (பெரும்பாண். 377)", "children" : [
							{"name" : "மட்பாண்டம்" ,"color":"red"},
							{"name" : "உலோகத்தட்டு" ,"color":"red"},
							{"name" : "திதி" ,"color":"green"},
							{"name" : "அறுபது" ,"color":"orange"},
							{"name" : "தாமரை" ,"color":"purple"},
							{"name" : "அழித்தல்" ,"color":"brown"},
							{"name" : "கொல்லுதல்" ,"color":"brown"}
						    ] },
{"name": "ஓர் அளவு","color" : "blue","t":"ஓர் அளவு. (தொல்.எழுத்.170,உரை.)" } ,
{"name": "வெள்வேல்","color" : "maroon","t":"(சங்.அக.)" } ,
{"name": "உள்ளூர்","color" : "purple","t":"(பொதி. நி.) " } ,
{"name": "ஊரின் உட்புறம்","color" : "purple","t":"ஊரின் உட்புறம். (பொதி. நி.)"},
 {"name" : "நாடு","color" : "brown","l":"red","f":"360","t":"நாடு. (பொதி. நி.)", "children" : [
							{"name" : "தேடு" ,"color":"red"},
							{"name" : "ஆராய்"...