JavaScript Tools for Data Vis

[00:00:00]
>> Now, we were still talking about how do we do this as busy developers? Well, if we have JavaScript under our belt, we are in good shape because there is a really nice and growing ecosystem for visualization in JavaScript. I've already mentioned a couple of times D3.js. If folks have encountered D3, you will find some overlap in the concept with Plot, which is what we're gonna use today I'll talk about a little bit more in a second.

[00:00:24]
But as I said, D3 is essentially a lower level library for visualization that requires you to get a little bit more nitty gritty with things like the scales that you're using. And the kind of underlying components of your visualization. And it's really powerful, really amazing for making custom visuals.

[00:00:47]
So the ideas that we're gonna cover in this course are a little bit higher level, but are gonna put you in good shape, as we've said a couple times, for going on and deepening that knowledge. You're getting a little bit lower level to build a little bit more customizable, a little bit fancier visualizations with D3.

[00:01:07]
And there are some great courses from folks like Shirley Wu on Frontend Masters that you can use to learn more about D3. There's another library called Vega-Lite, which is in many ways similar to Plot. You might have seen it around. If not, essentially a lot of the concepts that we're gonna cover today in Plot are very similar to Vega-Lite.

[00:01:28]
Both Plot and Vega-Lite are higher levels, so have a little bit higher level abstractions for dealing with these visualization tasks than something lower level like D3. And then as we mentioned, there's some tools for kind of more advanced data wrangling that you might wanna explore as you get into this field in more depth.

[00:01:51]
A couple of them are Arquero, which is put out by the University of Washington team there. And tidy.js is also great for working with. We mentioned tidy data before. That's where that name comes from. And if you've worked ever with R, for example, R is another really popular platform for environment I guess for data analysis and visualization.

[00:02:14]
tidy.js is very kind of R compatible, so it brings a lot of the notions of R into JavaScript. And there's a whole bunch more, so there are links in the materials here if you want to explore the JavaScript ecosystem. And there are also, of course, some libraries that give you these more out-of-the-box visualizations like bar charts or line charts and things like that.

[00:02:41]
We're not gonna look at those today because what we're gonna focus on again is those general concepts of things like using scales to encode features from the data into visual channels. And what you'll find is that then those out-of-the-box charts from some libraries that let's say will just give you sort of components to throw a bar chart on your site.

[00:03:06]
Those are great if you know that what you need is a particular bar chart that fits within those parameters. But what we're gonna focus on today is understanding the more general principles of choosing mappings from your data to the visualization. So that you aren't just constrained by those kind of out-of-the-box solutions so that you have control and you can make the visualization that is best suited to your use case.

[00:03:32]
Now, down the line, once you've kind of wrapped your head around those concepts and you've realized, no, actually, I just need the out-of-the-box bar chart today. Those are great, quick and easy solutions. But today, we're gonna focus on those core principles to make sure that we're not painting ourselves into any corners or sort of pigeonholing ourselves too much.

[00:03:49]
So we're gonna kind of strike a nice balance between custom visualizations, and high level abstractions that help us build those quickly.