Associamo il layout

Per esprimere i nostri dati abbiamo scelto come visualizzazione un andamento.

Per creare questo genere di grafico mette a disposizione il metodo generatore .line() che converte ogni dato nelle corrispondenti coordinate secondo le scale previste.

chart.js

const createChart = (data) => {
  ...
  const yScale = d3.scaleLinear().range([height, 0]).domain([0, maxValue]);
  const xScale = d3.scaleTime().range([0, width]).domain(dateExtent);

  const valueLine = d3
    .line()
    .x((d) => xScale(d.date))
    .y((d) => yScale(d.price));
}

Per approfondire: - d3-shape - https://observablehq.com/@d3/d3-line