Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

d3.js tutorial

Aberta
#420 1 comentário 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
5/5
Tempo estimado
Mais de uma semana
Facilidade para iniciantes
25/100
Tipo de issue
Documentação
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
javascript
Domínio
data-visualization, documentation

Direção de pesquisa

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.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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
Linguagem predominante
JavaScript
Estrelas
268
Forks
240
Nenhum PR com merge em 30d

Guia de contribuição

Nenhum guia de contribuição indexado para este repositório

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de codebar/tutorials

Todas as issues de codebar/tutorials

Issues semelhantes

Mais issues de JavaScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.