Cada vez que trabajo en un proyecto con las visualizaciones, los gerentes de proyecto generalmente reaccionan con horror cuando digo que no voy a usar D3. ¿Por qué hay preocupación? ¿Por qué elegiría no usar D3?
al responder a estas preguntas, tenemos que entender el contexto en el que se creó D3., D3 fue lanzado por primera vez en 2011, y fue bastante innovador en ese momento.
normalmente lo que se vería, son bibliotecas que proporcionan gráficos fuera de la caja y con una lista masiva de opciones. Esto puede funcionar, pero el problema es que cada vez que alguien tiene un nuevo requisito, una opción tendría que ser añadida y soportada. Eventualmente terminas con lo que es efectivamente un lenguaje donde usas varios objetos para definir un gráfico. D3 tomó un enfoque diferente, en lugar de darle los componentes completos, le da funciones de ayuda basadas en datos para crear esos componentes usted mismo.,
en este momento, las bibliotecas como jQuery y Backbone eran populares. Crear sus propios gráficos utilizando estas bibliotecas habría sido un desafío, especialmente si desea que sean dinámicos. Los navegadores apenas estaban adoptando nuevos estándares CSS modernos como transitions, y las propiedades más modernas como flex box todavía estaban a edades de ser implementadas.
D3 resolvió muchos de estos problemas, y sin duda fue el enfoque más fácil para implementar visualizaciones en ese momento. Sin embargo, mucho ha cambiado desde entonces., Tenemos nuevos marcos modernos que utilizan conceptos más flexibles y expresivos como el DOM virtual, y CSS tiene muchas nuevas capacidades para el diseño y las animaciones.
en lugar de saltar automáticamente a D3, permítanme enumerar algunas razones por las que debe reconsiderar su uso.
he trabajado con D3 numerosas veces en los últimos años, e implementado todo tipo de visualizaciones con él. Entiendo los conceptos generales sobre D3, y todavía me cuesta trabajar con él. Todo el mundo con el que he trabajado, desde desarrolladores junior hasta sénior, también tienen problemas con ello., Lo que muchas personas, incluyéndome a mí, es que encontramos un ejemplo en línea que aproximadamente coincide con lo que estamos buscando, y modificamos el ejemplo para satisfacer nuestras necesidades.
si queremos agregar alguna funcionalidad personalizada, probablemente haremos más búsquedas y encontraremos algo que parezca correcto, intentaremos entender cómo funciona y seguiremos modificándolo hasta que haga lo que queremos que haga.
¿te suena familiar? Por otro lado, los desarrolladores en estos días están muy familiarizados con las bibliotecas Dom virtuales y están familiarizados con las plantillas., ¿No tiene más sentido aprovechar esas habilidades, en lugar de introducir una biblioteca que requiere una forma de pensar completamente diferente?
es más fácil de lo que crees
Cuando piensas por primera vez en crear tus propios gráficos desde cero, es común sentirse preocupado y aterrorizado. Puede sonar como un componente muy complicado de crear, pero realmente no lo es cuando lo descompones. Tomemos un ejemplo de un gráfico de líneas. Así es como haría un gráfico de líneas en D3:
fuente: bl.ocks.,org
así es como haría algo como esto usando Preact:
y el CSS:
Source: JSFiddle
hay un poco de código, pero solo Estoy utilizando las herramientas que ya están a mi disposición, en este caso, mi biblioteca de vistas que es preact (puede ser cualquier cosa, react, vue, angular, etc.), y moderno herramientas CSS como flexbox.,
el ejemplo de D3 requiere aprender muchos conceptos sobre D3. Esto último solo requiere usar el conocimiento que ya tiene sobre su biblioteca de vistas. Yo diría que es más fácil de mantener que el ejemplo de D3, ya que cualquiera que conozca la biblioteca de vistas debería ser capaz de saltar a la base de código y comenzar a hacer modificaciones.
no te olvides del tamaño del paquete
dependiendo del tipo de gráfico y la cantidad de agitación de árboles que puede optimizar tu paquete, D3 en el peor de los casos importará más de 70 KB de código. Esto puede tener impactos en la carga de su sitio., Así que si bien es cierto que estás escribiendo Más código que el ejemplo original de D3, en general estás distribuyendo menos código que si hubieras usado D3.
en general, al usar código de terceros, siempre es importante recordar los costos de usar ese código. Si solo requiere una sola función de una biblioteca, ¿importaría toda la biblioteca para esa funcionalidad?, Sí, no siempre debes reinventar la rueda, pero debes considerar el tiempo para aprender esa biblioteca, el tamaño que agrega a tu paquete, la licencia de esa biblioteca, el soporte que tendrá esa biblioteca, la confiabilidad de los mantenedores, la capacidad de corregir errores de manera oportuna, etc.
Canvas y HTML son a menudo mejores que SVG
Si has notado en el ejemplo anterior, usamos una combinación de HTML y SVG. Por alguna razón, la gente intentará implementar gráficos completos usando SVGs, pero realmente no hay necesidad de hacerlo. CSS es mucho más potente que SVG en estos días.,
por ejemplo, SVG no admite el ajuste de texto de forma nativa. Si quisiéramos hacer text-wrapping, tendríamos que calcularlo en JavaScript:
Source: bl.ocks.org
con HTML por otro lado, siempre y cuando white-space se establezca en normal, simplemente se envolverá de forma natural.
Los elementos tales como círculos y rectángulos se pueden hacer en HTML y CSS. Usted puede usar transform y border-radius para crear todo tipo de formas., Si quería hacer un gráfico de barras en D3 con dos esquinas redondeadas, no podría usar rect porque redondeará las cuatro esquinas, en lugar de las dos esquinas que quería redondear. Su única opción sería usar path.
la única razón por la que usaría etiquetas SVG, es debido a la etiqueta path. Sigue siendo la única forma limpia de crear formas arbitrarias sin equivalente HTML.
si necesita rendimiento adicional, también hay que considerar la etiqueta canvas., Con canvas tendrás que codificar interacciones básicas tú mismo, pero viene con la ventaja de no tener la sobrecarga de HTML o SVG que pueden consumir memoria y ser más lentos de actualizar. Puede actualizar los píxeles individuales en el lienzo como desee, para optimizar su visualización y escalarla. Las nuevas API del navegador como OffscreenCanvas también ayudarán a aumentar el rendimiento cuando se usan dentro de los trabajadores.
pero Canvas no escala como SVG?,
una cosa muy común que he escuchado con bastante frecuencia, es que canvas no es adecuado para visualizaciones porque no escala tan bien como SVG. Bajo el uso normal del lienzo, si se acerca o se aleja de una página o utiliza un navegador que muestra un DPI más alto, el lienzo saldrá pixelado y borroso.
esto sucede porque cuando creas tu lienzo, tienes que definir con cuántos píxeles quieres que dibuje tu lienzo., Cuando configuramos los atributos width y height puede parecer que estamos configurando el tamaño CSS, pero en realidad estamos configurando el tamaño del espacio de dibujo del lienzo. Estos no son lo mismo.
normalmente sus píxeles CSS se establecerían en el mismo tamaño que el espacio de dibujo del lienzo, pero cuando se acerca/aleja con su navegador, verá el mismo problema de nuevo. La solución es usar window.devicePixelRatio y escalar el espacio de dibujo del lienzo.
fuente: JSFiddle
Usando la relación de píxeles, podemos aumentar el espacio de dibujo para el lienzo. Pero aumentar el espacio de dibujo no es suficiente, también necesitamos decirle al lienzo que las operaciones de dibujo futuras deben escalarse a la relación de píxeles. Esto resolverá todos los problemas de escalado.,
¿Puedes decir cuáles son canvas y cuáles son SVG?
Conclusion
como puede ver, hay numerosas razones por las que D3 está bastante desactualizado ahora para muchos casos de uso comunes. La web ha evolucionado significativamente desde su lanzamiento., Si está haciendo gráficos simples como donuts, gráficos de barras, gráficos de líneas, gráficos de dispersión, etc., considere ver si puede implementarlos utilizando su marco existente. No hay nada realmente que D3 le proporcionará para esos casos de uso. En términos de mantenimiento, es probable que su código sea más fácil de mantener en lugar de más difícil de mantener, y si necesita hacer algún cambio, debería ser trivial hacer esos cambios.
no hay razón para que los gerentes de producto se sientan preocupados por no usar D3, y usted tampoco debería preocuparse.
Gracias por leer!,
Updates
- Artículo actualizado para agregar » pero Canvas no escala como SVG?” apartado.