Análise aprofundada de D3

• D3 in Depth é um material de estudo baseado no D3 6 e 7, que aborda o processo de criação de visualizações de dados personalizadas com D3.js
• Em vez de focar no uso de gráficos simples, concentra-se na criação de visualizações personalizadas e também ensina os componentes da visualização na web
• Como os fundamentos de HTML, SVG, CSS e JavaScript estão conectados ao trabalho com D3, ajuda a entender a representação de dados baseada na web
• Também se conecta a materiais sobre dashboards e narrativas de dados usando React, Chart.js e Leaflet, permitindo criar um fluxo de aprendizado de visualização em JavaScript
• Para leitores que querem aprender D3 em profundidade, pode ser usado como material introdutório e avançado que combina compreensão conceitual e prática

---

Escopo abordado por D3 in Depth

• D3 in Depth tem como alvo as versões 6 e 7 do D3
• É possível aprender a criar visualizações de dados personalizadas usando D3.js
• Também aborda HTML, SVG, CSS e JavaScript como elementos básicos necessários para criar visualizações baseadas na web

Materiais relacionados de visualização em JavaScript

• Data Dashboards with JavaScript aborda como criar dashboards de dados usando React, Chart.js e Leaflet
• Visualising Data with JavaScript aborda como criar gráficos e narrativas de dados usando Chart.js, Leaflet, D3 e React
• Uma avaliação de leitor considera este material muito bem avaliado entre os livros sobre D3, com conteúdo claro, fácil de acompanhar e conceitualmente sólido

[GN⁺]

Opiniões no Hacker News

• A ideia de fazer visualização de dados com D3 é boa, mas se você quiser uma ferramenta um pouco mais de alto nível, vale dar uma olhada no Observable Plot[1], criado pela equipe do D3
  É uma biblioteca que adiciona muitas convenções e facilidades para criar gráficos, charts e plots sobre o D3
  Indo além, há também o Observable Framework[2], um gerador de sites estáticos para dashboards de visualização que dá suporte a Plot, D3 e várias outras bibliotecas
  1: https://observablehq.com/plot/
  2: https://observablehq.com/framework/
  • Hoje em dia, o que me atrai é quase o oposto. Na maioria das vezes, você já sabe exatamente como o resultado deve aparecer, mas frameworks, por natureza, oferecem muitas configurações pré-definidas, e basta tentar sair um pouco delas para a coisa ficar dolorosa
    Para vários tipos de plots, muitas vezes é realmente mais fácil manipular diretamente os dados SVG, e isso nem é tão difícil
    Eu gostaria que houvesse uma biblioteca ou framework que facilitasse a manipulação de saída em SVG ou canvas. Pequenas alterações deveriam ser muito fáceis, mas quanto mais alto nível é o framework, mais difícil fica sair do caminho prescrito
  • Observable Plot é excelente. É muito flexível e intuitivo de usar, então hoje prefiro ele ao Plotly.js que usava antes
    A documentação também é bem razoável, mas falta uma seção de referência de API realmente útil, o que não ajuda muito a descobrir recursos
  • Fico curioso se existe uma interface de arrastar e soltar ao estilo Matlab para visualização na web
    Tento evitar ao máximo criar gráficos com canvas HTML5, então seria bom haver uma abordagem redesenhada para isso
  • Plot e Framework ficam presos ao ecossistema Observable, que tem sua própria curva de aprendizado. Aprender D3 é melhor em termos de flexibilidade e controle
  • Fico pensando se este site também parece engasgar para outras pessoas. Em páginas com muito conteúdo, notei travamentos frequentes
    Edit: ao ativar aceleração por hardware ficou mais suave, mas mesmo em um Ryzen 9 ainda engasga mais do que eu esperava
• Gosto de D3 e já criei muita coisa com ele, mas sempre que passo alguns anos sem usar e volto, quase não lembro de nada, a documentação me deixa ainda mais confuso, e sinto que voltei à estaca zero
  Acho que, se me pedissem para resolver uma equação diferencial parcial que não vejo há 10 anos, eu recuperaria o jeito mais rápido
  Também acho a documentação de referência do D3 realmente terrível
  • Usei bastante D3 da versão 2 à 7, e as refatorações ao longo desse período tornaram exemplos online, que já eram difíceis de entender, ainda mais difíceis de atualizar
    Ainda assim, hoje parece mais estável. Comecei a pegar o jeito quando passei a escrever num estilo mais imperativo com Svelte+D3, em vez de usar só D3
    Ficou mais fácil entender os elementos gerados do que inspecioná-los depois nas ferramentas de desenvolvedor
    Este site ajuda a usar D3 com Svelte: https://svelte.recipes/
  • Sinto que esse problema é bem menor nele do que em outras bibliotecas de plotagem
    No meu trabalho, 80% é mais aplicação, 10% sistemas e 10% análise de dados, e às vezes faço notebooks Jupyter por duas semanas e depois passo dois meses sem olhar para eles
    A maioria das bibliotecas de plotagem tem muitas regras arbitrárias para memorizar e, em geral, várias pequenas linguagens específicas de domínio. É como strings simples sendo interpretadas de forma muito mais complexa do que atoi
    Além disso, em várias áreas — definição de intervalo dos eixos, lidar com um número enorme de pontos etc. — há coisas que, do meu ponto de vista, parecem erradas
    O D3 obriga você a fazer muita coisa manualmente, mas as interfaces para isso são conceitualmente intuitivas. Prefiro fazer direito com D3.js a usar código genérico inchado e cheio de bugs de outra pessoa, com uma API que parece montar um navio dentro de uma garrafa
  • Usei bastante D3, a ponto de criar integrações para AngularJS e Angular. Ele é poderoso, mas sempre achei muito pouco intuitivo
    É fácil usar errado, difícil de depurar e difícil de entender
    Isso não quer dizer que o problema seja fácil de resolver. Se eu precisar criar gráficos muito específicos baseados em dados, ainda é bem provável que eu escolha D3
  • As interfaces humanas de cálculo para cálculo diferencial e integral foram refinadas cuidadosamente ao longo de várias gerações. Basta ler um pouco dos textos originais de Newton para perceber imediatamente que nem sempre foi assim
    Comparar uma API com esse padrão, na verdade, não parece justo
  • Tive a mesma experiência. Hoje, como tech lead, insisto bastante para não usarmos bibliotecas que exijam um alto nível de conhecimento de domínio
    Devemos evitar ao máximo código que nem mesmo o autor consegue entender direito, e D3 é um exemplo emblemático desse tipo de biblioteca
• Acho que vale a pena aprender D3 mesmo que você acabe não usando em produção. O ponto central dessa biblioteca é que o alvo da projeção dos dados e a dimensão dos próprios dados são sempre diferentes
  Por exemplo, se você vai desenhar dados no intervalo de 0 a 100 em uma tela 1080p de 1920x1080, em algum momento precisa decidir como escalar os dados para a projeção na tela
  Você pode calcular a matemática manualmente ou delegar esse cálculo a uma biblioteca como D3
  Mesmo que você não desenhe dados na web, um dia vai precisar desenhar dados em algum lugar, e será útil encontrar, nesse ecossistema, uma ferramenta que cumpra o mesmo papel
  • Um dos primeiros programas em PHP que fiz sozinho foi um gerador de PNG de gráfico de distribuição binomial
    Lembro que precisei escalar os retângulos do gráfico de acordo com o tamanho do PNG que estava criando
    Claro que era algo muito simples e não tinha nada a ver com as coisas incríveis que o D3 consegue fazer, mas foi uma experiência legal de criar por conta própria uma imagem no computador pela primeira vez
  • É uma boa explicação para entender o conceito central
    Pessoalmente, D3 nunca me pareceu intuitivo. Talvez o problema seja tentar fazer coisas demais em níveis demais de abstração
    Se fosse apenas uma questão de projetar dados, seria fácil de entender, mas parece que a projeção fica muito amarrada aos eixos e a outros elementos
• O verdadeiro problema do D3 é que, como biblioteca, ele na prática não faz visualização por você. Ele só fornece funções e exemplos para você compor a visualização por conta própria, e o requisito central para isso é uma compreensão em nível de especialista de JavaScript, especialmente closures e programação funcional

Considero que o cálculo de diferença entre select e select, que mbostock chama de abstração central do D3, é mais um mecanismo de conveniência para escrever um paint() reentrante
É só que as instruções de paint são expressas como instruções de builder, ficam elas próprias dentro do escopo de select e vêm com o enfeite de poderem ser divididas para vários efeitos
Em especial nos exemplos de animação, o que o D3 faz é surpreendentemente pouco; usar um loop externo e rastrear o estado ao longo do tempo fica por sua conta
O D3 também não oferece uma abstração para encapsular a visualização, seja como função ou em outra forma; essa parte fica como exercício para o leitor
Para novos usuários de D3, tudo isso chega como uma grande surpresa ou choque. É parecido com adotar um novo banco de dados e descobrir que ele só tem bibliotecas de E/S de arquivos, índices B-tree e otimizador de consultas, e que você precisa conectar tudo manualmente

• Vale a pena dar uma olhada no visx. Na verdade, talvez devesse se chamar D4, isto é, Documentos Declarativos Orientados a Dados (Declarative Data Driven Documents)
  É uma forma de substituir o d3-select, o módulo de manipulação do DOM do D3, por React. O fato de isso ser possível e funcionar bem é uma prova de que o design do D3 é excelente
• D3 não é uma coleção de ferramentas de gráficos como matplotlib ou ggplot, mas uma biblioteca de baixo nível para criar visualizações de dados do zero
  Dependendo do objetivo, pode ser ou não a ferramenta necessária
• Eu gostava de D3.js e o usei como tecnologia central em dezenas de projetos de visualização de dados, incluindo comerciais e pessoais. Mas hoje a sintaxe de renderização parece antiquada, a ponto de lembrar a era do jQuery
  Ainda uso várias funções auxiliares, como easing e escalonamento, mas os componentes reais estou criando com frameworks atuais. No meu caso, Vue 3 e TypeScript
  Ainda assim, agradeço ao D3.js pelos belos tempos e por ter ensinado várias boas práticas de visualização de dados
  Os padrões e demos de Mike Bostock eram inspiração e exemplos de bons critérios, e combinavam bem com o minimalismo de Tufte
  • Gostaria de ver exemplos que usem funções auxiliares do D3 junto com Vue 3 e TypeScript
• Depois de aprender D3, partindo da premissa de criar algo parecido com gráficos, acho melhor migrar para uma ferramenta equivalente que não seja VisX ou React e não olhar para trás
  D3 e jQuery são parecidos em certa medida, e ambos tendem a virar código espaguete. Ferramentas como VisX acrescentam bastante estrutura em cima do D3 que utilizam e ajudam a manter as coisas sane
  • Usei D3 de forma intermitente por bastante tempo e agora estou começando com React e visx; ele parece promissor por preencher bem a lacuna entre os dois
    Mas fico curioso se, ao tentar fazer algo mais customizado do que com D3 puro, ele acaba parecendo limitante, como se você tivesse que brigar com a ferramenta
• D3 foi inspirado pela gramática dos gráficos de Wilkinson
  Outra ferramenta inspirada pela GG é o apropriadamente chamado ggplot2, para a linguagem R
  Ela oferece uma interface muito mais concisa e próxima do funcional, e também combina bem com uma ferramenta incomum chamada Rush, que permite criar gráficos rapidamente passando CSV por pipe — basicamente um one-liner de R para o shell
• Continuo procurando uma solução de diagramas e gráficos que seja totalmente não baseada na web. Ela deve poder ser acionada por CLI ou como biblioteca e gerar SVG ou PNG
  Essas ferramentas normalmente dependem de recursos do navegador ou usam soluções desajeitadas de renderização server-side com navegador headless para geração no servidor
  Em especial, seria bom poder gerar diagramas de Venn programaticamente. Curiosamente, quase não há nada nessa área
  Algumas bibliotecas de gráficos em JavaScript até oferecem suporte, mas, no geral, o suporte parece quase inexistente
  gnuplot parece bom, mas não tem suporte a diagramas de Venn
• Só este material me fez entender D3. O autor também responde rápido e ajuda bastante
• Ouvi muitos elogios sobre Vega[1], uma ferramenta construída sobre D3
  Ela também é uma dependência do OpenSearch Dashboards, permitindo que usuários criem dashboards customizados sobre logs e dados de observabilidade[2]
  A biblioteca Vega parece poder aliviar em certa medida o problema da dificuldade de aprendizado do D3 que outras pessoas mencionam
  [1] https://vega.github.io/vega/docs/
  [2] https://opensearch.org/docs/latest/dashboards/visualize/vega...