1

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:

testData.csv

So I would expect that in the console, it shows this data. But it actually gives me this:

enter image description here

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

user2133561
  • 155
  • 1
  • 10

0 Answers0