JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<script src="http://d3js.org/d3.v2.js"></script>
<div id="objectives">
    <a href="#agg">Agg</a> 
    <a href="#bal">Bal</a> 
    <a href="#mod">Mod</a> 
    <a href="#inc">Inc</a> 
</div>
<div id="d3portfolio"></div>

CSS

#d3portfolio {
  width: 320px;
  height: 320px;
}
.chartLabel {
  font: 16px sans-serif;
  fill: #666;
}
.arcLabel {
  font: 10px sans-serif;
  fill: #fff;
}

JavaScript

var agg = { label: 'Aggressive', pct: [30, 10, 6, 30, 14, 10] },
    bal = { label: 'Balanced',   pct: [24,  7, 2, 18, 13, 36] },
    mod = { label: 'Moderate',   pct: [12,  4, 2, 10, 11, 61] },
    inc = { label: 'Income',     pct: [ 0,  0, 0,  0,  0,100] },

    data = agg;

var labels = ['LCAP', 'MCAP', 'SCAP', 'Intl', 'Alt', 'Fixed'];

var w = 320,                       // width and height, natch
    h = 320,
    r = Math.min(w, h) / 2,        // arc radius
    dur = 750,                     // duration, in milliseconds
    color = d3.scale.category10(),
    donut = d3.layout.pie().sort(null),
    arc = d3.svg.arc().innerRadius(r - 70).outerRadius(r - 20);

// ---------------------------------------------------------------------
var svg = d3.select("#d3portfolio").append("svg:svg")
    .attr("width", w).attr("height", h);

var arc_grp = svg.append("svg:g")
    .attr("class", "arcGrp")
    .attr("transform", "translate(" + (w / 2) + "," + (h / 2) + ")");

var label_group = svg.append("svg:g")
    .attr("class", "lblGroup")
    .attr("transform", "translate(" + (w / 2) + "," + (h / 2) + ")");

// GROUP FOR CENTER TEXT
var center_group = svg.append("svg:g")
    .attr("class", "ctrGroup")
    .attr("transform", "translate(" + (w / 2) + "," + (h / 2) + ")");

// CENTER LABEL
var pieLabel = center_group.append("svg:text")
    .attr("dy", ".35em").attr("class", "chartLabel")
    .attr("text-anchor", "middle")
    .text(data.label);

// DRAW ARC PATHS
var arcs = arc_grp.selectAll("path")
    .data(donut(data.pct));
arcs.enter().append("svg:path")
    .attr("stroke", "white")
    .attr("stroke-width", 0.5)
    .attr("fill", function(d, i) {return color(i);})
    .attr("d", arc)
    .each(function(d) {this._current = d});

// DRAW SLICE LABELS
var sliceLabel = label_group.selectAll("text")
    .data(donut(data.pct));
sliceLabel.enter().append("svg:text")
    .attr("class", "arcLabel")
    .attr("transform", function(d) {return "translate(" + arc.centroid(d) + ")"; })
 ...