JSFiddle - React, Tailwind, and code Playground

by christopheviau

HTML

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

CSS

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

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

JavaScript

function timeSeriesChart() {
  var margin = {top: 5, right: 5, bottom: 20, left: 30},
      width = 600,
      height = 120,
      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]),
      xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickSize(4,0),
      yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(4).tickSize(3,0),
      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(data) {
            // Convert data to standard representation greedily;
            // this is needed for nondeterministic accessors.
            data = data.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]);

            // Select the svg element, if it exists.
            var svg = d3.select(this).selectAll("svg").data([data]);

            // Otherwise, create the skeletal chart.
            var gEnter = svg.enter().append("svg").append("g");

            //...