JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div class="custom" id="graph1">
    <div class="pie"></div>
</div>

CSS

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  font-weight: 300;
}

#pie-chart {
  background-color: #ffffff;
  /*border: 1px solid gray;*/
  font: 10px sans-serif;
  height: 400px;
  text-shadow: none;
  width: 650px;
  margin-left: auto;
  margin-right:auto;
}
#pie-chart .total{
  font-size: 18px;
  font-weight: bold;
}
#pie-chart .units{
  fill: gray;
  font-size: 12px;
}
#pie-chart .label{
  fill: #CCC;
  font-size: 12px;
  font-weight: bold;
}
#pie-chart .value{
  font-size: 18px;
  font-weight: bold;
}

#slider label {
    position: absolute;
    width: 20px;
    margin-left: -20px;
    text-align: center;
    margin-top: 30px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

JavaScript

var root = this;

var GraphData = function() {
    var self = this;
    self.Width = 650;
    self.Height = 400;
    self.Radius = 150;
    self.InternalRadius = 75;
    self.TextOffset = 24;
    self.TweenDuration = 1050;
    self.Lines = null;
    self.ValueLables = null;
    self.NameLabels = null;
    self.Data = [];
    self.TargetContainer = "";
    self.Donut = d3.layout.pie().value(function(d) {
        return d.itemValue;
    }).sort(null);
    self.Color = d3.scale.category20c();
    self.Arc = d3.svg.arc()
        .startAngle(function(d) {return d.startAngle;})
        .endAngle(function(d) { return d.endAngle})
        .innerRadius(self.InnerRadius)
        .outerRadius(self.Radius);
    self.SetData = function(pieData) {
        
    };
    self.SetDrawing = function() {
        self.Vis = d3.select("#" +  self.TargetContainer).append("svg:svg")
            .attr("width", self.Width)
            .attr("height", self.Height);
        self.Arc_Grouop = self.Vis.append("svg:g")
            .attr("class", "arc")
            .attr("transform", "translate(" + (self.Width / 2) + "," + (self.Height / 2) + ")");
        self.Label_Group = self.Vis.append("svg:g")
            .attr("class", "label_group")
            .attr("transform", "translate(" + (self.Width / 2) + "," + (self.Height / 2) + ")");
        self.Center_Group = self.Vis.append("svg:g")
            .attr("class", "center_group")
            .attr("transform", "translate(" + (this.Width / 2) + "," + (this.Height / 2) + ")");
        self.WhiteCircle = this.Center_Group.append("svg:circle")
            .attr("fill", "white")
            .attr("r", self.InternalRadius);
    };
};

var chart1 = new GraphData();

chart1.TargetContainer = "graph1";
chart1.SetDrawing();

$(".custom").append("hello");