I'm new to building a react app. And I'm trying to follow a simple tutorial to create a linechart. I'm following this tutorial: https://paulho1973.medium.com/create-line-chart-with-d3-and-react-a0ae9a5e1f7.
I want to replace the link to a csv file, to my own testData.csv. I have put the test.Data.csv in the src folder. The function that I use to import the data and first show it in the console.log is:
import React, { useEffect } from "react"; import * as d3 from "d3";
function App() {
const createGraph = async () => {
// read from csv and format variables
let data = await
d3.csv('testData.csv')
let parseTime = d3.timeParse("%Y-%m-%d");
data.forEach((d) => {
d.date = parseTime(d.date);
d.value = +d.value;
});
console.log(data)
}
useEffect(() => {
createGraph();
}, []);
return (
<>
</>
);
}
export default App
my testData looks like this:
So I would expect that in the console, it shows this data. But it actually gives me this:
While if I follow the tutorial, it does show me the data in the console. Does somebody see what I'm doing wrong?
EDIT: I think it is similar to this type of issue, but I'm not sure how to encorporate it in my script