javascript examples - Gráfico de 3 dimensiones(X, Y y Z)usando D3.js




templates api (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.


Answers

d3-3d , un complemento d3 que te ayuda a visualizar tus datos 3d. Espero que esto ayude a lograr tu objetivo.

d3-3d


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 ...



Un ejemplo de lo que se parece a lo que buscas es:

This

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

Prueba de evento D3 X3DOM

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.



Hemos utilizado el siguiente enfoque en uno de nuestros sitios web de http://seclab.stanford.edu/websec/framebusting/framebust.pdf

<style>
 body { 
 display : none   
}
</style>
<script>
if(self == top) {
document.getElementsByTagName("body")[0].style.display = 'block';
}
else{
top.location = self.location;
}
</script>




javascript d3.js svg graph 3d