JSFiddle - React, Tailwind, and code Playground

by Mariya Gnitetckaya

HTML

<div id="element"></div> 
<button id="btn">click</button>

<script src="https://d3js.org/d3.v4.min.js"></script>

CSS

#element{
  width: 100%;
}
svg{
  width: 100%;
}

.line-area{fill: white;}

JavaScript

const data = [
  {x: 0, y: 10},
  {x: 1, y: 11},
  {x: 2, y: 15},
  {x: 3, y: 10},
  {x: 4, y: 10},
  {x: 5, y: 9},
  {x: 6, y: 7},
  {x: 7, y: 7},
  {x: 8, y: 9},
  {x: 9, y: 12},
  {x: 10, y: 15},
  {x: 11, y: 16},
  {x: 12, y: 14},
  {x: 13, y: 14},
  {x: 14, y: 10},
  {x: 15, y: 8},
  {x: 16, y: 9},
  {x: 17, y: 10},
  {x: 18, y: 12},
  {x: 19, y: 14},
  {x: 20, y: 15},
  {x: 21, y: 13},
  {x: 22, y: 13},
  {x: 23, y: 13},
  {x: 24, y: 15},
  {x: 25, y: 18},
  {x: 26, y: 10},
  {x: 27, y: 17},
  {x: 28, y: 20},
  {x: 29, y: 21},
  {x: 30, y: 16},
  {x: 31, y: 20},
  {x: 32, y: 22},
  {x: 33, y: 24},
  {x: 34, y: 25},
  {x: 35, y: 25}
];

let index = 11;
let extData = [];
for (var i = 0; i <= index; i++) {
	extData.push(data[i]);
}

const el = document.getElementById('element');
let btn = document.getElementById('btn');
let width = el.getBoundingClientRect().width;
let height = 200;

let svg = d3.select(el).append('svg:svg')
  .attr('class', 'line-svg')
  .attr('width', width)
  .attr('height', height)
  .append("g");
  
let x = d3.scaleTime().range([0, width]);
let y = d3.scaleLinear().range([height, 0]);

x.domain(d3.extent(data, function(d) { return d.x; }));
y.domain([0, d3.max(data, function(d) { return d.y; })]);

let valueline = d3.line()
	.curve(d3.curveCardinal)
	.x(d => x(d.x))
	.y(d => y(d.y));
  
let area = d3.area()
    .x(d => x(d.x))
    .y0(height)
    .y1(d => y(d.y));
    
svg.append("path")
  .data([data])
  .attr("class", "line-area")
  .attr("d", area);
  
svg.append("path")
  .data([data])
  .attr("class", "line")
  .attr('stroke', 'rgba(0,0,0,.2)')
  .attr('stroke-width', 4)
  .attr('fill', 'transparent')
  .attr("d", valueline);
  
let progress = svg.append("path")
  .data([extData])
  .attr("class", "line-progress")
  .attr('stroke', '#1492ff')
  .attr('stroke-width', 4)
  .attr('fill', 'transparent')
  .attr("d", valueline)
  .attr("stroke-dasharray", width)
  .attr("stroke-dashoffset", width)
  .transition()
  .duration(2000)
 ...