Wrapping Up

[00:00:00]
>> Do you recommend any sites for getting open data?
>> Yeah, great question. So let me answer a slight bit different question, which is like, how do you go about collecting data? Or how do you go about starting a data visualization project? And the way that I want to answer that is I actually really recommend when you're trying to get started with like a data visualization project, to start with something you are really curious about and that you're interested in, rather than going through an archive of open datasets, and then trying to figure out an idea or a topic that way.

[00:00:44]
Because I find that for myself at least, and I think for a lot of people, if you start with something that you're really passionate or curious about yourself, and go out and figure out ways to collect that data, whether it's like scouring, like googling actually turns up a lot of things.

[00:01:01]
If you have an idea of something you're interested in, or if you do any sort of like manual, you can do manual data entry. So that Hamilton example I've showed, those are musical lyrics, and so I went and collected all of that, I've manually entered all of the data myself with the lyrics.

[00:01:20]
Or you can use different services have different APIs that are really helpful. So I will actually recommend getting really creative with the data collection process or data collection yourself. So starting with a curiosity, something you're passionate about and going out to collect the data yourself. But if you're like, I just want to have a set of data, and I just want to be able to see them and I'll get my ideas that way.

[00:01:52]
The, [LAUGH] I was gonna say, there used to be, I'm gonna get really sad saying this, but data.gov used to have a lot of really great data. So the federal government managed, I think it was called data.gov, had a really great resources about anything that the government might need to keep track of, certainly like census information.

[00:02:25]
And although I think census information has moved to a new website, but you can just google US Census or something, and all of that should be published. It used to have all of these weird, sorry, I shouldn't say weird, it just obscures me, but anything that you feel like the government might be collecting and there used to be like data.gov, I think it's been taken down.

[00:02:51]
It's been like deprecated and taken down, and so I haven't followed up on that. But I think there were efforts to back up and archive data.gov, so you might be able to find that. Otherwise, I think that interestingly, a lot of the journals have GitHub repos full of datasets that they collected for their stories.

[00:03:25]
So I think it's that either ProPublica or maybe FiveThirtyEight, that has all of their data just published. Yeah, so they have APIs to interact with their different datasets. So actually maybe it wasn't that ProPublica, it might have been FiveThirtyEight, which is another publication. It might be them that had some, there we go.

[00:04:04]
Yeah, so fivethirtyeight/data has so many datasets of everything they've collected to write their stories, I think New York Times probably has some sort of equivalent. The Pudding has also, I highly recommend the Pudding, great site for really high quality visual essays and storytelling, and I think they have a GitHub repo of their datasets that they used in their stories also.

[00:04:48]
So if you kind of dig around, one way is if you see a data-driven story being published, especially if it's like a major newspaper, a lot of times if you go down to their methodologies, cuz if it's anything data-driven, for good reporting they need to kind of say where they got their data.

[00:05:20]
And in their methodology section, some of them will break it down in great detail, some of them will just have links, but that's a really great place to kind of like if you see something that inspired you and you want to create a data visualization with it, methodology sections have really good data-driven stories, are really great for figuring out where the data came from.

[00:05:46]
>> Is there a way to translate the SVG elements into Canvas and do something like the force layout in a more performant way?
>> Yeah. So actually, another great question. So d3-force has really great support for Canvas. And in fact, if you look at a lot of their examples, so another tip about going through the d3 API is a lot of times if you click on these images of examples, they'll link to the actual like either observable notebook or blogs with the actual code.

[00:06:23]
And so yeah, so for example it will lead to this, and if you take a look at this one, I believe this one is done with Canvas. And you can see, I'm not gonna delve too deeply cuz Canvas it looks quite different. But the key thing is, you can see that the way that we call the simulation is still the same, we pass in the nodes, and then let's see, passing the links, and then .ticked.

[00:06:59]
So we're saying for each of the links, drawLink, so that must be a custom function, and drawNode. And so yeah, so in here it has the custom functions to draw those shapes actually. Yeah, so actually for the force layout, you'll actually be using the force layout the same way because it's just creating the x, y positions for you.

[00:07:35]
You just have to kind of read into the Canvas API, and then a lot of the commands kind of translate over pretty naturally. So for example, the path string, those commands translate over for the m, I think it's like .move to, and I think curve is like .curve to, or something like that.

[00:08:03]
So it's just about kind of learning Canvas, and then once you kind of have even a basic grasp of the Canvas API, you should be able to translate what we were doing in SVG today over to Canvas. And really the biggest thing especially doing animations in Canvas, is making sure to clear the Canvas on each tick of the animation.

[00:08:33]
So if you don't, you'll get really interesting bugs, actually very visually pleasing bugs sometimes. Yeah, so that's what I will say about Canvas, but in general, most if not all of the D3 modules that have to do with drawing shapes or actually the shapes module, most of them have really great Canvas support.

[00:08:59]
So you just need to kind of pay attention to where it talks about that in the reference, or taking a look at just examples and seeing if they're implemented with Canvas or SVG. And that's all that I've got for our lessons and takeaways. Yeah, so I have some final notes, which is that if you are interested because observable notebooks don't function quite like in the index.html file or a JavaScript file.

[00:09:42]
If you are interested in seeing what we did in all of these exercises translate over into an index.html file let's say, I'll be updating these files with the kind of equivalent of what we did. So I'll be updating them with what our bar chart and our film flowers will look like in an index.html file and these links, so you can check them out.

[00:10:17]
And if you're looking for next steps, some of my other workshops on Frontend Masters is something I mentioned earlier in this workshop, is that this particular workshop that's an intro to D3 and SVG, is purely concentrated on the coding aspect of data visualization, which is really, really fun.

[00:10:43]
But I actually think that the more and almost more important challenge of data visualization is the design side, that we make sure that we're thinking about. That we were thinking through the data, that we're being careful in the way that we're encoding our data and translating it to the visual channels.

[00:11:06]
And so the building custom data visualizations is a workshop that's about how to think about and do very light analysis of the data, as well as how to kind of think about, once you have an idea from your data analysis, how you might go about designing and prototyping and turning that into something that you can end up coding with D3 or something else.

[00:11:40]
And the data visualization for React developers is, as I mentioned a little bit earlier is a very gentle introduction into D3 for React developers. So it's going to have a lot, a lot of overlap with this particular workshop. But certainly if you're interested in how to use React in D3, then I recommend kind of like skipping around to the React portions, so that you can get an idea of that.

[00:12:13]
And finally, thank you so, so much for sticking around this whole workshop, and kind of coming along this journey with me. Thank you.