En esta publicación, le mostraré cómo crear un gráfico de superficie 3D con solo JavaScript usando Plotly.js. Una biblioteca de gráficos de JavaScript de código abierto que se construye sobre d3.js y es muy potente para hacer gráficos y tablas. Es la misma biblioteca que le mostré cómo crear un cuadro de actualización en tiempo real en el tutorial anterior .
Crear un gráfico de Superficie 3D con Javascript
¡Vamos a ver!
Preparar
Entonces, como de costumbre, si no está usando npm, descargaremos la última versión de Plotly.js de github y la incluiremos en su página usando la etiqueta de script y también crearemos un elemento div que desee mostrar en el gráfico.
<script src="plotly.min.js"></script> <div id="chart"></div>
Crear un gráfico de superficie
Para crear un gráfico de superficie, deberá proporcionar los datos en una matriz de formato de arrays como este.
Puede recuperar los datos de la tercera API, leerlos desde un archivo CSV o desde su base de datos, pero eventualmente deberá convertirlos en una matriz de matriz antes de pasar a la biblioteca. Entonces, en el primer ejemplo, voy a escribir una función para crear una matriz de matrices con datos aleatorios con un tamaño de 10. Y el segundo ejemplo, voy a leer los datos del archivo CSV.
Aquí está nuestra función para crear un valor de matriz aleatoria
function getData() {
var arr = [];
for(let i=0;i<10;i++)
arr.push(Array(10).fill().map(() => Math.random()))
return arr;
}
Ahora llamaremos Plotly.newPlot y pasaremos el elemento div gráfico, luego seguiremos con los datos y el objeto de definición de gráfico. Puede proporcionar los datos pasando la matriz a la propiedad z y configurar el tipo para que emerja
var data = getData();
Plotly.newPlot('chart', [{ //multiple traces
z: data,
type: 'surface'
}]);
Eso es. Aquí está el resultado.
Leer datos de gráfico de archivo CSV
En el escenario de la vida real, no usaríamos el valor aleatorio como este. Con Plotly, puede leer el archivo CSV para recuperar los datos utilizando la función Plotly.d3.csv. Puede pasar la URL o la ruta a su archivo CSV. seguir con una función de devolución de llamada cuando se cargó el CSV.
Plotly.d3.csv('data_file.csv', function(err,rows) {
console.log(rows); // data from csv file
});
El primer parámetro es el error (si hay alguno). Y el segundo es el objeto de las filas del archivo CSV. Los datos CSV deben estar en este formato con la primera fila y columna con valores de x e y
Aquí está el valor devuelto del archivo CSV si lo mostramos en la consola.
Verá que ahora tenemos el valor de cada fila, pero está en formato de objeto. Necesitamos convertirlo en matriz antes de poder pasarlo a Plotly. Puedes hacerlo fácilmente usando el método de mapa.
var data = [];
for(let i=0;i<rows.length;i++)
data.push(rows.map(row => row [i]));
Ahora tenemos los datos en el formato correcto. El último paso es crear el gráfico.
Plotly.newPlot('chart',[{
z: data,
type: 'surface'
}]);
Aquí el resultado:
Esto es solo lo básico y hay muchas opciones para personalizar su gráfico. Puedes visitar la documentación de Plotly e intentar experimentarla.
Código fuente
Ejemplo 1
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="plotly.min.js"></script>
</head>
<body>
<div class="wrapper">
<div id="chart"></div>
<script>
function getData() {
var arr = [];
for(let i=0;i<10;i++)
arr.push(Array(10).fill().map(() => Math.random()))
return arr;
}
var data = getData();
console.log(data);
Plotly.newPlot('chart', [{
z: data,
type: 'surface'
}]);
</script>
</div>
</body>
</html>
Ejemplo 2
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="plotly.min.js"></script>
</head>
<body>
<div class="wrapper">
<div id="chart"></div>
<script>
Plotly.d3.csv('data_file.csv', function(err,rows) {
console.log(rows);
var data = [];
for(let i=0;i<rows.length;i++) {
data.push(rows.map(row => row [i]));
}
console.log(data);
Plotly.newPlot('chart',[{
z: data,
type: 'surface'
}]);
});
</script>
</div>
</body>
</html>