JSFiddle - React, Tailwind, and code Playground

by odiseo

JavaScript

var dataset = [5, 10, 20, 45, 6, 25];
var pie = d3.layout.pie();
var color = d3.scale.category10();

var w = 400;
var h = 400;
var center = w / 2;
var outerRadius = 150;
var innerRadius = 0;
var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);

var arcOutter = d3.svg.arc()
    .innerRadius(outerRadius)
    .outerRadius(outerRadius + 10);

var arcPhantom = d3.svg.arc()
    .innerRadius(0)
    .outerRadius(outerRadius + 10);

//Create SVG element
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

//Set up groups
var arcs = svg.selectAll("g.arc")
    .data(pie(dataset))
    .enter()
    .append("g")
    .attr("class", "arc")
    .attr("transform", "translate(" + center + ", " + center + ")");


//Set up outter arc groups
var outterArcs = svg.selectAll("g.outter-arc")
    .data(pie(dataset))
    .enter()
    .append("g")
    .attr("class", "outter-arc")
    .attr("transform", "translate(" + center + ", " + center + ")");

//Set up phantom arc groups
var phantomArcs = svg.selectAll("g.phantom-arc")
    .data(pie(dataset))
    .enter()
    .append("g")
    .attr("class", "phantom-arc")
    .attr("transform", "translate(" + center + ", " + center + ")");


//Draw arc paths
arcs.append("path")
    .attr("fill", function (d, i) {
    return color(i);
}).attr("d", arc);

//Draw outter arc paths
outterArcs.append("path")
    .attr("fill", 'red')
    .attr("d", arcOutter).style('stroke', 'white')
    .style('stroke-width', 0);

//Draw phantom arc paths
phantomArcs.append("path")
    .attr("fill", 'orange')
    .attr("fill-opacity", 0.1)
    .attr("d", arcPhantom).style('stroke', 'white')
    .style('stroke-width', 5);