Data Visualization First Steps [2022, ENG] torrent

Обучающие видео » Компьютерные видеоуроки и обучающие интерактивные DVD » Программирование (видеоуроки)

Data Visualization First Steps

Год выпуска: 2022
Производитель: frontendmasters.com
Сайт производителя: https://frontendmasters.com/courses/data-visualization/
Автор: Anjana Vakil
Продолжительность: 3 hours, 27 min
Тип раздаваемого материала: Видеоклипы
Язык: Английский
Описание: Instead of staring at spreadsheets of data, you can turn that data into something visual and interactive! It allows you to explore and answer questions about the information quickly. In the course, you’ll build hands-on projects with the Observable Plot library. You’ll make visualizations or “plots,” add interactivity and embed your plots around the web with JavaScript and frameworks like React. By learning these fundamentals, you’ll be able to have what you need to move on to more complex work with d3.js and beyond!
Published: June 7, 2022

Resources and Downloads

Course Notes & Code https://observablehq.com/@anjana/data-visualization-first-steps
[spoiler="Содержание"]
Table of Contents
Introduction

Introduction
00:00:00 - 00:02:44
Introduction
Anjana Vakil introduces the course by providing personal background, course resources, and a brief overview of the Observable course website.

Overview

Data Visualization Use-Cases
00:02:45 - 00:19:05
Data Visualization Use-Cases
Anjana 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&A
00:19:06 - 00:26:55
Data Visualization Q&A
Anjana 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 Data
00:26:56 - 00:42:59
Working with Data
Anjana 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.
JavaScript Tools for Data Vis
00:43:00 - 00:46:58
JavaScript Tools for Data Vis
Anjana provides some JavaScript tools for data visualization and discusses their functions. D3.js, Vega-Lite, Arquero, and tidy.js are discussed in this segment.
Grammar of Graphics
00:46:59 - 00:53:37
Grammar of Graphics
Anjana 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.

Data Attributes

Setup Project Data in Plot Exercise
00:53:38 - 01:05:59
Setup Project Data in Plot Exercise
Students 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 Solution
01:06:00 - 01:10:58
Setup Project Data in Plot Solution
Anjana walks through the solution to the setup project data in plot exercise.
Setting Domain & Range Colors Exercise
01:10:59 - 01:16:40
Setting Domain & Range Colors Exercise
Students are instructed to set the domain and rage colors in the provided chart using fill opacity to visualize test duration.
Setting Domain & Range Colors Solution
01:16:41 - 01:22:28
Setting Domain & Range Colors Solution
Anjana walks through the solution to the setting domain and range colors exercise.
Adding Tooltips
01:22:29 - 01:31:21
Adding Tooltips
Anjana 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

Analytics Project Data Setup
01:31:22 - 01:36:27
Analytics Project Data Setup
Anjana 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 Data
01:36:28 - 01:48:09
Visualizing Analytics Data
Anjana 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 Exercise
01:48:10 - 01:50:45
Aggregation & Grouping Exercise
Students 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 Solution
01:50:46 - 01:59:36
Aggregation & Grouping Solution
Anjana walks through the solution to the aggregation and grouping exercise.
Scatterplot Exercise
01:59:37 - 02:05:37
Scatterplot Exercise
Students 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 Solution
02:05:38 - 02:16:00
Scatterplot Solution
Anjana walks through the solution to the scatterplot exercise.
Facets for Comparing Group Data Exercise
02:16:01 - 02:19:49
Facets for Comparing Group Data Exercise
Students 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 Solution
02:19:50 - 02:25:53
Facets for Comparing Group Data Solution
Anjana walks through the solution to the facets for comparing group data exercise.

API Responses

API Response Log Data Setup
02:25:54 - 02:31:21
API Response Log Data Setup
Anjana 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 Widgets
02:31:22 - 02:39:11
Adding UI with Input Widgets
Anjana 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 Exercise
02:39:12 - 02:40:37
Filtering the Data Exercise
Students are instructed to create checkboxes that filter for some/all of the present HTTP status codes.
Filtering the Data Solution
02:40:38 - 02:44:40
Filtering the Data Solution
Anjana walks through the solution to the filtering the data exercise.
Plotting the Filtered Data Exercise
02:44:41 - 02:46:34
Plotting the Filtered Data Exercise
Students 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 Solution
02:46:35 - 02:49:19
Plotting the Filtered Data Solution
Anjana walks through the solution to the plotting the filtered the data exercise.
Search Box Exercise
02:49:20 - 02:52:03
Search Box Exercise
Students 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 Solution
02:52:04 - 02:57:56
Search Box Solution
Anjana walks through the solution to the search box exercise.
Using Plot with Vanilla JS & React
02:57:57 - 03:16:31
Using Plot with Vanilla JS & React
Anjana demonstrates several alternatives for sharing data visualizations, including Observable, vanilla JavaScript projects, and React projects. Sandboxes with example code are also provided in this segment.

Wrapping Up

Wrapping Up
03:16:32 - 03:27:20
Wrapping Up
Anjana wraps up the course by reviewing the content covered, providing some key takeaways, and discussing the next steps for data visualizations.

FrontendMasters
[/spoiler]
Файлы примеров: присутствуют
Формат видео: MP4
Видео: 2560x1440, 16:9, 29.970 fps, avg 1010 kb/s
Аудио: AAC, 48kHz, 127, stereo
[spoiler="Скриншоты"]

[/spoiler]