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="svgContainer" class="svgContainer_c">

JavaScript

var sectionBars={"courseName":"course1","courseId":"214","children":[{"sectionName":"section1","sectionId":"5825","children":[{"color":"green","height":"18"},{"color":"yellow","height":"20"},{"color":"red","height":"30"}]},{"sectionName":"section2","sectionId":"5826","children":[{"color":"green","height":"34"},{"color":"yellow","height":"17"},{"color":"red","height":"7"}]},{"sectionName":"section3","sectionId":"5827","children":[{"color":"green","height":"12"},{"color":"yellow","height":"26"},{"color":"red","height":"6"}]},{"sectionName":"section4","sectionId":"5828","children":[{"color":"green","height":"15"},{"color":"yellow","height":"23"},{"color":"red","height":"13"}]},{"sectionName":"section5","sectionId":"5829","children":[{"color":"green","height":"15"},{"color":"yellow","height":"11"},{"color":"red","height":"28"}]}]};
           
             var width=1000;
             var height=1000;
             var radius=800;
             
             var partition,svg,node,arc,paths;


           //Backbone Model
             var PartitionModel = Backbone.Model.extend({
            	  defaults: {
            		 courseName: "",
            		 courseId: "",
            	     children:[]
            	    }   
             }); 

             //Backbone Collection
             var PartitionCollection = Backbone.Collection.extend({
                  model: PartitionModel
                  });
             
            var PartitionListModel = Backbone.Model.extend({
           defaults: {
            	        name:"",
            	        id:"",
            	        summaryList: new PartitionCollection()
            	    },

            	    parse: function(response) {
            	        response.summaryList = new PartitionCollection(response.summaryList);
            	        return response;
            	    } 
            	});
    

             // Backbone View

           var arcView = Backbone.View.extend({
        	   el: "#svgContainer", 
    		 ...