JSFiddle - React, Tailwind, and code Playground

by heavyhorse

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<h2>Q3 2013 Risk Dials:  DXS Beta</h2>
<div id="paper"></div>

CSS

#paper{
    width:400px;
    height:400px;
}

JavaScript

var $el = $('#paper');
var paper = new Raphael($el[0], $el.width(), $el.height());
var el = {
    width: $el.width()-12,
    height: $el.height()-12,
    margin: 6
};

var Segment = function(startAngle, endAngle){
    var startRad = Math.PI * startAngle/180;
    var endRad = Math.PI * endAngle/180;
    
    this.ox = el.width/2+el.margin;
    this.oy = el.height/2+el.margin;
    this.r = el.width/2;
    this.x1 = this.ox + this.r * Math.cos(startRad);
    this.y1 = this.oy + this.r * Math.sin(startRad);
    this.x2 = this.ox + this.r * Math.cos(endRad);
    this.y2 = this.oy + this.r * Math.sin(endRad); 
};

var RiskSegment = function(startAngle, endAngle){
    var startRad = Math.PI * startAngle/180;
    var endRad = Math.PI * endAngle/180;
    
    this.ox = el.width/2+el.margin;
    this.oy = el.height/2+el.margin;
    this.r = el.width/2+45;
    this.x1 = this.ox + this.r * Math.cos(startRad);
    this.y1 = this.oy + this.r * Math.sin(startRad);
    this.x2 = this.ox + this.r * Math.cos(endRad);
    this.y2 = this.oy + this.r * Math.sin(endRad); 
};

var segments = [];

for(var i=0; i > -180; i=i-22.5){
    segments.push(new Segment(i, i-22.5));
}

var dtemplate = 
"M <%= ox %>,<%= oy %> \
L <%= x1 %>, <%= y1 %> \
A <%= r %>,<%= r %> \
0 0 0 \
<%= x2 %>,<%= y2 %> z";

var d = _.template(dtemplate);

_.each(segments, function(seg,i){
    var segment = paper.path(d(seg));
    segment.attr({'stroke-width':2, 'stroke':'#fff'});
    
    var riskColor;
    if(i==0 || i==1) riskColor = "#00c939";
    if(i==2 || i==3) riskColor = "#52ea00";
    if(i==4 || i==5) riskColor = "#ffb8ad";
    if(i==6 || i==7) riskColor= "#dd1d00";
        
    segment.attr({'fill':riskColor});
});

/* plot risk line */
var riskPath = new RiskSegment(-45,-90);
var riskPathString = 
"M <%= ox %>,<%= oy %> \
L <%= x1 %>, <%= y1 %>";
var riskPathTmpl = _.template(riskPathString);
var risk = riskPathTmpl(riskPath);

var riskLine = paper.path(risk);
riskLine.attr({
    'stroke-width': 4,
   ...