Elaboriamo i dati

Da ora in poi ci sposteremo sul file chart.js e lavoreremo solo su quello.

Importiamo i dati per poi richiamare la funzione che costruirà il grafico e che chiamiamo createChart()

chart.js

d3.csv("data/weekly_fuel_prices_from_2005_to_20221015.csv").then((data) =>
  createChart(data)
);

const createChart = (data) => {
  console.log(data);
}

I dati vengono importati in formato stringa ma per potere applicare le funzioni di d3 abbiamo bisogno che siano rispettivamente in un formato date e numerico. Procediamo dunque a trasformarli:

chart.js

d3.csv("data/weekly_fuel_prices_from_2005_to_20221015.csv").then((data) =>
  createChart(data)
);

const createChart = (data) => {
  data = data.map((d) => ({
    date: new Date(d.SURVEY_DATE),
    price: +d.HEATING_GAS_OIL,
  }));
}

Dobbiamo anche definire quali sono il minimo e il massimo del dominio di valori per poter costruire le scale. Nel caso delle date questi valori ci vengono fornite da .extent(). Per i prezzi invece vogliamo che l'asse y parta da 0 per cui calcoliamo solo il massimo con .max()

chart.js

const createChart = (data) => {
  data = data.map((d) => ({
    date: new Date(d.SURVEY_DATE),
    price: +d.HEATING_GAS_OIL,
  }));
  
  const dateExtent = d3.extent(data, (d) => d.date);
  const maxValue = d3.max(data, (d) => d.price);
}