Data Visualization + D3.js
16h 48m 54s
English
Free
Course description
Our Data Visualization course focuses on the practical aspects of working with data. In our 6-week long course, we’ll cover the basics of storytelling and working with data in a creative, fun way. You’ll learn how to create interactive, engaging experiences using HTML, CSS, SVG and Javascript.
Read more about the course
This course, aimed at beginners, will teach you how to work with data and choose the right visuals to represent it effectively. We’ll introduce the basics of the powerful D3.js library used to animate and add interactions to your charts and graphs. You’ll also learn how to pull data from the web using Ajax.
You don’t need to be a designer or experienced coder to join the course but a little knowledge of HTML and CSS will help.
- The different types of data visualizations and how to use them effectively
- How to work with and understand data sets and turn them into engaging experiences
- How to use HTML, CSS, SVG to design charts and graphs
- How to use Javascript to add animations, transitions and interactions to your experiences
- An introduction to the fundamentals of the powerful Javascript library D3.js
- Using Ajax to pull data from the web into your visualizations
Watch Online
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 |
Comments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
CSS Simplified
Sources: webdevsimplified.com
Learn how to create beautiful websites with over 100 video tutorials and 20+ unique projects designed to make learning CSS as easy and understandable as...
15 hours 17 minutes 44 seconds
Mastering CSS Layout
Sources: fullstack.io
Learn the Best Practices and Design Patterns behind every CSS layout. Know exactly what you should and shouldn't do at all times. And develop the intuition to break every layout...
1 hour 27 minutes 20 seconds
JavaScript: The Advanced Concepts
Sources: udemy, zerotomastery.io
After many years of working with the language, Andrei has taken decades of experience, combining best practices from some of the top developers in the world, to get you to becom...
25 hours 9 minutes 23 seconds
Web Scrape Anything With JavaScript
Sources: interviewespresso (Aaron Jack)
6 Web Scraping Projects. Must-know JavaScript technologies.
6 hours 9 seconds
Advanced JavaScript Unleashed
Sources: fullstack.io
JavaScript is arguably the most widely used programming language on the planet, and there is a vast amount of content available for learning JavaScript. The problem is that not ...