JSFiddle - React, Tailwind, and code Playground

by eprouver

CSS

body{
    background: #00cbd2;
}

.aster-score{
    font-family:arial;
    fill:white;
}

JavaScript

var data = [{
    "id": "FIS",
    "score": "100",
    "weight": "0.5",
    "color": "#aaa"
}, {
    "id": "MAR",
    "score": "60",
    "weight": "0.5",
    "color": "#bbb"
},{
    "id": "MAR",
    "score": "74",
    "weight": "0.5",
    "color": "#ccc"
},{
    "id": "FIS",
    "score": "100",
    "weight": "0.5",
    "color": "#ddd"
}, {
    "id": "MAR",
    "score": "80",
    "weight": "0.5",
    "color": "#eee"
},{
    "id": "MAR",
    "score": "74",
    "weight": "0.5",
    "color": "#999"
}];

data.forEach(function(v){
    v.score = Math.random() * 100;
})

var width = 150,
    height = 150,
    radius = Math.min(width, height) / 2,
    innerRadius = 0.3 * radius;

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

var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(function (d) {
    return (radius - innerRadius) * (d.data.score / 100.0) + innerRadius;
});

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

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

data.forEach(function (d) {
    d.id = d.id;
    d.order = +d.order;
    d.color = d.color;
    d.weight = +d.weight;
    d.score = +d.score;
    d.width = +d.weight;
    d.label = d.label;
});
// for (var i = 0; i < data.score; i++) { console.log(data[i].id) }

var outerPath = svg.selectAll(".outlineArc")
    .data(pie(data))
    .enter().append("path")
    .attr("fill", "#7ED8DB")
    .attr("class", "outlineArc")
    .attr("d", outlineArc);

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



// calculate the weighted mean score
var score = data.reduce(function (a, b) {
    return a + (b.score * b.weight);
}, 0) /...