JSFiddle - React, Tailwind, and code Playground

by ptubig

HTML

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

JavaScript

var Y_SPACING = 14;

var svg = d3.select('#d3-example').append('svg')
    .attr('width', 800)
    .attr('height', 600);

var grioites = ['Doug', 'Brad', 'Santo', 'Gert', 'Paolo', 'Giuseppe','Ryan', 'Martin', 'Eric', 'Meg', 'Robert', 'Jenny', 'Morgan', 'Ishwar', 'Paul', 'Adam K', 'Adam L', 'Kostas', 'Ian', 'Eleanor', 'Ozan', 'David', 'Peter'];

function refresh(people) {
    
    // Bind data to nodes. 
    // This is where the data set has been added, updated, deleted.
    var text = svg.selectAll('text')
        .data(people, function(d) { return d; });
    
    // Rule to handle existing node
    text.transition()
        .duration(750)
        .attr('y', function(d, i) { return Y_SPACING * i + Y_SPACING; })
        .style('fill-opacity', 1)
        .style('fill', 'black');
   
    // Rule to handle new node.
    text.enter().append('text')
    .attr('x', 0)
    .attr('y', -60)
    .style('fill-opacity', 0)
    .text(function(d, i) { return d; })
    .transition()
    .duration(750)
    .attr('y', function(d, i) { return Y_SPACING * i + Y_SPACING; })
    .style('fill-opacity', 1)
    .style('fill', 'blue');
    
    // Rule to handle deleted node
    text.exit()
        .attr('x', 0)
        .transition()
        .duration(750)
        .attr('x', 60)
        .style('fill-opacity', 0)
        .style('fill', "red")
        .remove();
}

// Initialize.
refresh(grioites);

// Shuffle data. Note: Used Underscore just for convenience
setInterval(function() {
    var shuffled = _.shuffle(grioites);
    refresh(_.first(shuffled, Math.floor(Math.random() * grioites.length)));
}, 1000);