CourseFlix

Data Visualization + D3.js

16h 48m 54s
English
Free

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

SuperHi thumbnail

SuperHi was a creative technology online school founded in 2016 by Rik Lomas, focused on bringing design-school production values to coding education. The school operated until 2023, when its catalog was wound down and made available through other channels. Its course material remains some of the best work on the visual / creative end of front-end development.

The CourseFlix listing under this source reflects the SuperHi style: Page Transitions, Shaders for the Web (GLSL via Three.js for browser-native 3D effects), Data Visualization + D3.js, and Digital Project Management. The material is aimed at designers learning to code and at developers wanting to add depth on the visual / animated side of the web rather than yet another CRUD framework.

Watch Online 184 lessons

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

Course content

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

Related courses

  • Learn JavaScript (Everything packet) thumbnail

    Learn JavaScript (Everything packet)

    By: Zell Liew
    Master JavaScript with a proven method that guarantees success. JavaScript is one of the most crucial skills for aspiring frontend developers.
    36 hours 27 minutes 55 seconds
  • Build Incredible Chatbots thumbnail

    Build Incredible Chatbots

    By: Udemy
    Welcome to the most comprehensive and complete chatbot developer course. Learn concepts, tools and techniques that you will need
    7 hours 51 minutes
  • Machine Learning in JavaScript with TensorFlow.js thumbnail

    Machine Learning in JavaScript with TensorFlow.js

    By: Udemy
    Interested in using Machine Learning in JavaScript applications and websites? Then this course is for you! This is the tutorial you've been looking for to becom
    6 hours 42 minutes 20 seconds

Frequently asked questions

What is Data Visualization + D3.js about?
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…
Who teaches Data Visualization + D3.js?
Data Visualization + D3.js is taught by SuperHi. You can find more courses by this instructor on the corresponding source page.
How long is Data Visualization + D3.js?
Data Visualization + D3.js contains 184 lessons with a total runtime of 16 hours 48 minutes. All lessons are available to watch online at your own pace.
Is Data Visualization + D3.js free to watch?
Yes — Data Visualization + D3.js is a free online course on CourseFlix. You can watch every lesson without a paid subscription.
Where can I watch Data Visualization + D3.js online?
Data Visualization + D3.js is available to watch online on CourseFlix at https://courseflix.net/course/data-visualization-d3-js. The page hosts every lesson with the integrated video player; no download is required.