I did it like this and it worked , Import it on top like this if its in the same folder and instead of csv(' data.csv') use the variable like this csv(datacsv) import datacsv from './data.csv'; useEffect(() => { csv(datacsv).then(data=>{ console.log(data); }); }, []);
If the page is flickering, probably the DOM elements are being deleted and re-created each time. Try to re-use the existing DOM elements using either React rendering (does virtual DOM diffing) or the D3 general update pattern.
The returned value needs only "data", but the useEffect call that loads the data needs "setData". Without "setData", "data" would never get the values from the CSV file.
Hi Curran, I had commented a while back about showing your lessons to my now 12 year old. She's taken html and css. I'm thinking that a basic javascript course would be good, so she gets what it is (client side), and then try out the D3 library. I know you have some good samples. Do you think jumping into D3 right away would teach her the js basics? Do you have any js framework recommendations to use, or should we take it one step at a time? Maybe adding jquery mobile for responsive formatting. Maybe frameworks is a next step. I've been away from developing for a couple years. Do you have any framework recommendations? It seems like once we choose a framework, that will focus too much on the particular environment and just adding libraries as needed might be better to start. I'm a big proponent of leapfrogging. I just don't want to confound js with js frameworks. Does that make sense? Once we do some basic js, we can start to explore how different stacks work together. The other thing is using cloud app services, which I think will really offer a lot. When I left the industry, the framework explosion was still pretty distributed, with so many choices. I see cloud services offering the recombination of many tools. Micro services, serverless functions, prebuilt AI models, and drag and drop API's. Do you sense this cycle of centralization and distribution heading to cloud services? Thanks for any feedback, at your convenience. Robert PS We recently changed everything, so we can spend more time learning things in depth, instead of changing subjects every hour at the obedience training center (pub school). I could write a book about the terrible things happening in the schools. But, we're still in transition mode now. A little unschooling first...
Hi Robert, that's a great idea! You know it's funny because as I posted this one, I had a feeling like I really need to start from the ground up and build up to using React. In fact I went back and watched this one th-cam.com/video/8jvoTV54nXw/w-d-xo.html , which has more basics, and thought I should re-do it (or, perhaps in smaller pieces) for modern times.
Re: Frameworks, I totally agree that it's best to learn and master JS by itself without any frameworks first, then try out various frameworks, then pick one. In my opinion, React has won the framework wars, and it's not really a "framework" per se, its scope is pretty well isolated. But there's an ecosystem around it. I view the cloud offerings as just more frameworks, and tend not to adopt any proprietary tools to avoid vendor lock-in.
@@currankelleher Excellent feedback. Thanks a lot for your time and advice. I'll check out the link. I agree about the cloud biz. But I have a gut feeling that they're constantly ducking us in, in cycles. When they combine a little of everything and sell all the value added conveniences. MS has been trying to feed the open source hunger, but there's always a catch. They were forced to make some moves or become more irrelevant. For education, I think you're right though. Nothing like understanding what it is somebody's selling you. Cloud services exposure can be good, to see what is going on. I've seen these cycles since the early 90's. There were exciting times, when everyone could choose their own adventure. We live on interesting times. Thanks again!
Could you plz create an example for VictoryLine (x -numbers, y - numbers). I tried and got warnings: Warning: Received NaN for the `y1` attribute. If this is expected, cast the value to a string, and errors: attribute d: Expected number, "M50,NaNL64.705882352…". attribute y1: Expected length, "NaN". attribute y2: Expected length, "NaN". ....
I did it like this and it worked , Import it on top like this if its in the same folder and instead of csv(' data.csv') use the variable like this csv(datacsv) import datacsv from './data.csv'; useEffect(() => { csv(datacsv).then(data=>{ console.log(data); }); }, []);
![Using React (Hooks) with D3 - [01] The Basics (Remastered)](http://i.ytimg.com/vi/Y-ThTzB-Zjk/mqdefault.jpg)
![Using React (Hooks) with D3 – [01] The Basics (Remastered)](/img/tr.png)
Spent half a day trying to load csv data. You are a godsend sir!
Nice!
Thank you! Finally I found a simple way to load csv data
console.log(data) shows a different Array of data. What is the path the CSV file should keep?
The URL for the CSV data needs to point somewhere that returns raw CSV text.
I did it like this and it worked ,
Import it on top like this if its in the same folder and instead of csv(' data.csv')
use the variable like this csv(datacsv)
import datacsv from './data.csv';
useEffect(() => {
csv(datacsv).then(data=>{
console.log(data);
});
}, []);
@@davidsimonovic6471 I was looking for this solution a while ago, Thanks!!
Hi Curran, I was struggling with this, you showed me how to do it. So, a big thanks!
what if the csv keeps changing every second? In my case the page is flickering.
If the page is flickering, probably the DOM elements are being deleted and re-created each time. Try to re-use the existing DOM elements using either React rendering (does virtual DOM diffing) or the D3 general update pattern.
@@currankelleher Thank you for helping
Thank you Curran. My coding skills have improved as a result of watching your video 🤓👾
Nice!
Why is “setData” necessary when the return() only needs “data”?
The returned value needs only "data", but the useEffect call that loads the data needs "setData". Without "setData", "data" would never get the values from the CSV file.
@@currankelleher Thank you for your explanation! How does “setData” store the file contents in “data” without a ‘loop’?
Hi Curran,
I had commented a while back about showing your lessons to my now 12 year old. She's taken html and css. I'm thinking that a basic javascript course would be good, so she gets what it is (client side), and then try out the D3 library. I know you have some good samples.
Do you think jumping into D3 right away would teach her the js basics? Do you have any js framework recommendations to use, or should we take it one step at a time?
Maybe adding jquery mobile for responsive formatting. Maybe frameworks is a next step.
I've been away from developing for a couple years. Do you have any framework recommendations?
It seems like once we choose a framework, that will focus too much on the particular environment and just adding libraries as needed might be better to start.
I'm a big proponent of leapfrogging. I just don't want to confound js with js frameworks. Does that make sense?
Once we do some basic js, we can start to explore how different stacks work together.
The other thing is using cloud app services, which I think will really offer a lot.
When I left the industry, the framework explosion was still pretty distributed, with so many choices. I see cloud services offering the recombination of many tools. Micro services, serverless functions, prebuilt AI models, and drag and drop API's.
Do you sense this cycle of centralization and distribution heading to cloud services?
Thanks for any feedback, at your convenience.
Robert
PS We recently changed everything, so we can spend more time learning things in depth, instead of changing subjects every hour at the obedience training center (pub school). I could write a book about the terrible things happening in the schools. But, we're still in transition mode now. A little unschooling first...
Hi Robert, that's a great idea! You know it's funny because as I posted this one, I had a feeling like I really need to start from the ground up and build up to using React. In fact I went back and watched this one th-cam.com/video/8jvoTV54nXw/w-d-xo.html , which has more basics, and thought I should re-do it (or, perhaps in smaller pieces) for modern times.
Re: Frameworks, I totally agree that it's best to learn and master JS by itself without any frameworks first, then try out various frameworks, then pick one. In my opinion, React has won the framework wars, and it's not really a "framework" per se, its scope is pretty well isolated. But there's an ecosystem around it. I view the cloud offerings as just more frameworks, and tend not to adopt any proprietary tools to avoid vendor lock-in.
@@currankelleher Excellent feedback. Thanks a lot for your time and advice. I'll check out the link.
I agree about the cloud biz. But I have a gut feeling that they're constantly ducking us in, in cycles. When they combine a little of everything and sell all the value added conveniences.
MS has been trying to feed the open source hunger, but there's always a catch. They were forced to make some moves or become more irrelevant.
For education, I think you're right though. Nothing like understanding what it is somebody's selling you. Cloud services exposure can be good, to see what is going on. I've seen these cycles since the early 90's. There were exciting times, when everyone could choose their own adventure.
We live on interesting times. Thanks again!
@@robertdiggins7578 Hey how is your 14 year old doing with coding?
Could you plz tell me how to create axis Label for x and y with VictoryLine ?
oh, i found.. for X and for Y:
Could you plz create an example for VictoryLine (x -numbers, y - numbers).
I tried and got warnings: Warning:
Received NaN for the `y1` attribute. If this is expected, cast the value to a string,
and errors:
attribute d: Expected number, "M50,NaNL64.705882352…".
attribute y1: Expected length, "NaN".
attribute y2: Expected length, "NaN".
....
oh, i found out, x and y should be the same as header in csv
not working for me the console render some html array despite of my csv data
Check the network tab to see the HTTP response for the CSV request. Could be wrong CSV path.
I did it like this and it worked ,
Import it on top like this if its in the same folder and instead of csv(' data.csv')
use the variable like this csv(datacsv)
import datacsv from './data.csv';
useEffect(() => {
csv(datacsv).then(data=>{
console.log(data);
});
}, []);
@@davidsimonovic6471 BLESS YOU
@@forestandnaturetherapy Im happy that it was usefull for you.
@@davidsimonovic6471 thanksss
wrote my code like this exactly but getting a NAN error.
Can you share the link?
Could u show how to put two csv files and read?
Use Promise.all . Will consider putting this in a video.
Hi sir can u make a video to make like wawamustats