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

12:10:25 Visualizations. Well, these are data visualizations that utilize web browsers.
12:10:30 So these can be static or interactive. They're commonly used in web applications and newsrooms.
12:10:36 And so here are some examples that you might be interested in looking at.
12:10:40 For instance, we can click on this one, and this is stata.
12:10:45 This is a graph made. On looking at airports with firearms in Ohio, discovered by the Tsa.
12:10:52 And so this is a web based visualization because it's a data visualization based on a web browser.
12:10:59 So for some other examples, you can check out Yahoo Finance.
12:11:03 So what's the example? Here? Well, if we go to Yahoo finance, you'll see all these little charts once they load all these little mini charts right here.
12:11:12 These are data visualizations of various stock indices.
12:11:18 As another example.
12:11:22 There's this nice 5 38 article about Tom Brady that was published a few, one or 2 years ago, where, if you hover over things, there's these nice connections based upon, I believe, Touchdown, passes passed from one quarterback to a wide receiver and showing how they connect
12:11:38 back to Tom Brady, so there's all these wonderful, cool, interactive visualizations that we can make using web browsers.
12:11:48 And different programming languages related to them so what are we specifically going to cover?
12:11:54 Well, we'll have to talk about things like HTML, Css.
12:11:58 And Svg. First, before we can dive into the data.
12:12:01 Visualization part. So these 3 languages sort of make up like the core of what you're going to be able to edit with our Javascript and d 3 dot J.
12:12:11 S. Which is a Javascript package. So these 2 are really going to be what we use to make the visualizations.
12:12:17 And how do they make the visualizations by altering these 3 programming languages to make them look the way we want them to look so in order to do this, we won't have Jupiter notebooks you're gonna be writing code on its own so you're gonna need a code
12:12:34 editor to do this. So the one that I'm going to be using is called Microsoft's Visual Studio.
12:12:40 This one's pretty common in industry settings. If you have a code editor that you're more comfortable with using.
12:12:47 That's perfectly fine. Go ahead and use that one. But if you're new to writing code within a code editor, so out this Microsoft visual studio, you can download it by going to this link, and we're using the free version so if you want the community version I/O are using the visual
12:13:03 statistics, for Mac, 'cause I'm on a Mac, but it's you want to like visual visual studio code.
12:13:11 I'm just using visual studio. You're gonna want the free version, not the version that you have to pay for.
12:13:16 So to give you an idea. So this is what visual studio for Mac looks like.
12:13:22 So this is some HTML code that will dive into in the next video.
12:13:27 It's very nice, because, for instance, this won't make a lot of sense to you if you haven't seen Htl. 4.
12:13:32 But like once, I start typing an element, it auto completes it for me, which can' nice.
12:13:37 It can also be annoying if the auto complete is incorrect, but basically, this is what we're gonna be using to write our code as we go through these videos on web browser-based visualizations.
12:13:49 There will be a lot of code that's either written for you or will fill in.
12:13:51 And in these videos. And then we'll look at them in a modern web browser for us.
12:13:57 It's going to be Mozilla Firefox because that's my preferred Web Browser.
12:14:00 But it's all these should work and things like safari, Google, Chrome and Firefox, for so that being said, Go ahead, make sure you download or find a code editor that you enjoy again.
12:14:13 I'll be using visual studio, and then, after you do that, and you're ready to go you can move on to the next video.