Untutorial: Recreating Hans Rosling's famous data visualization using Observable Framework
๐ Our sponsor Codecrafters is offering 40% off when you sign up at https://fff.dev/codecrafters
If you want to build complex projects and elevate your coding skills, Codecrafters let's you recreate Git, SQLite, Redis and more from scratch. P.S. Those with corporate L&D budgets can get reimbursed.
And๐ Sign up for https://funfun.email
โฐ Quick jump
00:01 A Data Visualization Journey
00:48 The Health and Wealth of Nations
01:21 Hans Rosling
02:35 Interactivity
03:12 Our Ambition
04:04 Observable Framework
05:02 Observable Plot
05:35 The UnTutorial Format
08:00 Prerequisites
08:14 Command Line Interface (CLI) Basics
08:23 JavaScript Basics
08:32 Node.js & Npm Basics
08:53 Static Web Site Publishing
09:05 Adding Comfort - Git, Static-Site Generators, Server-Side Rendering (SSR) Frameworks
11:20 Your Mission
11:27 Challenge 1 (of 3): Initialize Observable Framework
12:18 Observable Classic
13:06 Interactive Data Notebooks
15:37 Observable 2.0
17:05 Objective 1 (of 3): Initialize Observable Framework
18:12 Challenge 2 (of 3): Mine and Display Raw Data
18:50 Bonus Challenge 2.5 - Gapminder
19:17 Working with Data
20:26 Objective 2 (of 3): Mine and Display Raw Data
21:30 CodeCrafters - Learn by Building! & 40% off!
22:30 Build the Unbuildable
25:35 Challenge 3 (of 3): Scatter Plot the Data of your home country
25:56 What is a Plot?
26:29 Plot vs Graph
27:32 Thinking in Points
30:40 What to Plot with?
33:40 Objective 3 (of 3): Scatter Plot the Data of your home country
34:04 Achieving the Impossible
Watch on YouTube โ
(saves to browser)
Sign in to unlock AI tutor explanation ยท โก30
Playlist
Uploads from Fun Fun Function ยท Fun Fun Function ยท 0 of 60
โ Previous
Next โ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Higher-order functions - Part 1 of Functional Programming in JavaScript
Fun Fun Function
Map - Part 2 of Functional Programming in JavaScript
Fun Fun Function
Reduce basics - Part 3 of Functional Programming in JavaScript
Fun Fun Function
Destructuring: What, Why and How - Part 1 of ES6 JavaScript Features
Fun Fun Function
Reduce Advanced - Part 4 of Functional Programming in JavaScript
Fun Fun Function
Closures - Part 5 of Functional Programming in JavaScript
Fun Fun Function
Too many tools and frameworks!
Fun Fun Function
Currying - Part 6 of Functional Programming in JavaScript
Fun Fun Function
Recursion - Part 7 of Functional Programming in JavaScript
Fun Fun Function
Promises - Part 8 of Functional Programming in JavaScript
Fun Fun Function
Staying relevant as a programmer
Fun Fun Function
Factory Functions in JavaScript
Fun Fun Function
Composition over Inheritance
Fun Fun Function
Software needs to be better - FunFunFunction #1
Fun Fun Function
Unit testing: How to get your team started - FunFunFunction #2
Fun Fun Function
Straight-line code over functions - FunFunFunction #3
Fun Fun Function
Clojure - FunFunFunction #5
Fun Fun Function
The growth stages of a programmer - FunFunFunction #6
Fun Fun Function
5 tips to quickly understand a new code base - FunFunFunction #7
Fun Fun Function
Semicolons cannot save you! - FunFunFunction #9
Fun Fun Function
Functors - FunFunFunction #10
Fun Fun Function
Functors: I was WRONG! - FunFunFunction #11
Fun Fun Function
Questions and Answers - FunFunFunction #12
Fun Fun Function
Streams - FunFunFunction #13
Fun Fun Function
Prototypes in JavaScript - FunFunFunction #16
Fun Fun Function
Fast or Flexible? - FunFunFunction #17
Fun Fun Function
Coders are herd animals - FunFunFunction #18
Fun Fun Function
Weekend Kubernetes Shenanigans - FunFunFunction #19
Fun Fun Function
Monad - FunFunFunction #21
Fun Fun Function
Moar Weekend Shenanigans - FunFunFunction #23
Fun Fun Function
Questions and Answers - FunFunFunction #24
Fun Fun Function
Losing motivation - FunFunFunction #25
Fun Fun Function
LONGEST KUBERNETES SHENANIGANS! - FunFunFunction #26
Fun Fun Function
Fast code is NOT important - FunFunFunction #27
Fun Fun Function
Pair Programming a Facebook Messenger Bot - FunFunFunction #28
Fun Fun Function
Writing unit tests for personal projects? - FunFunFunction #29
Fun Fun Function
Let's Code a Pomodoro Button - FunFunFunction #30
Fun Fun Function
What editor do you use? - FunFunFunction #31
Fun Fun Function
Arrow functions in JavaScript - What, Why and How - FunFunFunction #32
Fun Fun Function
Is Programming Art? - MPJ's Musings - FunFunFunction #33
Fun Fun Function
Generators in JavaScript - What, Why and How - FunFunFunction #34
Fun Fun Function
Haskell Basics - FunFunFunction #35
Fun Fun Function
Haskell - Baby's first functions - FunFunFunction #36
Fun Fun Function
Is Big O relevant to you? - Q&A Part 1 - FunFunFunction #37
Fun Fun Function
How much are you allowed to Google? - Q&A Part 2 - FunFunFunction #38
Fun Fun Function
Haskell lists - FunFunFunction #39
Fun Fun Function
var, let and const - What, why and how - ES6 JavaScript Features
Fun Fun Function
Why are some programming languages popular? - MPJ's Musings - FunFunFunction #41
Fun Fun Function
Does a developer need to be nice? - MPJ's Musings - FunFunFunction #42
Fun Fun Function
bind and this - Object Creation in JavaScript P1 - FunFunFunction #43
Fun Fun Function
Examples of this and bind - Object Creation in JavaScript P2 - FunFunFunction #44
Fun Fun Function
Prototype basics - Object Creation in JavaScript P3 - FunFunFunction #46
Fun Fun Function
Separation of concerns RANT - MPJ's Musings - FunFunFunction #47
Fun Fun Function
Cellular Automata - Pair Programming - FunFunFunction #49
Fun Fun Function
The 'new' keyword - Object Creation in JavaScript P4 - FunFunFunction #50
Fun Fun Function
__proto__ vs prototype - Object Creation in JavaScript P5 - FunFunFunction #52
Fun Fun Function
Unity game pair programming - Let's code - FunFunFunction #53
Fun Fun Function
Throw out your tools - MPJ's Musings - FunFunFunction #54
Fun Fun Function
Unit tests vs. Integration tests - MPJ's Musings - FunFunFunction #55
Fun Fun Function
Object.create - Object Creation in JavaScript P6 - FunFunFunction #57
Fun Fun Function
Related AI Lessons
โก
โก
โก
โก
GBase 8a Backup and Restore Guide: Full and Incremental Backups with gbackup
Dev.to ยท Michael
5 Production Stacks for Live Data Ingestion at Scale (Without Getting Blocked)
Dev.to ยท Prithwish Nath
BI plus process mining for Insurance: seeing variants, bottlenecks, conformance,+B87 and recovery economics
Dev.to ยท Ananthapathmanabhan A
I built web analytics with no dashboard, only an MCP
Dev.to ยท Henrik Holen
Chapters (33)
0:01
A Data Visualization Journey
0:48
The Health and Wealth of Nations
1:21
Hans Rosling
2:35
Interactivity
3:12
Our Ambition
4:04
Observable Framework
5:02
Observable Plot
5:35
The UnTutorial Format
8:00
Prerequisites
8:14
Command Line Interface (CLI) Basics
8:23
JavaScript Basics
8:32
Node.js & Npm Basics
8:53
Static Web Site Publishing
9:05
Adding Comfort - Git, Static-Site Generators, Server-Side Rendering (SSR) Framew
11:20
Your Mission
11:27
Challenge 1 (of 3): Initialize Observable Framework
12:18
Observable Classic
13:06
Interactive Data Notebooks
15:37
Observable 2.0
17:05
Objective 1 (of 3): Initialize Observable Framework
18:12
Challenge 2 (of 3): Mine and Display Raw Data
18:50
Bonus Challenge 2.5 - Gapminder
19:17
Working with Data
20:26
Objective 2 (of 3): Mine and Display Raw Data
21:30
CodeCrafters - Learn by Building! & 40% off!
22:30
Build the Unbuildable
25:35
Challenge 3 (of 3): Scatter Plot the Data of your home country
25:56
What is a Plot?
26:29
Plot vs Graph
27:32
Thinking in Points
30:40
What to Plot with?
33:40
Objective 3 (of 3): Scatter Plot the Data of your home country
34:04
Achieving the Impossible
๐
Tutor Explanation
DeepCamp AI