Data Visualization + D3.js

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