JSFiddle - React, Tailwind, and code Playground

by shanejones

JavaScript

var content = [
        {'id': 'a', 'order': 1, 'score': 15, 'color': '#ffaacc', 'label': '<h1>Test test</h1><p>test</p>'},
        {'id': 'a', 'order': 1, 'score': 15, 'color': '#ffaacc', 'label': '<h1>Test test</h1><p>test</p>'},
        {'id': 'a', 'order': 1, 'score': 15, 'color': '#ffaacc', 'label': '<h1>Test test</h1><p>test</p>'},
        {'id': 'a', 'order': 1, 'score': 15, 'color': '#ffaacc', 'label': '<h1>Test test</h1><p>test</p>'},
        {'id': 'a', 'order': 1, 'score': 15, 'color': '#ffaacc', 'label': '<h1>Test test</h1><p>test</p>'},
        {'id': 'a', 'order': 1, 'score': 15, 'color': '#ffaacc', 'label': '<h1>Test test</h1><p>test</p>'}

];



d3.entries(content, function(error, data) {

  data.forEach(function(d) {
    d.id     =  d.id;
    d.order  = +d.order;
    d.color  =  d.color;
    d.weight = 1; // fixes the widths
    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 path = svg.selectAll(".solidArc")
      .data(pie(data))
    .enter().append("path")
      .attr("fill", function(d) { return d.data.color; })
      .attr("class", "solidArc")
      .attr("stroke", "gray")
      .attr("d", arc)
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide);

  var outerPath = svg.selectAll(".outlineArc")
      .data(pie(data))
    .enter().append("path")
      .attr("fill", "none")
      .attr("stroke", "gray")
      .attr("class", "outlineArc")
      .attr("d", outlineArc);


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

  svg.append("svg:text")
    .attr("class", "aster-score")
    .attr("dy", ".35em")
    .attr("text-anchor", "middle") // text-align: right
    .text(Math.round(score));

});