JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="chart-2"></div>

CSS

body {
    background-color: #fff;
    text-align: center;
}
svg {
    background-color: #fff;
    margin: 50px auto;
}

JavaScript

d3.select("body")
    .transition()
    .duration(2050)
    .style("background-color", "black");


    
var data = [32, 57, 112,100,10],
    dataEnter = data.concat(293),
    dataExit = data.slice(0, 2),
    w = 360,
    h = 180,
    x = d3.scale.ordinal().domain([57, 32, 112, 100,10]).rangePoints([0, w], 1),
    y = d3.scale.ordinal().domain(data).rangePoints([0, h], 2);




(function () {
    var svg = d3.select("#chart-2").append("svg")
        .attr("width", 560)
        .attr("height", 480);

    svg.selectAll(".little")
        .data(data)
        .enter().append("circle")
        .attr("class", "little")
        .attr("cx", x)
        .attr("cy", y)
        .attr("r", 18);

        svg.selectAll(".select").remove();

        svg.selectAll(".select")
            .data(data)
            .enter().append("circle")
            .attr("class", "select")
            .attr("cx", x)
            .attr("cy", y)
            .attr("r", 300)
            .style("fill", "none")
            .style("stroke", "red")
            .style("stroke-opacity", 1e-6)
            .style("stroke-width", 3)
            .transition()
            .duration(750)
            .attr("r", 18)
            .style("stroke-opacity", 1).style('fill','#f60');
    
    
    

var circle = svg.selectAll("circle");
    

    
})();