JSFiddle - React, Tailwind, and code Playground

by Gabriel Z

JavaScript

// arc radius
var radius = 200;
var p = Math.PI *2; //full circle

var data = [11,12,51,21,31,58,41,13,14,31,71,31,51,71,16,41,31,161];
var data1 = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18];

var width = 1000;
var height = 1000;



//========== color scale ==========//
var colorScale = d3.scale.ordinal()
                   .range(['#FFEBEB', '#FFC2C2', '#FFADAD', '#FF9999', '#FF7070', '#FF5C5C', '#FF4747', 
                    '#FF1F1F', '#FF0A0A', '#F50000', '#CC0000', '#A30000', '#8F0000', '#660000', '#520000', '#3D0000', '#290000', '#140000']);

//========== Create canvas and arc ==========//
var canvas = d3.select("body")
               .append("svg")
               .attr("height", height)
               .attr("width", width);

var group = canvas.append("g")
                  .attr("transform", "translate(" + width/2 + ",500)");



var arc = d3.svg.arc()
            .innerRadius(radius-50)
            .outerRadius(radius);

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

var sorted = data.sort(function(a,b){return a-b});

var arcs = group.selectAll(".arc")
                .data(pie(sorted))
                .enter()
                .append("g")
                .attr("class", "arc");


arcs.append("path")
    .attr("d", arc)
    .style('stroke', 'white')
    .style('stroke-width', 2)
    .attr("fill", function(d, i){return colorScale(d.data);}); 
    
arcs.append("text")
    .attr("transform", function(d){
        return "translate(" + arc.centroid(d) +")";
    })
    .attr("text-anchor", "middle")
    .text(function(d){return d.data});




//======== mouse over/out =========//
var prevColor;
arcs.on("mouseover", function(d){
    prevColor = d3.select(this).select("path").attr("fill");
    d3.select(this).select("path")
      .attr("fill", "black");
    })
    .on("mouseout", function(d){
        d3.select(this).select("path")
          .attr("fill", prevColor);
    });