javascript - sunburst - d3js charts examples
Gráfico de 3 dimensiones(X, Y y Z) usando D3.js (6)
Estoy buscando un gráfico que tenga 3 dimensiones (x, y, yz) y use D3.js. Por favor, avíseme si hay algún sitio de visualización de datos donde pueda encontrar dicho gráfico o si hay uno en d3js.org que me haya perdido de alguna manera.
Los mejores ejemplos que pude encontrar (que fueron increíblemente simples) fueron:
Highcharts (dispersión 3d)
http://www.highcharts.com/demo/3d-scatter-draggable
Vis.js (varias opciones 3d como barra y punto)
http://visjs.org/examples/graph3d/playground/index.html
Simplemente suministre las coordenadas x, yyz, configure la configuración como lo desee y se estará riendo.
Parece que ha salido un nuevo ejemplo de algo más apropiado: el "3D". http://bl.ocks.org/supereggbert/aff58196188816576af0
Y aquí hay una adaptación que hice:
Recientemente, Stefan Nieke ha estado haciendo algunas cosas interesantes con su plugin d3-3d: https://bl.ocks.org/Niekes
Un ejemplo de lo que se parece a lo que buscas es:
Tenga en cuenta que este ejemplo utiliza X3DOM , un intento bastante nuevo de estandarizar la representación 3D en HTML, que no es compatible con todos los navegadores.
Algunos ejemplos de prueba adicionales sobre el uso de D3.js con X3DOM:
X3DOM en la prueba de devolución de llamada
Busque también X3DOM en el grupo Google D3.
Otro enfoque potencialmente interesante sería usar D3.js y Three.js, como aquí:
Mostrando pistas de GPS en 3D con three.js y d3.js
En general, D3.js está más orientado a la visualización de datos que a la visualización científica, esto significa que no cuenta con un amplio soporte para mostrar el espacio 3D (con la excepción de mostrar datos geográficos en 3D, que D3.js admite de manera excelente, pero esto no es lo que necesita).
Por ejemplo (este ejemplo no se relaciona directamente con sus ejemplos, es sólo para explicación): D3 proporciona algoritmo para el dibujo en 2D de árboles, pero no proporciona ningún aparato para la colocación en 3D de árboles y su posterior colocación en una pantalla 2D.
Si no está limitado a D3.js, quizás pueda lograr los mismos objetivos de forma más fácil y rápida con otras bibliotecas, escritos específicamente para fines similares a los suyos. Por ejemplo, puedes usar Pre3D . Eche un vistazo a este example . Pre3D no utiliza X3DOM, simplemente renderizado HTML en lienzo 2D. Creo que la animación (rotación) de sus gráficos en 3D es más suave que la del primer ejemplo de D3 / X3DOM.
Espero que esta respuesta te ayude.
La gráfica de dispersión 3D vinculada por VividD y Lars Kotthoff es probablemente el mejor ejemplo de lo que estás pidiendo, pero voy a ser contrario y sugiero que tal vez estás haciendo la pregunta incorrecta.
Intentar simular tres dimensiones espaciales en una pantalla plana siempre será imperfecto y dificultará la lectura de los datos. Sin embargo, es muy fácil graficar tres dimensiones de datos diferentes en D3. Utiliza los diseños horizontal y vertical para dos de sus variables de datos, y luego el tamaño, forma, color o sombreado para su tercera variable.
Si las tres variables de datos se representan mejor con números continuos, el mejor enfoque es utilizar un diagrama de dispersión de burbujas, donde las tres dimensiones de la pantalla son posiciones horizontales, posición vertical y tamaño de burbuja.
Aquí hay un ejemplo: también usa el componente interactivo en línea para agregar una cuarta dimensión que se muestra a través del movimiento:
Bubble Scatterplot - haz clic para original
Usted dijo que sus tres dimensiones son Cliente , Producto y contenido . No sé qué tipo de valor es el "contenido" (número o categoría), pero estoy bastante seguro de que "cliente" y "producto" son categorías.
Aquí hay un ejemplo donde se usan dos dimensiones categóricas para diseñar una tabla, luego cada celda de la tabla contiene un círculo del tamaño de la tercera dimensión numérica. Si su tercera variable es una categoría, puede usar una forma para indicar qué tipo de "contenido" (si corresponde) va con cada emparejamiento de "cliente" y "producto":
Bubble Matrix - haga clic para original
Aquí hay otro, donde la tercera dimensión se muestra por color en lugar de por tamaño. Los colores representan una variable continua, pero puede elegir fácilmente un conjunto de colores de alto contraste para representar categorías:
Color Matrix - haga clic para original
Por supuesto, un gráfico de barras apiladas simple es otra manera de mostrar dos categorías y una cantidad numérica:
Gráficos de barras apiladas: haga clic para ver el original
Y no tiene que detenerse en tres variables de datos. Si dos de las variables de datos son categorías o números que no te molestan agrupar en categorías, puedes graficar cuatro variables con un enfoque "pequeño múltiple", donde creas una tabla que representa las variables categóricas y luego repites un gráfico del otras dos variables dentro de cada celda de la tabla.
Me gusta esto:
Scatterplot Matrix - haga clic para original
O esto (donde la semana y el día de la semana son dos dimensiones de los datos, y la categoría / cantidad son los otros dos):
Pie Chart Small Multiples: haz clic para originales
Espero que te haya dado muchas ideas ...