CF

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
  • 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

Related courses

Frequently asked questions

What prior knowledge is recommended before taking this course?
While this course is designed for beginners and does not require advanced coding or design skills, a basic understanding of HTML and CSS will be beneficial. These skills will help you follow along with lessons that involve adding CSS rules and creating layouts with CSS Grid.
What kind of projects will I build during the course?
During the course, you will work on the 'Step Counter' project, where you'll learn to use HTML, CSS, SVG, and JavaScript to create data visualizations. You'll build interactive charts and graphs, integrating animations and transitions to enhance user experience.
Who is the target audience for this course?
The course is tailored for beginners eager to explore data visualization. It is suitable for those interested in learning to craft interactive experiences and gain foundational skills in the D3.js library, without the need for prior advanced coding or design experience.
How does this course compare to other data visualization courses?
This course focuses on teaching the essentials of storytelling through data using the D3.js library. It provides a beginner-friendly introduction to creating interactive visualizations with JavaScript, while covering HTML, CSS, and SVG for crafting aesthetically pleasing charts.
What tools and technologies will I learn to use?
The course covers a range of tools and technologies, including HTML, CSS, SVG, and JavaScript. You'll also learn to use the D3.js library for advanced visualization techniques, along with Ajax for integrating real-world data into your projects.
What topics are not covered in this course?
The course does not cover advanced programming topics or in-depth data analysis techniques. It focuses on the basics of data visualization and the use of D3.js for creating interactive and engaging experiences, rather than comprehensive data science methodologies.
What is the expected time commitment for this course?
The course spans 6 weeks, with a total of 184 lessons. While the exact time commitment can vary based on individual pace, students should expect to dedicate several hours each week to complete the lessons, exercises, and projects effectively.