JSFiddle - React, Tailwind, and code Playground

by Mariya Gnitetckaya

HTML

<div id="element"></div> 

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

JavaScript

const el = document.getElementById('element');
const data = [
	{x: 0, y1: 6, y2: 136},
	{x: 1, y1: 6, y2: 136},
  {x: 2, y1: 9, y2: 189},
 	{x: 3, y1: 14, y2: 311},
  {x: 4, y1: 22, y2: 477},
  {x: 5, y1: 31, y2: 687},
  {x: 6, y1: 45, y2: 999},
  {x: 7, y1: 45, y2: 1100},
]

let width = 5000;
let height = 300;
let svg = d3.select(el).append('svg:svg')
  .attr('class', 'line-slider')
  .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.y2; })]);
  
let line = d3.line()
  .curve(d3.curveCardinal)
  .x(d => x(d.x))
  .y(d => y(d.y));

let data1 = data.map(item => ({x: item.x, y: item.y1}));
let data2 = data.map(item => ({x: item.x, y: item.y2}));

console.log(data1,data2)

createLine(data1, '#ea483c', '1');
createLine(data2, '#4fa3d6', '2');

function createLine(dataLine, color, title) {
  let path = svg.append("path")
    .data([dataLine])
    .attr("class", `line-${title}`)
    .attr('stroke', color)
    .attr('stroke-width', 4)
    .attr('fill', 'transparent')
    .attr("d", line);
    
 	let dots = svg.selectAll("dot")	
    .data(dataLine)			
    .enter()
    .filter((item, i) => {
      return (i > 0 && i < 7);
    });
    

    
  dots.append('circle')
    .attr('class', 'dot')
    .attr('r', 4)
    .attr('fill', color)
    .attr('stroke', 'white')
    .attr('stroke-width', 2)
    .attr('cx', d => x(d.x))
    .attr('cy', d => y(d.y))
    
 	dots.append('text')
    .text(d => d.x)
    .attr('dy', d => y(d.y))
    .attr('dx', d => x(d.x))
    .attr('style','font-size: 12px;')
}