Saltar al contenido

Crear un gr√°fico de Superficie 3D con Javascript

Valora este articulo.

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 .

¬°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>
Comparte

Loading...