JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

CSS

body {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: auto;
    position: relative;
    width: 960px;
}
text {
    font: 10px sans-serif;
}
form {
    position: absolute;
    right: 10px;
    top: 10px;
}
.slice {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
}
.slice:hover {
    opacity: 0.65;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-transition: opacity 1s ease;
    transition: opacity 1s ease;
}
.arcText {
    font: bold 12px Arial;
}
.legend {
    position: absolute;
    left:10px;
    top:200px;
}

JavaScript

var canvasWidth = 800, //width
    canvasHeight = 600, //height
    outerRadius = 200, //radius
    innerRadius = 100,
    color = d3.scale.category20c(); //builtin range of colors

var dataSet = [{
    "category": "Art",
    "percentage": 20
}, {
    "category": "Jewelry",
    "percentage": 40
}, {
    "category": "Vehicles",
    "percentage": 50
}, {
    "category": "Furniture",
    "percentage": 16
}, {
    "category": "Decorative Arts",
    "percentage": 50
}, {
    "category": "Rugs",
    "percentage": 8
}, {
    "category": "Seven",
    "percentage": 30
}];

//create SVG element
var vis = d3.select("body")
    .append("svg:svg")
    .data([dataSet])
    .attr("width", canvasWidth)
    .attr("height", canvasHeight)
    .append("svg:g") //make a group to hold our pie chart
.attr("transform", "translate(" + canvasWidth / 2 + "," + canvasHeight / 2 + ")")

// Function for creating arcs (will be applied to data)
var arc = d3.svg.arc()
    .outerRadius(outerRadius)
    .innerRadius(innerRadius);

var pie = d3.layout.pie() //this will create arc data for us given a list of values
.value(function (d) {
    return d.percentage;
}) // Binding each value to the pie
.sort(function (d) {
    return null;
});

// Select all <g> elements with class slice (there aren't any yet)
var arcs = vis.selectAll("g.slice")
// Associate the generated pie data (an array of arcs, each having startAngle,
// endAngle and value properties) 
.data(pie)
// This will create <g> elements for every "extra" data element that should be associated
// with a selection. The result is creating a <g> for every object in the data array
.enter()
// Create a group to hold each slice (we will have a <path> and a <text>
// element associated with each slice)
.append("svg:g")
    .attr("class", "slice"); //allow us to style things in the slices (like text)

arcs.append("svg:path")
//set the color for each slice to be chosen from the color function defined above
.attr("fill", function (d, i) {
    return...