JSFiddle - React, Tailwind, and code Playground

by Rajagopal CR

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone.js"></script>
 <div id="svgCourseContainer" class="svgContainer_c"></div>

JavaScript

var json1={"courseName":"course1","courseId":"214","children":[{"sectionName":"section1","sectionId":"5825","children":[{"conceptName":"concept1","conceptId":"1001","conceptType":"concept"},{"conceptName":"concept2","conceptId":"1002","conceptType":"ActivityContainer"},{"conceptName":"concept3","conceptId":"1003","conceptType":"LinkConept"},{"conceptName":"concept4","conceptId":"1004","conceptType":"concept"}]},{"sectionName":"section2","sectionId":"5826","children":[{"conceptName":"concept1","conceptId":"2001","conceptType":"ActivityContainer"},{"conceptName":"concept2","conceptId":"2002","conceptType":"LinkConept"},{"conceptName":"concept3","conceptId":"2003","conceptType":"concept"},{"conceptName":"concept4","conceptId":"2004","conceptType":"concept"}]},{"sectionName":"section3","sectionId":"5827","children":[{"conceptName":"concept1","conceptId":"3001","conceptType":"Testconcept"},{"conceptName":"concept2","conceptId":"3002","conceptType":"Testconcept"},{"conceptName":"concept3","conceptId":"3003","conceptType":"Testconcept"},{"conceptName":"concept4","conceptId":"3004","conceptType":"Testconcept"}]},{"sectionName":"section4","sectionId":"5828","children":[{"conceptName":"concept1","conceptId":"4001","conceptType":"LinkConept"},{"conceptName":"concept2","conceptId":"4002","conceptType":"concept"}]},{"sectionName":"section5","sectionId":"5829","children":[{"conceptName":"concept1","conceptId":"5001","conceptType":"LinkConept"},{"conceptName":"concept2","conceptId":"5002","conceptType":"concept"},{"conceptName":"concept3","conceptId":"5003","conceptType":"conceptTool"}]}]};
          
             var width=1000;
             var height=1000;
             var radius=800;
             
             var partition,svg,fromcourseSvg,fromsectionSvg,node,arc,paths,noOfCon,cObjs,conceptsObjs;


           //Backbone Model
             var PartitionModel = Backbone.Model.extend({
            	  defaults: {
            		 courseName: "",
            		 courseId: "",
   ...