JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>

JavaScript

(function(d3) {
        'use strict';

				var data = [
        	{name: }
        ];
        var tooltip = d3.select('body')
            .append('div')
            .attr('class', 'pie-tooltip')
            .style("opacity", 0);

        /**
         * Width and height has to be the same for a circle, the variable is in pixels.
         */

        var width = 350;
        var height = 350;
        var radius = Math.min(width, height) / 2;

        /**
         * D3 allows colours to be defined as a range, beneath is input the ranges in same order as our data set above. /Nicklas
         */

        var color = d3.scaleOrdinal()
            .range(['#ff875e', '#f6bc58', '#eae860', '#85d280']);

        var svg = d3.select('#piechart')
            .append('svg')
            .attr('width', width+20)
            .attr('height', height+20)
            .append('g')
            .attr('transform', 'translate(' + ((width+20) / 2) +
                ',' + ((height+20) / 2) + ')');

        var arc = d3.arc()
            .innerRadius(0)
            .outerRadius(radius);

        /**
         * bArc = biggerArc, this is the arc with a bigger outerRadius thats used when a user mouseovers.
         */

        var bArc = d3.arc()
            .innerRadius(0)
            .outerRadius(radius*1.05);

        var pie = d3.pie()
            .value(function(d){
                return d.value;
            })
            .sort(null);


        var path = svg.selectAll('path')
            .data(pie(data))
            .enter()
            .append('path')
            .attr('d', arc)
            .attr('fill', function(d) {
                return color(d.data.color);
            });

            path.transition()
                .duration(600)
                .attrTween("d", makePieAnimation);

            path.on("mouseover", function(d){
                d3.select(this)
                    .attr("width", width+10)
                    .attr("height", height+10);

               ...