Esse é um guia curtinho de como começar com javascript para visualização de dados com D3. O ambiente que usaremos é o Observable, que permite a criação de notebooks interativos com javascript. Notebooks são uma forma muito mais natural de usar software para visualização e análise de dados em geral (vide R Notebook e o Jupyter para R e Python), e o Observable é um notebook para desenvolvimento web.

Por onde começar

Se você está iniciando em javascript, o Observable é um bom ambiente para começar a aprender. Esse manual tem uma série de notebooks com uma introdução guiada. Estude os 4 primeiros notebooks da seção Start Here sem se preocupar muito com código D3 e (principalmente) menções a Latex que apareçam. Tendo entendido esse básico, você pode revisar como funcionam HTML, o DOM e CSS nesse notebook (mas veja que a partir de certo ponto ele começa a repetir alguns dos anteriores).

Se você já programa em javascript, provavelmente dá pra começar pela Five Minutes Introduction do Observable, dar uma olhada nessa outra introdução rápida e em seguida examinar as diferenças entre o Observable e javascript fora dele.

Alguns pontos de javascript

Há muitas maneiras de programar em javascript, e o estilo que usaremos em D3 precisará de familiaridade com alguns pontos com os quais você pode não ter costume. Eu criei esse notebook para revisar esses pontos.