d3.js tutorial
Nobody has claimed this yet.
Assessment
- Difficulty
- 5/5
- Estimated time
- Over a week
- Newbie friendliness
- 25/100
- Issue type
- Documentation
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- javascript
- Domain
- data-visualization, documentation
Research direction
Use the suggested four-lesson plan as the scope, covering D3.js basics, SVG, visualisations, and dynamic graphs. First review the repository's existing tutorial structure and examples, then define the tutorial's completed lesson content and exercises around the topics listed in the issue.
Written by the indexing model from the issue text.
Description
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
dataon 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
- Dominant language
- JavaScript
- Stars
- 268
- Forks
- 240
- PR merge metrics
- No merged PRs in 30d
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from codebar/tutorials
-
Difficulty 1/5 Under an hour Newbie friendliness 75/100
-
Difficulty 3/5 1-2 days Newbie friendliness 62/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 25/100
-
Difficulty 3/5 1-2 days Newbie friendliness 25/100
-
Difficulty 1/5 Under an hour Newbie friendliness 45/100
All issues in codebar/tutorials
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
palladius/rails8-app-on-gcp#145 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
dotenvx/dotenv-vscode#139 ·
-
test-change-proposal
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
web-platform-tests/interop#1455 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
corsairdev/corsair#1764 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100