Video details

React Chicago August 2021 - "Visualizations with React & D3" by Allie Wilson


React Chicago August 2021 Summer Party Meetup Sponsored By Inspire 11
Visualizations with React & D3
Allie Wilson
How does one combine React and D3.js to create impressive visualizations, when both have their own ways of manipulating the DOM? How can we utilize the flexibility and low-cost (FREE!!) D3 option when building React applications, rather than limiting ourselves to a more expensive option? Learn how to implement D3 within a React application, utilizing the virtual DOM and all of its capabilities.
Allie Wilson is a Senior Software Engineer at Inspire11. Prior to joining Inspire11, Allie worked as a Software Engineer at Vanguard and Deloitte, where she was a Subject Matter Expert and teacher of D3.
We are actively looking for speakers! Reach out
at [email protected] you would like to give a talk


Going back. Oh, my gosh, that's great. Okay. So my name is Ali Wilson, and they were going to talk about visualizations with React and D Three. Yeah, we are. Okay. So a little bit about me. I'm a software engineer and Inspire eleven as well, doing full stack development before Inspire. I worked at Deloitte and before that in products at and Guard. So I've done a little bit of consulting products, different industries, including banking and Department of Defense and a bunch of other things. Yeah. And D Three has been a huge consistent in all of those jobs, so definitely a skill set. I'm glad I learned I was a computer science major at the University of Michigan. So go blue if anyone I know Maggie does not like that, but I go blue and I've done five years of Three development and teaching fun things about me. I'm a huge fan of New Girl Michigan basketball because Michigan football sucks. Ed, Sharon, Harry Potter and gift. So expect a lot of Harry Potter references in this presentation. What I am a hustle pop, so represent. Okay, so what is V three? V Three stands for a data driven document, and it's a JavaScript library for manipulating documents based on data. So typically people call it a charting library. The founder and creator of V Three hates when people say that, but it's that in the context. Today we're going to call it a charting library. So it utilizes HTML, SVG and CSS things we're all very aware of and use pretty much every day and React. It is free and more flexible than other proprietary framework. So you may have heard of frameworks like hard charts or liquid charts. Things like that. What's nice about the Three is it is very versatile. If you can imagine it, you can pretty much make it as the proprietary framework. You kind of stuff with their data structures, their visualizations, their animations. B three, you can really create whatever you want. And again, it's free. So that's huge. So you can do simple visualization, such as a pie chart. But you can also do very interactive and complex visualizations, like a bar chart where you can select different values. You can do different filtering. You can do different animations things like that. You can even do really strange things such as the Mona Lisa histogram. So if you can see this is is very weird. I saw this on the Internet. I did not create this, but you can see the Pixel values of Mona Lisa. I don't know when you meet that, but maybe you would work for an art history Museum and need to know the pixels in Mona Lisa. So like I said, if you can think of it, you can build it. And here are some examples. So I'm going to step through some minor examples, very simple examples, and then show kind of more of a complex chart. Okay. So this is a list of a dashboard that I created with very simple bar on charts, pie charts, basically any basic chart to showcase the animations you can do with D three. I refresh the page and you can see all the different animations. So really, all of this was customizable. I discovered what data structure works best basically said, okay, this is the colors I want. This is the animation I want, and it was really easy and to folks to just create it, to have a more complex example. And the Harry Potter context on display here is a bar chart in which you can scroll. So this is perfect. If you are on a dashboard and want to show a lot of information in the small space. Additionally, you can see how you can filter. So this just gives even more flexibility to your project, whereas with another library might be more restrained by their API. So then comes the question of the problem and problems in quotes, because of course, given this talk, we're going to have a solution. But the problem of the virtual Dom. So a lot of people that have done D three, including myself in the past V three, primarily in Vanilla JavaScript, manipulate the Dom itself. When we have the virtual Doman react that puts cog of the wheel you can see in this example. Hopefully it sums in enough for people. But between live twelve and 21, it's a script tag, and you can see how online 13 T Three selects the body tag and a pen with SDG. So really, you are manipulating the Dom itself rather than having a virtual Dom to show this example. This is just a simple code example that you see this rectangle that starts in the top left and it's red and it transitions into a blue rectangle in the middle. So this is the code only, like, eight lines that generates that visualization. And this is an example in Vanilla JavaScript. So as we see D Three selects the body tag in the Dom pens an SVG and says, I want the SVG to be 500 pixels wide, 200 pixels tall. And then SVG appends. A rectangle tells it to be 80 by 80 until I read. Then there's a transition online 18, and we say, okay, in this transition, that's going to be 5 seconds or five milliseconds, grow it or shrink it and also turn it blue. So that's just kind of an example of traditional D three. This is what I was used to writing for years, but then we picked up a React project. I had done this in Angular and Vanilla JavaScript. The React was a whole other beast, and so I was like, okay, how do we implement V three in the virtual bomb? So I found that they are basically very compatible. It seems like they're not, but they are. So you can utilize a lot of React components. The code does tend to be a little bit longer than if you were to manipulate the Dom itself, but you can totally do it and make really incredible visualization. So here's a code demo. For the sake of not overwhelming. We are not going to do a huge chart. This is a very basic chart. If I refresh the page, you'll see how the values grow over time. So I think it's within I don't know, a few seconds. But anyway, so there's a transition element here. There are multiple bars, labels and values, and I will hop into the code. We can see it. So I'm going to start at the parent container, which is bar chart. Tss. Now I'm going to take a minute because I know all the react developers in the room are like, why are you using cost components? You can do these three with functional components, but it does get very messy very quickly. There's a lot of effects, a lot of side effects callback you need to know when the component mounts, when mounten it updates. And so just from my experience, it's been easier to use cost components because that's very much bill ten and it's not all going to be all in one function. It's really easy to see. Also, you can have private variables, things like that that just make it easier to select elements to render. But in order to not get too into the code, because D three API is very well documented, I'm just going to generally go through this basically from line 14, you can see how you can pass and props to this bar chart container. And basically it makes it easy to reuse code. So let's say you wanted another bar chart that showed Big Ten football wins over the year. You could reuse the the same chart component and pass in whatever data you want, whatever height with color scale margin, whatever you want. Color scale. If I want to decide that Raven clause pink, I could change that in the color scale itself in order to show what the data looks like. This is kind of just a very basic data structure. So you have a category and then a value which is randomized. So in order to make sure that the Pixel line up. So basically that your data fits within the viewport, which is the SVG. You create scales. So there's an X scale line scale I basically and the values that we have and D three auto calculates to make sure it fits within the viewport. But then we get into the interesting and the react part. So this I did not create as its own component. The tax that shows Papa Pals are in et cetera pretty straightforward. It doesn't have state. It's just tax, so you can just render it. But the bar with the transition does have its own state. So every time you render a bar, you want it to have that growing effect. So what I did is I created a bar component that take in the initial with, which is zero because you want it to start absolutely at zero, and then you want it to grow over time. So if I go into the bar component, you'll see and this is where component did Mount comes in handy. You select the private variable, which is the rectangle element. You transition the width into the final width. So in this case, the virtual knows that there's going to be four bars, one for each house, but then the bar itself adjust. I win when it mounts. And very similarly, the bar value does the same thing. So you could always pass in this transition function as a prop. But in this case I just kept it locally. But you would move the text as the component mouth. So going back to see a full view, this is about 78 lines of code with formatting. The more complex bar chart that I showed earlier would run you about 500. So still pretty complex, still pretty detailed. But you really have the versatility that you would want. Are there any questions and the function I work in the when it's just like I I it dynamic. Yeah. That's a great question. So his question was with transition. Can you do it in an event loop? Does it automatically do it or can you call it in the event loop? And is it deterministic? So you could definitely do it in an event loop? Let's say the bar is at five pixels, and then when you click a button, it would grow. That's definitely something you could do in a callback. It either in transition element or element function really says whatever comes after this due at a certain duration. So you could say if it wasn't the color, you could say I want to move in five different places and it could do that. Does that make sense? Any other questions or. Oh, yeah. Yeah. That's a good question. Okay. Basically, for those that haven't used story book before, it's a great place to try different components. We use it for our design libraries. Typically. So a good example of component Izing. D. Three to reuse across the app. I have created an access component that takes different props in, and I've also taken a container that adjust so that it is responsive and a legend components. So what's cool about using story books in this case is you can break up charts into different components, see how they interact, see all the different options. So basically, if you go to the Doc page, which hopefully this is working. Yeah, it's true. All of the different props that you can send in. I'm using type scripts in the app, so you can see all of these different options. What the types are. It makes it really easy to see how these chart components can be reused. So big. Plus for story books, it's amazing. Yeah. So yeah. Story Book is an open source NPM library, completely free. So you can just run it locally. So if I wanted to show the code, let's see if I can get it up. If I wanted to show the code, this is like I said, the really long bar chart, and this is completely dissected out into separate components. The charts can get pretty large. So basically have a component that is. Yeah. Absolutely. So if I go to bar chart, stories that ESC the story, automatically parses your file looks for the stories that CSX and create just what you saw there so you can pass it big data. You can tell it like exactly what props you want. So it goes off the director. What did you change? What if you have a tool directly? Yeah, you can. Actually, that's a great question. So this question was is it based off of the directory structure? You can make it based off of the directory structure. Let me show this code, basically. And in your stories, CSX file, you say where you want it. So visualization would be the top folder. And then the second folder would be chart and the bar chart. So I could have this in a completely different folders. And as long as I have that that out for story book, I would not any other questions. I think we're good. Okay. Thank you, everyone.