Using React (Hooks) with D3 - [15] Stacked Bar Chart

[@muratorium]

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

[@mengyongbryan5471]

Can you give me an example for react without hooks? I prefer react component..

[@mingshao9466]

Really excellent work, thank you very much! One more question, any idea to put the total value on top of each stacked chart?

[@DungHo-rs3tz]

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.

[@muratorium]

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!

[@piotrfer]

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...

[@chintansawla]

Thank you for the video!!! just what I needed🥳

[@akashpatel638]

Great video! really helpful. Thanks!! 😄😄

[@andrewpagan]

exactly what I needed. Thank you so much!

[@РусланШарафеев-к3о]

Thank you very much, your video helped me a lot.

[@jonathansun396]

Thank you Murat! You are a great teacher.

[@muratorium]

Jonathan Sun Thanks a lot, Jonathan, I try my best!

[@sivasirigiri6616]

Very helpful video , and i also have a request, can you make a video on line chart with multiple timeframes . please 🙏

[@hemachandrans1083]

Thank you Murat😊😊

[@muratorium]

you're welcome!

[@leoraja8]

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?

[@Awol01010001]

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?

[@abhishekduraphe8804]

Awesome! Can u please share the same example for angular?

[@muratorium]

Thank you. However, I won't be doing this for Angular, as I am not familiar with Angular at all.

[@abhishekduraphe8804]

@@muratorium Thank you! I will check your react code and implement similar pattern for angular.. Should be somehow similar

[@bottletyre]

How to have gap/spacing between Green, orange & Purple bars ?

[@mandelaakosu139]

greatest vidoes

[@tanumoynandy6166]

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

[@adamcsetneki245]

👏 THX

[@danmorettin]

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]

Daniel Morett Hey, thanks! Which example are you having trouble with?

[@danmorettin]

​@@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?

[@muratorium]

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".

[@muratorium]

And the second example uses React to render their SVG, like I mentioned in The Basics (Remastered) video. You can totally do that.

[@saviomathew9379]

How to plot stacked negative and positive bars

[@davidguedes]

Thank you so much, Murat! What is the best way rendering React d3 charts into canvas instead of svg?

[@muratorium]

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

[@mandelaakosu139]

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.