JSFiddle - React, Tailwind, and code Playground

by emepyc

HTML

<!DOCTYPE html>
<html>
<head>
    <script src="http://d3js.org/d3.v2.js"></script>
</head>
<body>
<div id="pipeline_diagram">
    <svg>
        <g id="node1" class="node">
            <title>analysis_10</title>
            <ellipse fill="green" stroke="black" cx="200" cy="100" rx="155.771" ry="31.1127"></ellipse>
        </g>
    </svg>
</div>

JavaScript

var data = [0,0,1,1,10]
jQuery.map($('.node title'), function(v,i) {
    var titleText = $(v).text();

    var gRoot = $(v).parent()[0]; 
    var bbox = gRoot.getBBox();
    var gpie = d3.select(gRoot)
      .append("g")
      .attr("transform", "translate(" + (bbox.x + bbox.width) + "," + bbox.y + ")");
    
    $(v).bind("monitor", {analysis_id: titleText, pie : gpie}, worker);
    $(v).trigger("monitor");
   });

function worker(event) {
    var gRoot = $(this).parent()[0]; 
    var bbox = gRoot.getBBox();
    var analysis_id = event.data.analysis_id;
    
    var called_elem = $(this);

    var gpie = event.data.pie;
    var jobs_counts = [1,1,5,5,10];
    var jobs_colors = ["green", "yellow", "red", "blue", "cyan"];    
    var innerRadius = bbox.height/5;
    var outerRadius = bbox.height/2;

    var pie = d3.layout.pie()
                       .sort(null);
     
    var arc = d3.svg.arc()
                    .innerRadius(innerRadius)
                    .outerRadius(outerRadius);
    
    var path = gpie.selectAll("path")
                  .data(pie(jobs_counts))
                  .enter().append("path")
                  .attr("fill", function(d,i) {return jobs_colors[i]})
                  .attr("d", arc);

}