JSFiddle - React, Tailwind, and code Playground

by Taylor Brown

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<svg style="width: 0px; height: 0px;">
    <defs>
      <filter id="pieTextFilter">
        <feFlood flood-color="#000"></feFlood>
        <feComponentTransfer>
          <feFuncA type="linear" slope="0.75"></feFuncA>
        </feComponentTransfer>
        <feComposite in="SourceGraphic"></feComposite>
      </filter>
    </defs>
  </svg>
<div class="pieChart"></div>

CSS

.pieChart svg {
  width: 300px;
  height: 300px;
  overflow: visible;
}

.piechart svg>g path {
  overflow: visible;
}

.pieChart svg>g path {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 250ms;
  -moz-transition: all 250ms;
  transition: all 250ms;
}

.pieChart svg>g path:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  transform: scale(1.1);
}

.pieChart svg>g:hover text:not(.hover) {
  opacity: .2;
}

.pieChart svg>g text {
  font-family: 'Walter Turncoat',sans-serif;
  pointer-events: none;
  fill: #000;
  text-anchor: middle;
  font-size: .8em;
  -webkit-transition: all 250ms;
  -moz-transition: all 250ms;
  transition: all 250ms;
  overflow: visible;
}

.pieChart svg>g text.hover {
  font-size: 1.3em;
  fill: #fff;
  filter: url(#pieTextFilter);
  visibility: visible !important;
}

JavaScript

var sliceFocusOffset = 30,
  cv_w = 300 + (sliceFocusOffset*2) ,
  cv_h = 300 + (sliceFocusOffset*2) ,
  cv_r = 150 ,
  cv_color = d3.scale.category10();


  var arc = d3.svg.arc().outerRadius(cv_r);
  var arcOver = d3.svg.arc().outerRadius(cv_r + sliceFocusOffset);
  var cv_arc = d3.svg.arc().outerRadius(cv_r);
  var cv_pie = d3.layout.pie().sort(null).value(function (d) { return d.value });
  var cv_svg = d3.select("div.pieChart")
    .append("svg")
    .attr("width", cv_w)
    .attr("height", cv_h)
    .attr("style", "display:block; margin: 0 auto;")
    .append("g")
    .attr("transform",
          "translate(" + (cv_r + sliceFocusOffset) + "," + (cv_r + sliceFocusOffset) + ")");

  function cv_arcTween(a) {
    var i = d3.interpolate(this._current, a);
    this._current = i(0);
    return function(t) {
      console.log(cv_arc(i(t)));
      return cv_arc(i(t));
    };
  }

  function startHighlightTextEvent() {
    var paths = $(".pieChart svg>g path");
    var texts = $(".pieChart svg>g text");
    _.each(paths, function(p, i) {
      $(p).unbind("hover");
      $(p).hover(function() {
        console.log("hovering");
        $(texts[i]).attr("class", "hover");
      }, function() {
        $(texts[i]).attr("class", "");
      });
    })
  }

  function tests (data) {
    data = data ? data : {
      "slice1": Math.floor((Math.random()*10)+1),
      "slice2": Math.floor((Math.random()*10)+1),
      "slice3": Math.floor((Math.random()*10)+1),
      "slice4": Math.floor((Math.random()*10)+1) };
    var dataa = d3.entries(data);
    var cv_path = cv_svg.selectAll("path").data(cv_pie(dataa));
    var cv_text = cv_svg.selectAll("text").data(cv_pie(dataa));

    cv_path.enter()
      .append("path")
      .attr("fill", function(d, i) { return cv_color(i); } )
      .attr("d", cv_arc)
      .each(function(d) { this._current = d; })
      .attr("stroke","white")
      .attr("stroke-width",1);

    cv_text.enter()
      .append("text")
      .attr("transform",...