Este Gráfico de Líneas muestra los mismos datos que el Gráfico de Barras Apiladas, pero utiliza puntos para marcar los puntos de datos y líneas para conectarlos. El conmutador (creado en MUI) cambia entre un simple gráfico de líneas y un gráfico de áreas. Ambas visualizaciones de datos usan casi el mismo código D3.js.
Los gráficos de área funcionan mejor como visualizaciones de datos cuando hay conjuntos de datos individuales: ayudan a los usuarios a ver con más claridad el valor total representado por los puntos de datos, porque éste es proporcional al tamaño del área sombreada. Sin embargo, cuando hay múltiples puntos de datos, las áreas sombreadas pueden ser confusas, porque un área puede oscurecer las áreas detrás de ella. D3.js permite un control total sobre esto: por ejemplo, podemos reducir la opacidad de algunas o todas las áreas, o incluso reducir la opacidad de aquellas áreas que se solapan con las de abajo. Los gráficos de área también pueden resultar confusos cuando muestran valores negativos, aunque D3.js proporciona formas de solventar este problema, como utilizar colores diferentes para los valores positivos y negativos.
Al igual que en el ejemplo del Gráfico de barras, es posible utilizar controles de interfaz de usuario para centrarse en un conjunto de datos concreto dentro de la visualización de datos y vincularlo al código D3.js. Sin embargo, en este caso, se utilizan casillas de verificación en lugar de botones de radio. Con los botones de radio sólo tienes que seleccionar una opción; sin embargo, con las casillas de verificación cada casilla puede seleccionarse o deseleccionarse independientemente de las demás. Por lo tanto, con esta interfaz de usuario es posible seleccionar cualquier permutación de conjuntos de datos: por ejemplo, un solo órgano, dos órganos o los tres órganos. La codificación es un poco más compleja, sobre todo cuando hay más de un pequeño número de puntos de datos.
D3.js también nos permite seleccionar la curva utilizada para conectar los datos. Lo normal sería elegir la curva más adecuada para la visualización de los datos y codificarla. Sin embargo, para ilustrar lo que es posible, hemos añadido un conjunto de botones de radio para que los usuarios puedan elegir la suya. Algunas curvas, como la Catmull-Rom, pasan por todos los puntos de datos, mientras que otras, como la Curva Base, no lo hacen. La ventaja de no pasar por todos los puntos de datos es que se pueden mostrar muy bien las tendencias de los datos. Por el contrario, la curva de Catmull-Rom incluye todos los puntos de datos reales, pero incluye los sobreimpulsos y los infraimpulsos, lo que hace más difícil ver las tendencias.
El coste de un D3.js Line Chart o Area Chart depende en gran medida de la medida en que necesita ser codificado a medida. Add-ons como tool-tips, animaciones personalizadas y demás añadirán un poco al coste pero mejorarán enormemente la experiencia del usuario. La página Precios le dará una idea general. La página Precios le dará una idea general. No obstante, póngase en contacto con nosotros para hablar con un desarrollador y decidir qué es lo mejor para usted.