JSFiddle - React, Tailwind, and code Playground

HTML

<div id="svgArea" style='border:solid grey 1px;height:240px;'>
        <!-- d3 content should be -dynamically- placed here -->
    </div>

CSS

.line {
  fill: none;
  stroke: blue;
  stroke-width: 1px;
}

.axis line,.axis path{
  fill: none;
  stroke: #000;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}
text{
  color: white;
  fill: white;
  stroke: white;
}
.dot {
    fill: red;
}

.sensitive {
    fill-opacity:10%;
}

JavaScript

function timeSeriesChart() {
  var margin = {top: 5, right: 5, bottom: 20, left: 30},
      width = 800,
      height = 220,
      meanDate = function(d) { return d.date; },
      Speed = function(d) { return d.speed; },
      angle = function(d) { return d.angle; },
      xSpeed = function(d) { return d.x; },
      ySpeed = function(d) { return d.y; },
      xScale = d3.time.scale().range([0, width]),
      yScale = d3.scale.linear().range([height, 0]),
      rScale = d3.scale.sqrt().range([1,5]),
      xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickSize(4,0),
      yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(4).tickSize(3,0);
  var line = d3.svg.line().x(X).y(Y);
      // circle = d3.svg.circle().


    function chart(selection) {
        // console.log(selection);
        //selection represente la liste de block ou ecire les donnees
        selection.each(function(rawdata) {
            // Convert data to standard representation greedily;
            // this is needed for nondeterministic accessors.
            data = rawdata.map(function(d, i) {
                return {
                    date:meanDate.call(data, d, i),
                    Speed:Speed.call(data, d, i),
                    angle:angle.call(data, d, i),
                    xSpeed:xSpeed.call(data, d, i),
                    ySpeed:ySpeed.call(data, d, i)
                };
            });

            // Update the x-scale.
            xScale
                .domain(d3.extent(data, function(d) { return d.date; }))
                .range([0, width - margin.left - margin.right]);

            // Update the y-scale.
            yScale
                .domain(d3.extent(data, function(d) {return d.ySpeed; }))
                .range([height - margin.top - margin.bottom, 0]);
            
            // Update the r-scale.
            rScale
            .domain(d3.extent(data, function(d) { return d.xSpeed; }))
            .range([1,5]);

            // Select the svg element,...