Data Visualization First Steps
Table of Contents
IntroductionAnjana Vakil introduces the course by providing personal background, course resources, and a brief overview of the Observable course website.
Data Visualization Use-CasesAnjana discusses the benefits for developers to utilize data visualization, including feature development, performance, and code and collaboration efficiency. Using graphical information to convey information allows individuals to discover meaning and patterns in data quickly.
Data Visualization Q&AAnjana answers a student's question regarding choosing appropriate graph colors and discusses various use-cases for data visualization. The student-provided use-cases addressed in this segment include healthcare, Apple watch data, retail office data tracking, and the legal field.
Working with DataAnjana discusses using Observable for in-browser data visualization and walks through the base steps to start visualizing data. Getting the base data, reshaping data, and visualizing the data are discussed in this segment.
Grammar of GraphicsAnjana discusses the grammar of graphics as a system for understanding the abstraction of data visualization into core concepts and discusses an overview of the course content. Marks, scales, transforms, and facets are core concepts discussed in this segment.
Setup Project Data in Plot ExerciseStudents are instructed to use fill color to visualize test conclusions and use more easily recognizable colors. The provided chart will become more informative using additional channels to express other data properties.
Setup Project Data in Plot SolutionAnjana walks through the solution to the setup project data in plot exercise.
Setting Domain & Range Colors ExerciseStudents are instructed to set the domain and rage colors in the provided chart using fill opacity to visualize test duration.
Setting Domain & Range Colors SolutionAnjana walks through the solution to the setting domain and range colors exercise.
Adding TooltipsAnjana demonstrates how to add tooltips to a chart to display more details. In this case, each tooltip will display the job's conclusion status and duration.
Analytics Project Data SetupAnjana walks through the content of the "What size devices are users browsing with?" project. Students are then instructed to transform the deviceAnalytics array into a new devices array with the numeric values and additional columns and create a new array based on the devices data that adds "width" and height" columns.
Visualizing Analytics DataAnjana walks through the solution to the wrangle the data exercise and how to use Plot's Group transform functions to aggregate data based on a categorical property to compute values in each category.
Aggregation & Grouping ExerciseStudents are instructed to use the previous plot example and specify the group's transform inputs and outputs to calculate the sum of all users in each category and visualize the result on the y axis.
Aggregation & Grouping SolutionAnjana walks through the solution to the aggregation and grouping exercise.
Scatterplot ExerciseStudents are instructed to create a scatterplot, plot screen width on the x-axis and height on the y-axis, use other channels to visualize the device category and number of sessions, and as a bonus, try to add informative tooltips to get more details by hovering over a dot.
Scatterplot SolutionAnjana walks through the solution to the scatterplot exercise.
Facets for Comparing Group Data ExerciseStudents are instructed to arrange the facets horizontally along the x-axis, use the previously used devices data for the facets and use the device type (mobile, tablet, desktop) to create the facets.
Facets for Comparing Group Data SolutionAnjana walks through the solution to the facets for comparing group data exercise.
API Response Log Data SetupAnjana discusses the content of the "How fast are API responses" project and provides a brief exercise regarding setting up the initial response time plot graph.
Adding UI with Input WidgetsAnjana walks through the solution to the plot response times exercise and demonstrates some Observable Inputs HTML widgets that allow for the addition of interactive controls to data visualizations. A brief demonstration of the checkbox widget is also provided in this segment.
Filtering the Data ExerciseStudents are instructed to create checkboxes that filter for some/all of the present HTTP status codes.
Filtering the Data SolutionAnjana walks through the solution to the filtering the data exercise.
Plotting the Filtered Data ExerciseStudents are instructed to create a dot plot showing the response durations of requests over time. Try to use a color channel to visualize the paths of the requests and add informative tooltips to get more details by hovering over a dot.
Plotting the Filtered Data SolutionAnjana walks through the solution to the plotting the filtered the data exercise.
Search Box ExerciseStudents are instructed to create a search input to search the apiLogData and manually use the provided cell's Table input to verify that the search returns the expected results. Then, copy the previously completed dot plot (or the reference solution) code into the following cell, and connect it to the search input to allow viewers to search by path names.
Search Box SolutionAnjana walks through the solution to the search box exercise.