Análisis a fondo de D3

• D3 in Depth es un material de aprendizaje basado en D3 6 y 7 que aborda el proceso de crear visualizaciones de datos personalizadas con D3.js
• Se enfoca más en la creación de visualizaciones personalizadas que en el uso de gráficos simples, y también permite aprender los componentes que forman parte de la visualización web
• Las bases de HTML, SVG, CSS y JavaScript se conectan con el trabajo en D3, lo que ayuda a comprender la representación de datos en la web
• También se conecta con materiales sobre tableros e historias de datos usando React, Chart.js y Leaflet, creando así un recorrido de aprendizaje de visualización con JavaScript
• Para quienes quieran aprender D3 a fondo, puede servir como material introductorio y de profundización que combina comprensión conceptual y práctica

---

Alcance de D3 in Depth

• D3 in Depth está dirigido a las versiones 6 y 7 de D3
• Permite aprender a crear visualizaciones de datos personalizadas usando D3.js
• También cubre HTML, SVG, CSS y JavaScript como elementos básicos necesarios para crear visualizaciones web

Recursos de visualización con JavaScript para ver junto con este

• Data Dashboards with JavaScript aborda cómo crear tableros de datos usando React, Chart.js y Leaflet
• Visualising Data with JavaScript trata sobre cómo crear gráficos e historias de datos usando Chart.js, Leaflet, D3 y React
• Una reseña de un lector valora mucho este material entre los libros de D3 y considera que su contenido es claro, fácil de seguir y sólido en conceptos

[GN⁺]

Opiniones de Hacker News

• La idea de hacer visualización de datos con D3 es buena, pero si quieres una herramienta de más alto nivel, vale la pena ver Observable Plot[1], creado por el equipo de D3
  Es una librería construida sobre D3 que añade muchas convenciones y funciones de conveniencia para crear gráficas, charts y plots
  Incluso más allá está Observable Framework[2], un generador de sitios estáticos para dashboards de visualización que soporta Plot, D3 y varias otras librerías
  1: https://observablehq.com/plot/
  2: https://observablehq.com/framework/
  • Últimamente más bien me atrae lo contrario. La mayoría ya sabe exactamente cómo debería verse el resultado, pero los frameworks por naturaleza ofrecen muchas configuraciones predefinidas, y en cuanto intentas salirte un poco de eso se vuelve doloroso
    Para varios tipos de plots, a menudo en realidad es más fácil manipular directamente los datos SVG, y tampoco es tan difícil
    Ojalá hubiera librerías o frameworks que hicieran más fácil manipular la salida SVG o canvas. Los cambios pequeños deberían ser muy fáciles, pero mientras más alto nivel es el framework, más difícil es salirse del camino marcado
  • Observable Plot es excelente. Es muy flexible y se usa de forma intuitiva, así que ahora lo prefiero sobre Plotly.js, que usaba antes
    La documentación está bastante bien, pero le falta una sección útil de referencia de API, así que no es tan fácil descubrir funcionalidades
  • Me pregunto si existe una interfaz de arrastrar y soltar tipo Matlab para visualización web
    Intento evitar al máximo crear gráficas con HTML5 canvas, así que estaría bien si hubiera una forma nueva de diseñarlas
  • Plot y Framework están atados al ecosistema de Observable, y eso tiene su propia curva de aprendizaje. Aprender D3 sigue siendo lo mejor en cuanto a flexibilidad y control
  • Me pregunto si este sitio web también se siente lento para otras personas. En páginas con mucho contenido, a menudo sentí tirones
    Edit: al activar la aceleración por hardware se volvió más fluido, pero incluso en un Ryzen 9 sigue yendo peor de lo esperado
• Me gusta D3 y he hecho mucho con él, pero cada vez que vuelvo después de no usarlo por unos años casi no recuerdo nada, la documentación me confunde aún más, y siento que vuelvo al punto de partida
  Si me pidieran resolver una ecuación diferencial parcial que no veo desde hace 10 años, creo que recuperaría el ritmo más rápido
  También me parece que la documentación de referencia de D3 es realmente terrible
  • Usé mucho D3 desde la versión 2 hasta la 7, y por todo el refactor de esos años, los ejemplos en línea ya eran difíciles de entender y todavía más difíciles de actualizar
    Aun así, ahora parece más estable. Empecé a entenderle mejor cuando dejé de usar solo D3 y comencé a escribir de forma más imperativa con Svelte+D3
    Me resultó más fácil entender los elementos generados, en lugar de inspeccionarlos después en las herramientas de desarrollador
    Este sitio ayuda para usar D3 junto con Svelte: https://svelte.recipes/
  • Siento que ese problema es mucho menor que con otras librerías de plotting
    El 80% de lo que hago se parece más a aplicaciones, 10% a sistemas y 10% a análisis de datos, y a veces hago un notebook de Jupyter por dos semanas y luego no lo vuelvo a ver en dos meses
    La mayoría de las librerías de plotting tienen muchas reglas arbitrarias que hay que memorizar, y por lo general incluyen varios lenguajes específicos de dominio pequeños. Es como si una cadena simple se interpretara de forma mucho más compleja que atoi
    Además, desde mi punto de vista, hay cosas mal resueltas en varias áreas, como decidir el rango de los ejes o manejar cantidades enormes de puntos
    D3 te obliga a hacer muchas cosas por ti mismo, pero la interfaz para hacerlo es conceptualmente intuitiva. En vez de usar código genérico ajeno, enorme y lleno de bugs, con una API que se siente como armar un barco dentro de una botella, prefiero hacer las cosas bien con D3.js
  • Usé muchísimo D3, incluso llegué a hacer integraciones para AngularJS y Angular. Es potente, pero siempre sentí que no es muy intuitivo
    Es fácil usarlo mal, difícil de depurar y difícil de entender
    Eso no significa que este problema tenga una solución fácil. Si tuviera que hacer gráficos basados en datos muy específicos, probablemente igual seguiría eligiendo D3
  • La interfaz humana de cálculo para el cálculo integral y diferencial se ha ido puliendo cuidadosamente a lo largo de varias generaciones. Basta leer un poco del texto original de Newton para ver de inmediato que no siempre fue así
    En realidad no parece justo comparar una API con ese estándar
  • Tuve la misma experiencia. Como tech lead hoy en día, insisto mucho en no usar librerías que requieran un nivel alto de conocimiento de dominio
    Hay que evitar en lo posible código que sea difícil de entender incluso para quien lo escribió, y D3 es un ejemplo representativo de ese tipo de librería
• Aunque ya no uses D3 en el trabajo, creo que sigue valiendo la pena aprenderlo. La idea central de esta librería es que la dimensión de aquello sobre lo que se proyectan los datos y la dimensión de los datos mismos siempre son distintas
  Por ejemplo, si dibujas datos en el rango de 0 a 100 en una pantalla 1080p de 1920x1080, en algún momento tienes que decidir cómo escalar los datos para ajustarlos a la proyección en pantalla
  Puedes hacer las cuentas tú mismo, o puedes dejar que una librería como D3 las haga
  Aunque no dibujes datos en la web, tarde o temprano vas a terminar dibujándolos en alguna parte, y te servirá encontrar herramientas con el mismo papel en ese ecosistema
  • Uno de los primeros programas en PHP que hice por mi cuenta fue un generador de PNG de una gráfica de distribución binomial
    Si no recuerdo mal, tenía que escalar los rectángulos que iba a dibujar en la gráfica para ajustarlos al tamaño del PNG que estaba generando
    Claro, era algo muy trivial y totalmente distinto de las cosas increíbles que puede hacer D3, pero fue una gran experiencia porque era la primera vez que hacía por mi cuenta algo que generaba imágenes en una computadora
  • Es una buena explicación para captar el concepto central
    Personalmente, D3 nunca me ha parecido intuitivo. Tal vez el problema es que intenta hacer demasiadas cosas en demasiados niveles de abstracción
    Si solo se tratara de proyectar datos, sería fácil de entender, pero parece que la proyección también está muy ligada a los ejes y a otros elementos
• El verdadero problema de D3 es que, como librería, en realidad no hace la visualización por ti. Solo proporciona funciones y ejemplos para que armes la visualización tú mismo, y ese requisito central exige una comprensión de nivel experto de JavaScript, especialmente de cierres y programación funcional

Creo que lo que mbostock llama la abstracción central de D3, select y el cálculo de diferencias de select, se parece más a una conveniencia para escribir un paint() reentrante.
Solo está adornado con que la sentencia de paint se expresa como una sentencia de builder, queda atada por sí misma dentro del alcance de select, y puede dividirse para varios efectos.
En particular, en los ejemplos de animación, es sorprendentemente poco lo que hace D3, y hay que encargarse uno mismo de usar un bucle externo y rastrear el estado en el tiempo.
D3 tampoco ofrece una abstracción para encapsular la visualización, ya sea como función o de otra forma, y esa parte queda como tarea para el lector.
Para los nuevos usuarios de D3, todo esto resulta una gran sorpresa o hasta un shock. Es parecido a introducir una base de datos nueva y encontrarte con que solo hay bibliotecas para entrada/salida de archivos, índices B-tree y optimizador de consultas, y que tienes que conectar todo tú mismo.

• Vale la pena mirar visx. En realidad, da para pensar que debería llamarse D4, es decir, Declarative Data Driven Documents.
  Es una forma de reemplazar con React el módulo de manipulación del DOM de D3, d3-select. El hecho de que esto sea posible y funcione bien es una prueba de que el diseño de D3 es excelente.
• D3 no es un conjunto de herramientas de gráficos como matplotlib o ggplot, sino una biblioteca de bajo nivel para crear visualizaciones de datos desde cero.
  Según el objetivo, puede ser la herramienta necesaria o no.
• Me gustaba D3.js, y la he usado como tecnología principal en decenas de proyectos de visualización de datos, tanto comerciales como personales. Pero ahora la sintaxis de renderizado ya se ve anticuada, al grado de recordar la era de jQuery.
  Sigo usando varias funciones auxiliares, como easing o scaling, pero los componentes reales los hago con frameworks modernos. En mi caso, con Vue 3 y TypeScript.
  Aun así, agradezco a D3.js por la época tan hermosa que me dio y por haberme enseñado muchas buenas prácticas de visualización de datos.
  Los valores predeterminados y demos de Mike Bostock eran una fuente de inspiración y un buen ejemplo de estándares de calidad, y además encajaban muy bien con el minimalismo de Tufte.
  • Si hay ejemplos de uso de funciones auxiliares de D3 junto con Vue 3 y TypeScript, me gustaría verlos.
• Después de aprender D3, si la idea es hacer algo parecido a un gráfico, creo que conviene pasarse a una herramienta equivalente como VisX o React y no mirar atrás.
  D3 y jQuery se parecen hasta cierto punto, y ambos tienden a convertirse en código espagueti. Herramientas como VisX añaden mucha estructura sobre el D3 que usan y ayudan a mantener las cosas en un estado razonable.
  • Llevo bastante tiempo usando D3 de forma intermitente y recién ahora estoy empezando con React y visx, y parece prometedor porque tiende muy bien el puente entre ambos.
    Eso sí, me pregunto si se siente limitante, en el sentido de que para hacer algo más personalizado hay que pelearse con la herramienta más que cuando usas D3 puro.
• D3 se inspiró en la gramática de gráficos de Wilkinson.
  Otra herramienta inspirada en GG es la muy apropiadamente llamada ggplot2, para el lenguaje R.
  Ofrece una interfaz mucho más concisa y cercana a lo funcional, y además encaja muy bien con una herramienta poco común llamada Rush para crear gráficos rápidamente pasando CSV por un pipe, es decir, un one-liner de R para shell.
• Sigo buscando una solución de diagramas y gráficos que no sea completamente basada en la web. Tiene que poder ejecutarse como CLI o biblioteca y generar SVG o PNG como salida.
  Estas herramientas normalmente dependen de funciones del navegador o usan soluciones torpes de renderizado del lado del servidor con navegadores headless para generar del lado servidor.
  En particular, estaría bien poder generar diagramas de Venn de forma programática. Curiosamente, casi no hay nada en ese espacio.
  Algunas bibliotecas de gráficos en JavaScript sí lo soportan, pero en general parece haber muy poco soporte.
  gnuplot se ve bien, pero no tiene soporte para diagramas de Venn.
• Este material fue lo único que me permitió entender D3. El autor también responde rápido y ayuda mucho.
• He oído muchas buenas opiniones sobre Vega[1], que es una herramienta construida sobre D3.
  También es una dependencia de OpenSearch Dashboards, así que permite a los usuarios crear dashboards personalizados sobre logs y datos de observabilidad[2].
  Parece que la biblioteca Vega puede aliviar hasta cierto punto los problemas de curva de aprendizaje de D3 que mencionan otras personas.
  [1] https://vega.github.io/vega/docs/
  [2] https://opensearch.org/docs/latest/dashboards/visualize/vega...