JSFiddle - React, Tailwind, and code Playground

by orchid1

HTML

<svg></svg>

CSS

g.axis path, g.axis line {
    fill:none; 
    stroke:royalblue;
}
g.axis text, g.bubbles text {
    fill:royalblue;
    font-family:sans-serif;
}

g.bubbles line {
    stroke-width:5; 
    stroke:royalblue;
}

g.bubbles circle {
    fill:rgba(255,0,64,0.5); 
    stroke:rgb(255,0,64);
    stroke-width:3;
}
g.bubbles text {
    text-anchor:middle;
    alignment-baseline:middle;
    opacity:0;
    pointer-events:all;
    transition:1s;
}
g.bubbles text:hover {
    opacity:1;
}

g.threads line {
    fill:none;
    stroke:navy;
    opacity:0.5;
}

JavaScript

(function() {
    //D3 program to fit circles of different sizes along a 
    //horizontal dimension, shifting them up and down
    //vertically only as much as is necessary to make
    //them all fit without overlap.
    //By Amelia Bellamy-Royds, in response to 
    //http://stackoverflow.com/questions/20912081/d3-js-circle-packing-along-a-line
    //inspired by
    //http://www.nytimes.com/interactive/2013/05/25/sunday-review/corporate-taxes.html
    //Freely released for any purpose under Creative Commons Attribution licence: http://creativecommons.org/licenses/by/3.0/
    //Author name and link to this page is sufficient attribution.
    
    
//create data array//
var data = [];
var N = 25, i = N;
var randNorm = d3.random.normal(0.5,0.2)
while(i--)data.push({
    x:randNorm(),
    r:Math.random()});
    //x for x-position
    //r for radius; value will be proportional to area  
//________________//
    
//Set up SVG and axis//   
var svg = d3.select("svg");
var digits = /(\d*)/;
var margin = 50; //space in pixels from edges of SVG
var padding = 4; //space in pixels between circles
var maxRadius = 25;
var biggestFirst = true; //should largest circles be added first?

var width = window.getComputedStyle(svg[0][0])["width"];
    width = digits.exec(width)[0];
var height = window.getComputedStyle(svg[0][0])["height"];
    height = Math.min(digits.exec(height)[0], width);
    
var baselineHeight = (margin + height)/2;

var xScale = d3.scale.linear()
        .domain([0,1])
        .range([margin,width-margin]);
var rScale = d3.scale.sqrt()  
        //make radius proportional to square root of data r
        .domain([0,1])
        .range([1,maxRadius]);
    
var formatPercent = d3.format(".0%");

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("top")
    .ticks(5)
    .tickFormat(formatPercent);
    
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + margin + ")")
    .call(xAxis);
    
var threads = svg.append("g")
   ...