JSFiddle - React, Tailwind, and code Playground

HTML

<svg></svg>

JavaScript

var margin = { top: 20, right: 20, bottom: 100, left: 66 };
var height = 400,
width = window.innerWidth-(margin.right+margin.left);
chart = d3.select('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"),
racedist = 5000;
			    	
			// set axes ranges
var x = d3.scale.ordinal().rangeRoundBands([0, width], .1),
y = d3.scale.linear().rangeRound([height, 0]),
// set color ranges
color = d3.scale.ordinal().range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]),
			// create axes
xAxis = d3.svg.axis().scale(x).orient('bottom'),
yAxis = d3.svg.axis().scale(y).orient('left').tickFormat(function(d) {return d;});

var oldData = [{
    name: 'John Doe',
    time: 500,
    splits: [{time: 436, distance: 3000}],
},
{
    name: 'Jane Doe',
    time: 550,
    splits: [{time: 500, distance: 3200}],
},
{
    name: 'Jack Doe',
    time: 570,
    splits: [{time: 497, distance: 3000}],
},
{
    name: 'Joe Doe',
    time: 600,
    splits: [{time: 503, distance: 3200}],
},
];

var newData = [{
    name: 'John Doe',
    time: 400,
    splits: [{time: 300, distance: 3000}],
},
{
    name: 'Jane Doe',
    time: 450,
    splits: [{time: 200, distance: 3200}],
},
{
    name: 'Jack Doe',
    time: 470,
    splits: [{time: 250, distance: 3000}],
},
];

function update(data) {
    min = d3.min(data, function(d) { return d3.min(d.splits, function(s) {return s.time}); }) || d3.min(data, function(d) { return d.time; }),
max= d3.max(data, function(d) { return d.time; });
    
    // Set ranges of values in axes
    x.domain(data.map(function(d) { return d.name}));
    y.domain([ min , max]);
    
    chart.append('g').attr('class', 'y axis').call(yAxis).selectAll('text').style('font-family','Open Sans').style('font-size', '.9rem'); 
					
// data join / Select Athlete
var athlete =...