Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

d3.js tutorial

Abierto
#420 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
25/100
Tipo de issue
Documentación
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
javascript

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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
Lenguaje dominante
JavaScript
Estrellas
268
Forks
240
Métricas de merge de PR
Sin PR fusionados en 30 d

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de codebar/tutorials

Todos los issues de codebar/tutorials

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.