tl;dr: Esse é um dos módulos que eu mais estava esperando para aprender, por que acho muito interessante visualização de dados.
Infelizmente achei esse módulo fraco, por que ele não ensinou muito nem sobre D3 nem sobre os dados, apenas foi um tutorial de cada um dos pontos para fazer um gráfico básico em D3 usando SVG.
D3: O que significa D3?
Data-Driven Documents
SVG: O que significa SVG?
Scalable Vector Graphics
DOM: O que significa DOM?
Document Object Model
DOM: O DOM representa o documento em uma árvore lógica.
DOM: Cada galho contém um nó e cada nó contêm objetos.
D3: Qual método seleciona um elemento?
d3.select()D3: Como se seleciona o elemento body?
d3.select("body")D3: Qual método adiciona um elemento a uma selection?
selection.append()D3: Adicione um H1 em uma selection.
selection.append("h1")D3: Qual método modifica o texto de uma selection?
selection.text()D3: Modifique o texto de uma selection para “texto”.
selection.text("texto")D3: Selecione o elemento body e adicione um H1 com o texto "Aprendendo D3".
d3.select("body").append("h1").text("Aprendendo D3")D3: Qual método seleciona um grupo de elementos?
d3.selectAll()D3: Selecione todos os elementos li da página.
d3.selectAll("li")D3: Qual método anexa dados a uma selection?
selection.data()D3: Adicione dados a selection.
selection.data(dados)D3: Qual método permite criar mais elementos a partir da data() passada?
selection.enter()D3: O que é um datum?
Um pedaço de informação.
D3: Como se usa um datum dentro de .text()?
Se passa uma callback function que recebe o datum a ser usando.
ex:.text(d => d)
D3: Qual método muda o estilo de uma selection?
selection.style()D3: Mude a fonte de uma selection para verdana.
selection.style("font-family", "verdana")D3: Qual método adiciona um atributo a selection?
selection.attr()D3: Adicione uma classe bar a selection.
selection.attr("class", "bar")D3: Como se altera a altura da selection de acordo com o datum?
selection.style("height", d => d)D3: Como se adiciona um elemento SVG a selection?
selection.append("svg")SVG: Qual elemento cria um retângulo?
<rect>D3: Como se adicionar um retângulo?
selection.append("rect")SVG: O atributo x posiciona o elemento em qual direção da tela?
Da esquerda para a direita.
SVG: O atributo y posiciona o elemento em qual direção da tela?
De cima para baixo.
SVG: Onde ficará posicionada um elemento na coordenada (0,0)?
No canto superior esquerdo do elemento que ele está contido.
D3: Qual é o primeiro parâmetro aceito pela função callback?
O data point, d.
D3: Qual é o segundo parâmetro aceito pela função callback?
O índice do data point atual, i.
D3: Qualquer chamada encadeada depois de .data() é executada para todos os elementos.
D3: Qual atributo muda a cor de um elemento SVG?
fillSVG: Qual elemento cria um texto?
<text>D3: Como se adiciona um elemento de texto a uma selection?
selection.append("text")SVG: Qual elemento cria uma tooltip?
<title>SVG: Qual elemento criar um circulo?
<circle>SVG: Qual atributo de define a coordenada x do centro do círculo?
cxSVG: Qual atributo de define a coordenada y do centro do círculo?
cySVG: Qual atributo de define o raio do círculo?
rD3: Para que servem as escalas?
Elas mapeiam o dados em pixels na tela.
D3: A escala linear é geralmente usada para dados quantitativos.
D3: Qual função define a escala como linear?
d3.scaleLinear()D3: O que é um relacionamento de identidade?
É quando se mapeia um valor de entrada para um diferente valor de saída.
D3: O que é o domínio de um conjunto de dados?
São os valores do início e do fim do conjunto de dados.
D3: Como se define um domínio que comece em 50 e termine em 480 para a escala atual?
scale.domain([50, 480])D3: Como se define o range de saída que comece em 10 e termine em 150?
scale.range([10, 150])D3: Qual método retorna o valor mínimo de um dataset?
d3.min()D3: Qual método retorna o valor máximo de um dataset?
d3.max()D3: Qual método retorna o valor de x na escala?
xScale()D3: Qual método retorna o valor de y na escala?
yScale()D3: Qual método adiciona um eixo abaixo do gráfico?
d3.axisBottom()D3: Qual método adiciona um eixo a esquerda do gráfico?
d3.axisLeft()