Web Browser Based Visualizations Next Steps Video Lecture Transcript
This transcript was automatically generated by Zoom, so there may be discrepancies between the video and the text.

12:47:12 Hi! Everybody! Welcome back in this video. We're going to wrap up our D 3 dot.
12:47:18 J. S. Lecture, content, web browser-based visualization content in general as well.
12:47:25 So what have we covered? And this Mini section, this miniature section of the mini-course we talked about some basic HTML, some basic Css, as well as Svg, I guess I should add that in the slides we talked about basic Svg, as well, we did
12:47:40 talk and learn about a little bit of Javascript.
12:47:44 Not a lot, but just enough to get us buy for the basics of D.
12:47:48 3 dot j S. Where we covered how to append Svg elements using data bind the data to HTML elements which includes Svg elements.
12:47:58 How to add text, annotations and labels, how to add axes and scales, color maps make interactions, both basic cover ones as well as updates.
12:48:10 Transitions, how to remove data, how to subset data and we saw a couple of examples of how you can make more interactive plots using D 3 dot, J.
12:48:19 S. So surprisingly. There's maybe unsurprisingly, actually, there's a lot more that you can learn in d 3 dot.
12:48:26 Js, so you can practice making more complicated interactions and the very simple ones we've made.
12:48:32 So including like Mouse over well, as long as well as more in depth updating of the charts based on user interaction.
12:48:42 D. 3 js. Also has a suite of methods for making maps based visualizations, and we did not talk about math based javascript data, which I believe is called Geojson.
12:48:54 But I may be wrong, and then there's also network visualizations.
12:49:00 And there's a lot of other chart types in this video.
12:49:01 And this series of lectures we focused on scatterplots, line charts, and box plot or not box plots, but bar charts.
12:49:09 But there's a lot of other chart types we've seen throughout the Mini course that we don't yet know how to make in D 3 I'm leaving it up to you to figure that out on your own using the basics that we've covered here so how could you learn more the first step
12:49:23 might be checking out the documentation, either at d. 3 Js.
12:49:28 Dot org, or observable hq.com. Both have documentation and twoutorials on D.
12:49:34 3 dot. J. S. You can browse galleries we've looked at these before.
12:49:40 So this is the d 3 dot. J. S. Grant Gallery.
12:49:44 Okay. And so like, for instance, here's one with the map.
12:49:49 Get rid of that. Here's one with the map.
12:49:57 Once it loads, and so, like you can go through and hover on different regions of the map.
12:50:03 Okay, so that's an example. There's also this observable Hq.
12:50:09 Gallery which we talked about before. These might give you some nice what's the word I'm looking for?
12:50:18 Some nice inspiration, or at least show you what different types of charts are possible with D.
12:50:24 3, dot. J. S. So these are useful. There's also just doing a web search.
12:50:31 So let's say, you wanna make a certain type of chart and d 3 dot js, and you don't know how you could do d 3 dot js, that chart name, etc.
12:50:41 Or if you're stuck on something like your codes not working, you don't know why.
12:50:44 You can always try a web search as well. Those are pretty useful for figuring out what's wrong.
12:50:48 So some other tips that are useful here. It's useful to learn more.
12:50:54 Javascript, so one example of another Javascript Library.
12:50:57 That's useful is felt. So I't know spelt.
12:51:01 But I've heard from a number of people who work for making data graphics and newsrooms.
12:51:06 This is a really useful thing to know in Javascript it's like a framework that helps you make your visualizations go from computer screens to tablets, to phones automatically, without you having to worry too much.
12:51:25 Do you also, maybe are interested in starting a website or making website posts that look like a blog post.
12:51:31 So, for that you might wanna check out these free tabs.
12:51:36 So you could imagine that setting up all the style sheets, and Javascript related to a website is very difficult well, luckily, lots of places offer.
12:51:46 This is just one example, but lots of places offer free website templates that have all the style done for you.
12:51:54 So for example, my website used a bootstrap made template.
12:51:58 And then really, all you have to do is at the bottom of the website.
12:52:00 You usually have to give them some credit for coming up with the template, and then, you know, most of these websites that provide free templates.
12:52:10 Most of them give you the rules of what you're supposed to do.
12:52:15 You should. Also, if you're really interested in making data visualizations for the web, you should read more data visualizations for the web.
12:52:24 So 2 free examples are putting cool. So this has a really cool, like series of visual essays.
12:52:31 So there's one I really like. Let's see if they have it like pants pockets.
12:52:38 So this is pretty cool where they like demonstrate all the different data for women's genes.
12:52:43 Popsets versus men's genes, pockets, and kind of draw them and get like an average pocket, and it also combines this new thing that we have.
12:52:51 Well, not new thing, but it's a thing that we didn't discuss of, like what's called scrollie stolery telling so stories that are told as you scroll your way down.
12:53:02 Okay. So they have some cool stuff that can be inspiring.
12:53:05 5, 38. And also I've included, they have a series of twoutorials of how they make things and how they make their posts.
12:53:13 5, 38 usually has good visualizations, like.
12:53:18 So here's an example of like this is probably made with D.
12:53:22 3 Djs running in the background. It's a nice interactive post.
12:53:27 They have lots of cool stuff on there. Axios.
12:53:32 Also their newsletters that go to your email have nice examples of visualizations as well.
12:53:38 So these are all worthwhile of checking out and if you're just interested in learning more, I encourage you to pursue it.
12:53:45 Web browser or web based visualizations are really fun, so I hope you enjoyed watching this video and seeing what next steps you could take to learn more.
12:53:56 And I hope you do learn more. And yeah have a great rest of your day.