Wrapping Up

[00:00:01]
>> A high level overview of why as developers we might care about database and what the kind of basic steps are, our first steps, as it were, from zero to awesome this, using Observable Plot. And we have gotten to some hands-on practice by working through those three projects that led us through the core concepts of features in the dataset and mapping those two encoding channels in the visualization.

[00:00:31]
So visual properties of the output visualization using scale functions. We've also talked about aggregating data with group transforms and splitting data up with faceting, so that we can answer the questions we care about. Sometimes those are higher level and needs smushing together, and sometimes those are lower level and need separating apart.

[00:00:53]
And we took a look at adding some interactivity to our charts to allow our users some flexibility with exactly what data they're looking at. We also just saw some examples, some patterns that we can use for taking our visualizations made with Plot to the rest of the web.

[00:01:12]
Whether that be through Observable notebooks, which we can share, or publish, or embed in different places. Or using Plot as a standalone library, either in Vanilla JS, or in React, or other frameworks we can use it in as well. And now, just to pull things together and wrap up, let's go through some of the takeaways, hopefully, that we are leaving today's workshop with.

[00:01:37]
And some next steps, things that we can explore to continue our journey into the world of data vis. So we saw that data visualization, as evidenced by some of the sample data that we looked at in our project, can help us as web developers. To get a better understanding of and improve not only our development workflows by looking at how much time we're wasting waiting for CI tests to pass.

[00:02:04]
Also our designs, our user interfaces, the focus that we're putting on the user experience for, let's say, folks who are dialing in to our sites from different devices, with different resolutions. So by visualizing that data, we can narrow in on, [LAUGH] no resolution pun intended there, we can narrow in on exactly which devices or viewports are of particular interest to our users.

[00:02:34]
We also saw how it can help us get a sense of sight performance by looking at, for example, our log data. And by having those interactive interfaces to our visualization, we can make it flexible so that we can really drill down into the details we care about. And of course, there are tons of other applications.

[00:02:53]
We heard about some ways that folks are using data vis in the chat earlier, and in person. And so again, if there are applications that you have seen or are now thinking of for your day to day as a developer, please share them with us. But there are so many different ways that visualization can be handy.

[00:03:13]
They go above and beyond just my boss asked me to put this chart in a dashboard [LAUGH], although that is also a totally legit reason to care about data vis. We saw how to wrangle and visualize our data with some built-in JavaScript functionality, like array filter and array map, super handy for basic data wrangling.

[00:03:34]
We saw lots of features of Observable Plot. And again, you can check out the documentation to dive into all of the other features that we didn't get time to cover. And to look up the API reference for the different syntax and features that we saw today, because who wants to keep all that in your head?

[00:03:53]
That's what documentation is for. We also saw how to use Observable notebooks with their reactive runtime and the built-in inputs that they offer for interactivity. And really quickly at the end, we saw a couple examples of how we can recreate that interactivity in other environments such as React.

[00:04:16]
And so as we walk away from this course, I hope we'll be thinking about kind of the meta level of creating visualizations. And what we need to be asking ourselves or what we need to be paying attention to as we do visualization work. So we need to be, first of all, thinking about what questions we wanna answer, and then thinking about how to wrangle our data.

[00:04:36]
So how to filter it down or reshape it, to put it in the most convenient format for answering those questions. We need to think about how we are visualizing that data in the sense of what types of plots we're making. Are we making an aggregated plot that perform some grouping on our data?

[00:04:54]
Are we looking at individual data points on, let's say, a dot plot or a cell plot as we saw before? And there are some other marks that you can use if you dig into the plot documentation, things like line plots or area plots. So you can read more about those different types of marks, these different types of plots, and which use cases they might be a good fit for.

[00:05:18]
We also need to think about how we're scaling from our data values to our display values, so in other words, from the input domain of our data space to the output range of our display space. And we need to, again, think about whether or not it makes sense based on the particular questions we're trying to answer to aggregate data together or facet and split it apart or not, right?

[00:05:47]
Sometimes just the default is actually what we need to answer our questions. So these are some of the things that we need to think about. And we also wanna think about in cases where we are intending this visualization for third party users. What inputs or interactivity might help them get faster answers to their questions if we don't know exactly what those questions are gonna be?

[00:06:11]
So how can I expose those controls to my users so that they can get the most useful visualization for their particular question? So there are some further reading links in the materials, which, again are all available in these Observable notebooks. So there are some posts from the Observable team as well as the Tableau and Netflix teams on kind of high level data vis concepts and why developers should care about them.

[00:06:42]
So take a look at some of those if you're curious on digging more into the high level of data vis. And then in terms of the lower level of how we're actually building these, lots of great resources for you. So the Observable team that's behind pPot has made some great resources.

[00:07:00]
There are cheatsheets available that you can either use as observable notebooks, with interactive little planners, as it were, so you can figure out the best plot syntax that works for your situation. Or you can print them out as PDFs if you're into having a physical cheatsheet next to you as you're doing your database work.

[00:07:18]
There are a lot of introductory notebooks, there are some video tutorials that the team has done. So if you wanna get more in depth, you can check those out. And, of course, there is the full API documentation on GitHub. There are some other Frontend Masters courses that are great follow ups to these first steps that we've taken today.

[00:07:38]
So again, the D3 database courses that Shirley Wu has put together are in the learning path, Data Visualization with D3.js. So plot and D3 kind of complement each other, where plot is really nice for that kind of high level quick exploratory data visualization, D3 is a really great kind of follow up to that.

[00:08:03]
Let's say once you've got the basic idea of what data you wanna concentrate on and what data you want to highlight, you can do that in plot to figure out those basics, do that exploratory analysis. And then, let's say, transition to D3 for a more customized kind of bespoke fancy animation, lots of special interaction effects, things like that.

[00:08:29]
Visualization that you can create after having explored what the answers are to your questions through Plot. So Plot and D3 really go nicely hand in hand. Again, they're from the same creator, they're intended for different use cases. So after playing around the Plot for a while, if you're curious about going down to a lower level visualization API, check out D3.js, some great courses on Frontend Masters there as well.

[00:08:54]
There are also some great data vis courses available on Observable from the University of Washington. There's a great series from the Observable team about time series data specifically. This is kind of a special case of databases, where there are certain considerations that you might not have if you're dealing with non-time based data.

[00:09:14]
So highly recommend checking out that series. And there are a lot of other tutorials and examples and other resources available around the Observable ecosystem. Whether you use Observable or not, there's a lot of really great data vis examples and content that you can find there. And there's also a great conference called Outlier that has some excellent past talk recordings that dig into all kinds of different aspects of data vis.

[00:09:40]
So take a look at those if you enjoy the video learning format and you wanna watch some really great talks about data vis from some of the folks who do it all day, every day, and know the ins and outs. So that is it for our workshop today.

[00:09:56]
Huge thank you to everybody for attending and watching. And huge thanks to team Observable for building all these great tools and for helping out with pulling this workshop together. Huge thank you to Mark and the whole Frontend Masters team for producing this great series and these great videos.

[00:10:17]
And if anybody wants to reach out, you can find me on Twitter, you can find me on Observable, you can find me on Github, around all of the places. So yes, if you have a questions or you wanna show off on Twitter the amazing visualizations you've made, please do, please tag, and I look forward to seeing what everybody makes.

[00:10:39]
Thank you so much.
>> [APPLAUSE]