Hey, just wanted to let you know that I created another branch on my GitHub repo for creating a Stacked *Area* Chart. It is pretty similar to creating a Stacked Bar Chart. You can check it out here: github.com/muratkemaldar/using-react-hooks-with-d3/tree/15-stacked-area-chart
I normally do not comment on videos. But, I really have to admit. You are such a great teacher. The code is fantastic. You explain everything very clear so that most of the people can understand and code along.
Finally a clear explanation of D3 stacking. Thank you! Observable and other sources should really work on the documentation, had a really hard time getting to grips with this...
Thanks for this video which is really helpful. is it possible to add label on each section of the stacked cell? can you share the code if you have one already?
Excellent video! This taught me a lot. Your videos are top notch. I do have one issue using this system if a key does not appear in a year. Say you introduced a new fruit the following year. This results in NaN values and generate console errors. Is there are clever way of preventing this?
Hey David, that is a good question, and honestly, I have never done it. I just checked for some examples, and it seems it is a bit harder! Some utilities to render axes are gone, you basically have to create your axis from scratch. If that doesn't bother you, check out this example from Mike Bostock himself: bl.ocks.org/mbostock/1550e57e12e73b86ad9e
This is incredibly helpful! Thanks for doing this! If possible, could you help with the following. I'm having trouble going from the examples on Observable or bl.ocks and translating them into react hooks. Could you please do an example of how to go from a Mike Bostock example (that's typically done in vanilla html and js) and refactoring that for react hooks?
@@muratorium this is the one i couldn't make work: observablehq.com/@d3/stacked-bar-chart . Why doesn't .append() work in react? What is "g"? I also saw this example for a bar chart medium.com/technical-credit/declarative-d3-examples-in-react-6e736e526182 and my question is why does he put so much stuff in the render method? I don't understand why some things go in the render method and some things go in the useEffectHook. Can you explain?
In the stacked bar chart example, he is "appending" stuff (creating elements) because his chart is supposed to be rendered a single time. All the charts I do are made with updateability in mind. This example isn't, it just reads data once and that's it. You could do what he does with React and that would mean you call your useEffect only a single time, like "componentDidMount".
Hi, Thanks a lot for your videos. Can you please make another video about 1. Rounded top corner bar charts 2. Custom Tooltip I need to keep my job 😂 help Stackoverflow answers seem to be very confusing
thanks Mauratorium you my hero, but can you do a presentation social graph using d3.js , or some thing learning from graph data like facebook or linkedIn thanks Bro.
![Using React (Hooks) with D3 - [15+] Stacked Area Chart](http://i.ytimg.com/vi/ww54a4Xbdds/mqdefault.jpg)
![Using React (Hooks) with D3 – [15+] Stacked Area Chart](/img/tr.png)
![Using React (Hooks) with D3 - [01] The Basics (Remastered)](http://i.ytimg.com/vi/Y-ThTzB-Zjk/mqdefault.jpg)
![Using React (Hooks) with D3 - [16] Zoomable Line Chart](http://i.ytimg.com/vi/dxUyI2wfYSI/mqdefault.jpg)
Hey, just wanted to let you know that I created another branch on my GitHub repo for creating a Stacked *Area* Chart. It is pretty similar to creating a Stacked Bar Chart. You can check it out here: github.com/muratkemaldar/using-react-hooks-with-d3/tree/15-stacked-area-chart
Can you give me an example for react without hooks? I prefer react component..
Really excellent work, thank you very much! One more question, any idea to put the total value on top of each stacked chart?
I normally do not comment on videos. But, I really have to admit. You are such a great teacher. The code is fantastic. You explain everything very clear so that most of the people can understand and code along.
Hey, thank you so much for the comment, I might just print it out and hang it on a wall. Glad you feel this way!
Finally a clear explanation of D3 stacking. Thank you! Observable and other sources should really work on the documentation, had a really hard time getting to grips with this...
Thank you for the video!!! just what I needed🥳
exactly what I needed. Thank you so much!
Great video! really helpful. Thanks!! 😄😄
Thank you Murat! You are a great teacher.
Jonathan Sun Thanks a lot, Jonathan, I try my best!
How to have gap/spacing between Green, orange & Purple bars ?
Thank you very much, your video helped me a lot.
Thanks for this video which is really helpful. is it possible to add label on each section of the stacked cell? can you share the code if you have one already?
Very helpful video , and i also have a request, can you make a video on line chart with multiple timeframes . please 🙏
Excellent video! This taught me a lot. Your videos are top notch. I do have one issue using this system if a key does not appear in a year. Say you introduced a new fruit the following year. This results in NaN values and generate console errors. Is there are clever way of preventing this?
How to plot stacked negative and positive bars
Awesome! Can u please share the same example for angular?
Thank you. However, I won't be doing this for Angular, as I am not familiar with Angular at all.
@@muratorium Thank you! I will check your react code and implement similar pattern for angular.. Should be somehow similar
Thank you Murat😊😊
you're welcome!
Thank you so much, Murat! What is the best way rendering React d3 charts into canvas instead of svg?
Hey David, that is a good question, and honestly, I have never done it. I just checked for some examples, and it seems it is a bit harder! Some utilities to render axes are gone, you basically have to create your axis from scratch. If that doesn't bother you, check out this example from Mike Bostock himself:
bl.ocks.org/mbostock/1550e57e12e73b86ad9e
This is incredibly helpful! Thanks for doing this! If possible, could you help with the following. I'm having trouble going from the examples on Observable or bl.ocks and translating them into react hooks. Could you please do an example of how to go from a Mike Bostock example (that's typically done in vanilla html and js) and refactoring that for react hooks?
Daniel Morett Hey, thanks! Which example are you having trouble with?
@@muratorium this is the one i couldn't make work: observablehq.com/@d3/stacked-bar-chart . Why doesn't .append() work in react? What is "g"? I also saw this example for a bar chart medium.com/technical-credit/declarative-d3-examples-in-react-6e736e526182 and my question is why does he put so much stuff in the render method? I don't understand why some things go in the render method and some things go in the useEffectHook. Can you explain?
In the stacked bar chart example, he is "appending" stuff (creating elements) because his chart is supposed to be rendered a single time. All the charts I do are made with updateability in mind. This example isn't, it just reads data once and that's it.
You could do what he does with React and that would mean you call your useEffect only a single time, like "componentDidMount".
And the second example uses React to render their SVG, like I mentioned in The Basics (Remastered) video. You can totally do that.
greatest vidoes
Hi, Thanks a lot for your videos. Can you please make another video about
1. Rounded top corner bar charts
2. Custom Tooltip
I need to keep my job 😂 help
Stackoverflow answers seem to be very confusing
👏 THX
thanks Mauratorium you my hero, but can you do a presentation social graph using d3.js , or some thing learning from graph data like facebook or linkedIn thanks Bro.