d3.js tutorial

未关闭

#420 创建于 2018年12月1日 1 条评论 0 个 reaction 已指派 0 人在 GitHub 查看

还没有人认领这个 Issue。

评估

难度: 5/5
预计耗时: 一周以上
新手友好度: 25/100

Issue 类型: 文档
描述清晰度: 基本清楚
活跃度: 停滞
技术栈: javascript
领域: data-visualization, documentation

调研方向

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.

由索引模型根据 Issue 内容生成。

描述

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

主要语言: JavaScript
星标: 268
派生: 240
PR 合并指标: 30 天内没有已合并 PR

贡献指南

这个仓库没有索引到贡献指南

从这里开始

先读完整个 Issue，再读项目的贡献指南。
在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
Fork 仓库，在一个分支上完成修改。
提交 Pull Request，并在描述里引用这个 Issue 编号。

codebar/tutorials 的其他 Issue

Suggestion: add FrontendAtlas Essential 60 to Other Useful Resources 未关闭

难度 1/5 1 小时以内新手友好度 75/100

codebar/tutorials#517 · 2026年9月1日创建
Add a Python tutorial to explain modules/imports 未关闭

难度 3/5 1-2 天新手友好度 62/100

codebar/tutorials#512 · 1 条评论 · 2026年6月2日创建
Enhance Lesson 5 with Fetch API and Interactive Example 未关闭

难度 2/5 1-3 小时新手友好度 25/100

codebar/tutorials#489 · 2 条评论 · 2025年3月2日创建
JS 4: Task 2 BBC api no longer available 未关闭

难度 3/5 1-2 天新手友好度 25/100

codebar/tutorials#461 · 2020年5月14日创建
getting started tutorial: change windows browser from IE to Edge (MINOR) 未关闭

难度 1/5 1 小时以内新手友好度 45/100

codebar/tutorials#456 · 2020年3月4日创建

查看 codebar/tutorials 的全部 Issue

相似的 Issue

[BUG] @mastra/inngest: errors thrown inside durable steps lose their original stack (and error type) — Inngest only sees the wrapper frame 未关闭

bug customer-eng Durable Agents Inngest status: needs triage

难度 2/5 1-3 小时新手友好度 82/100

mastra-ai/mastra#24748 · 1 条评论 · 2026年9月22日创建
[optimization:agents-md-curator] Trim and correct root ambient context in github/gh-aw-firewall (LOGGING.md dead link, stale test claim, ~12% context reduction) 未关闭

optimization optimization:agents-md-curator

难度 2/5 1-3 小时新手友好度 75/100

githubnext/gh-aw-cao#13475 · 2026年9月22日创建
[BUG]: "Clear All" in Settings doesn't clear the saved analysis, old data comes back after reload 未关闭

bug

难度 2/5 1-3 小时新手友好度 88/100

AOSSIE-Org/OrgExplorer#253 · 1 条评论 · 2026年9月22日创建
isolated-declarations: TS9025 on an optional parameter property typed `readonly T[]`, which tsc 7 accepts 未关闭

难度 2/5 1-3 小时新手友好度 88/100

oxc-project/oxc#26944 · 2026年9月22日创建
bug report: ai observability - dry-running a paused evaluation emails the whole org 未关闭

ai-observability bug team/ai-observability

难度 2/5 1-3 小时新手友好度 78/100

PostHog/posthog#104687 · 2026年9月22日创建

更多 JavaScript Issue