JSFiddle - React, Tailwind, and code Playground

by sathish panduga p

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<body ng-controller="radialPlotCtrl" id="radialPlotCtrl">


<div ng-controller="radialPlotCtrl" class="half-plot" style="height:50%;width:80%;margin-top:65px;margin-left:5px;">
  <radial-plot dsn="dataset_v" editable="true" scale="log" labelled="true" free="true"></radial-plot>
</div>
<div id="tags" style="border:none;margin-left:25px;width:70%;">
  <span class="tag" id="4" style="width:100%;padding-left:5px;padding-right:5px;"></span>
  <input type="text" ng-model="skillAjs" id="inptags" value="" size="200" style="width:100%;background-color:rgba(0,0,0,0.1);" placeholder="Add upto values (enter ,)" />
</div>
  

</body>

CSS

.inner {
          /*border: 1px solid green;  */
          /*This is for top border for more details div*/
          width: 100%;
          height: 100%;
        }
        
        .inner1 {
          position: relative;
          width: 33%;
          float: left;
          overflow: hidden;
        }
        
        .inner2 {
          position: relative;
          width: 33%;
          float: left;
          overflow: hidden;
        }
        
        .inner3 {
          position: relative;
          width: 33%;
          float: left;
          overflow: hidden;
        }
        
        .centre {
          fill: white;
          stroke: #FF0000;
          stroke-width: 0.7;
        }
        
        .area {
          fill: #FF0000;
          fill-opacity: 1;
          stroke: #0099FF;
          stroke-width: 0.2;
          stroke-opacity: 0.2;
        }
        
        .compare-area {
          fill: #FF0000;
          fill-opacity: 0.4;
          stroke: #ff6a00;
          stroke-width: 0;
        }
        
        .area-invalid {
          fill: #FF0000;
          fill-opacity: 0.3;
          stroke: #FF0000;
          stroke-width: 0.2;
        }
        
        .interactive-arc {
          fill-opacity: 0;
        }
        
        .invalid {
          color: #FF0000;
        }
        
        .point {
          fill: #666666;
        }
        
        .point-invalid {
          fill: #FF0000;
        }
        
        .axis {
          stroke: #666666;
          stroke-width: 0.1;
          stroke-opacity: 0.5;
        }
        
        .increment-label {
          font-family: "Segoe UI", sans-serif;
          font-size: 2px;
          fill: #666666;
        }
        
        .increment-a,
        .increment-a-outer {
          fill: #E6E6E6;
          fill-opacity: 0.8;
          stroke: none;
          stroke-width: 0.2;
        }
        
        .increment-b,
        .increment-b-outer {
          fill: #0099FF;
          fill-opacity:...

JavaScript

var app = angular.module('radialPlotExampleApp', ['ui.radialplot']);
        app.controller('radialPlotCtrl', function ($scope) {

            $scope.dataset_b = {
                d0: { id: 0, name: 'Client Interaction', value: 65 },
                d1: { id: 1, name: 'Management', value: 45 },
                d2: { id: 2, name: 'Development', value: 35 },
                d3: { id: 3, name: 'Support', value: 65 },
                d4: { id: 4, name: 'Enhancements', value: 45 },
                d5: { id: 5, name: 'Testing', value: 25 },
                d6: { id: 6, name: 'Analysis', value: 75 },
                d7: { id: 7, name: 'Documentation', value: 25 }
            };

            $scope.dataset_a = {
                d0: { id: 0, name: 'Company1', value: 8 },
                d1: { id: 1, name: 'Company2', value: 5 },
                d2: { id: 2, name: 'Company3', value: 7 },
                d3: { id: 3, name: 'Company4', value: 4 },
                d4: { id: 4, name: 'Company5', value: 5.5 },
                d5: { id: 5, name: 'Company6', value: 6.5 }
            };
            $scope.dataset_skill = {
                d0: { id: 0, name: 'Python', value: 5 },
                d1: { id: 1, name: 'Django', value: 5.50 },
                d2: { id: 2, name: 'Node', value: 5.00 },
                d3: { id: 3, name: 'RethinkDB', value: 5.5 },
                d4: { id: 4, name: 'D3', value: 5 },
                d5: { id: 5, name: 'Visualization', value: 5.00 }
            };

            $scope.dataset_c = {
                d0: { id: 0, name: 'Sec skill 1', value: 5 },
                d1: { id: 1, name: 'Sec skill 2', value: 4 },
                d2: { id: 2, name: 'Sec skill 3', value: 7 },
                d3: { id: 3, name: 'Sec skill 4', value: 4 },
                d4: { id: 4, name: 'Sec skill 5', value: 5 },
                d5: { id: 5, name: 'Sec skill 6', value: 2 }
            };

            $scope.dataset_domain = {
                d0: { id: 0, name:...