codebar / tutorials

🗒 codebar's tutorials

http://tutorials.codebar.io/

257 stars 241 forks source link

d3.js tutorial #420

Open brunogirin opened 5 years ago

brunogirin commented 5 years ago

I've been coaching d3.js with one of the West London students and I feel that it could be a good advanced tutorial to go beyond the JavaScript basics. Here's a suggested lesson plan:

Lesson 1 - D3.js basics

Basic HTML structure
Append element (add an h1 to the document)
Simple selection
- Select (create ul + li, select the ul, set a property)
- selectAll (set a property on all the li)
Bind data + enter
Simple div with text content
Simple bars
Coloured bars
Load external data
- Local web server
- Bar width: value
- Text: title

Lesson 2 - Simple SVG

Basic SVG scatter plot
Scales
- linear
- time
- ordinal
Axes
Line graphs
Area graphs
Box plots

Lesson 3 - Visualisations

Histogram
Pie
Pack
Dendro
Stream (area stack)
Bar Stack (introduce data on sub-fields)

Lesson 4 - Dynamic Graphs

On
- Hover + highlight related sections to show how to use selections with “classed” applied and dynamic conditions that are true of false based on data fields
- Action on click
Update / exit

brunogirin commented 5 years ago

It would be good to fix #327 and #100 before doing this one as d3.js typically works with SVG.