Data Visualization + D3.js

Name: Data Visualization + D3.js
Availability: InStock
Rating: 5 (2 reviews)

16h 48m 54s

English

Free

May 14, 2024

Discover the world of data visualization with our comprehensive course designed to teach you the essentials of storytelling through data. Over the span of 6 weeks, you will be guided through a creative and enjoyable journey where you'll learn to craft interactive and engaging experiences using HTML, CSS, SVG, and JavaScript.

Course Overview

This course is tailored for beginners eager to delve into the realm of data visualization. You'll learn to work with various data types and select the most effective visuals to represent your findings. Our curriculum introduces you to the fundamental capabilities of the D3.js library, empowering you to animate and integrate interactions into charts and graphs. Additionally, you'll acquire skills to pull real-world data from the web using Ajax.

Who Should Enroll?

No prior design or advanced coding experience is required for this course. However, a basic understanding of HTML and CSS will be beneficial as you progress through the material.

Key Learning Outcomes

Understand the different types of data visualizations and effectively utilize them.
Develop the ability to work with and interpret data sets to craft compelling experiences.
Design aesthetically pleasing charts and graphs using HTML, CSS, and SVG.
Enhance your visualizations with animations, transitions, and interactions using JavaScript.
Gain an introduction to the powerful D3.js library for advanced visualization techniques.
Learn to integrate data from the web into your visualizations using Ajax.

Additional

About the Author: superhi.com

We make online courses that help creative people stand out. Learn how to code, design, and manage projects among our global community!

Watch Online 184 lessons

0:00 0:00

#	Lesson Title	Duration
1	Welcome to the Data Visualization + D3 course	01:43
2	Introduction to the Step Counter project	02:09
3	What is the SuperHi Editor?	02:58
4	Adding basic HTML structure for our project	06:00
5	Adding navigation bar content	07:31
6	Introducing our CSS	09:02
7	Adding webfont typography	02:22
8	Adding extra type styles	04:13
9	How to add CSS rules	03:02
10	Adding spacing using margins	04:18
11	Giving our project layout with CSS Grid	07:49
12	Filling in our main content area	03:34
13	Inside an SVG	03:46
14	Adding a rect tag	08:23
15	Drawing circles	08:03
16	Welcome to automating our HTML	01:47
17	How to add a Javascript file	06:28
18	Picking tags and changing HTML	07:38
19	Updating the style of selected tags	05:24
20	Using forEach to loop through tags	08:19
21	Variation: adding randomness	06:18
22	forEach with an index	07:33
23	Changing our rect tags using forEach	07:55
24	Using index to change widths	03:45
25	Adding in a data array	05:05
26	Automating addition of rect tags	10:16
27	Positioning our rect tags	03:47
28	Homework	01:15
29	Homework solution	02:15
30	Welcome to Week 2!	01:27
31	What is D3 and why do we use it?	02:59
32	How to add D3 to a project	04:11
33	Using select and selectAll with D3	07:45
34	Adding data to D3 and using attr	05:16
35	Automating attribute changes	08:18
36	Adding in rect tags automatically with D3	06:13
37	Adding in real data	04:41
38	Introducing scales	07:53
39	Adding text tags to our data visualizations	08:37
40	Adding classes and circle tags	08:18
41	Thinking about grids	03:43
42	The modulo (%) and Math.floor to make a grid	04:01
43	Scaling our circle's radius	06:42
44	Homework	01:14
45	Homework solution	01:38
46	Welcome to the final part of Step Count	01:48
47	Adding in a transition	06:00
48	Adding delay and easing to transitions	06:00
49	Adding transitions to our bar chart	04:40
50	Why we group tags in our visualizations	02:46
51	Adding g tags to our bar chart	09:09
52	Adding our second text tags	05:16
53	Adding hover states using CSS	06:38
54	Adding both classes and states in CSS	04:26
55	Hovering within a group	06:48
56	Adding a group for our circles	09:40
57	Adding in goal rings using stroke	09:24
58	Adding text to our Last 28 Days section	07:29
59	Altering HTML content	05:29
60	D3's array functions	04:26
61	Using D3 Format	08:07
62	Homework	00:25
63	Homework solution	02:07
64	Welcome to Heat Map	02:30
65	Creating our HTML content	04:56
66	Adding our overall page styling	07:56
67	Adding our header layout	08:58
68	Storing data in arrays and objects	04:27
69	How our data file looks	01:44
70	Data collection using the Javascript Developer tools	02:35
71	Adding our script tags	01:53
72	Reflecting our data in design	02:07
73	Setting up our group tags	07:02
74	Adding our cities to the data visualization	04:32
75	Adding our country text tag	01:45
76	Adding data groups within data points	08:03
77	Color scales	06:38
78	Adding labels to our heat map	05:06
79	Adding box scale	03:29
80	What is a path tag	03:26
81	D3's line generators	06:28
82	Changing temperature units with a select tag	08:15
83	Homework	00:32
84	Homework solution	02:53
85	Welcome to Discover The World	02:44
86	Setting up our HTML	09:01
87	Adding our styling	05:58
88	Adding our own Javascript functions	05:36
89	Adding events to both page load and select tag changes	07:18
90	Setting up our Javascript	03:35
91	How we got our data source	03:31
92	Adding groups per city	06:57
93	Adding scales to our data	06:37
94	Changing our data depending on which value	06:19
95	Hooking our select tags up	06:21
96	Adding movement to select changes	03:35
97	Changing our circle radius data	05:29
98	Adding axes	07:48
99	Styling our axes	08:50
100	Adding axis labels	08:51
101	Adding a city label	04:28
102	Raising in D3	06:14
103	Responsive design with SVG viewBox	03:54
104	Homework	00:23
105	Homework solution	01:09
106	Welcome to The Top	01:52
107	Why this data and why visualize it in this way	05:47
108	Setting up our HTML	04:37
109	CSS page styles	04:25
110	Styling our header	07:05
111	Making a sticky header	04:45
112	Creating our groups from the data set	05:23
113	Fixing our text and header	04:36
114	Adding circle tags to each group	07:45
115	Sorting our data by a key	11:44
116	Sorting data by the select tag + homework	05:09
117	Homework solution	00:58
118	Data visualization accessibility	06:02
119	Welcome to part 2 of The Top	02:00
120	Adding a background hover to each group	07:01
121	Adding our line shapes	12:00
122	Updating our lines on select box change	04:28
123	Adding curves to lines	04:58
124	D3's area shape	07:43
125	forEach vs map	03:21
126	Making a difference	03:50
127	Adding our text scores	08:12
128	Responsive design, part 1	06:01
129	Responsive design, part 2	12:59
130	Homework	02:08
131	Welcome to Kiddo Kiddo	01:48
132	Our data source	05:16
133	Adding our HTML content	08:51
134	Styling our header and form	11:34
135	Styling our key	08:52
136	Setting up our form in Javascript	12:13
137	Filtering the data set	06:43
138	Adding our paths	09:18
139	Defining paths	06:26
140	Exit data	02:43
141	Adding axes	09:47
142	Different types of scales	04:31
143	Transitioning in and out	04:29
144	Gendering colors	02:04
145	Homework	00:58
146	Welcome to Boundless	03:49
147	Setting up our project	03:05
148	Setting up our updateGraph script	07:00
149	Making a quick bar graph	04:58
150	Making a pie generator + arc generator	09:42
151	Pie and arc options	07:57
152	Update the pie chart on next button	07:21
153	Autoplaying the visualization	07:32
154	Time formatting	07:04
155	Stopping the loop when we have no data	02:37
156	Arc tweening	10:47
157	Homework	01:16
158	Welcome to StockFinder	02:38
159	Setting up our project	02:10
160	Pulling our data in using d3.json()	05:35
161	Processing our data	08:25
162	Finding the min and max data points	04:08
163	Adding our scales	03:52
164	Making our line generator and graph	07:36
165	Adding an area generator	05:28
166	Adding in live data	06:10
167	Adding in our hover tooltip	05:03
168	Moving our tooltip across the page	07:29
169	Hiding our tooltip on mouseout	02:38
170	Finding the date on hover	03:01
171	Bisecting our data	05:55
172	Fixing our tooltip to the line	06:19
173	Extra resources	01:51
174	Welcome to Population Densities of the World	04:17
175	Loading in our dataset	10:07
176	Adding in map projections	12:00
177	Drawing country by country	07:22
178	Highlighting a country	05:21
179	Mapping our data to our countries	06:37
180	Adding a color scale	08:17
181	Filtering based on scroll	07:47
182	Adding scales to our scroll position	07:40
183	Homework	01:04
184	Thank you for being part of our course!	00:29