Estoy tratando de crear una interfaz que le permita a un usuario cargar archivos CSV y trazarlos usando plotly, solo usando javascript y obviamente la biblioteca plotly. Estoy cerca, pero mi sospecha es que hay un problema con la lectura asincrónica de los archivos csv. Como probablemente pueda ver, soy relativamente nuevo en javascript, por lo que cualquier comentario es bienvenido. Sin embargo, no puedo usar ninguna otra biblioteca o paquete de forma gráfica.

El problema es que la figura resultante solo muestra los valores inicializados (1).

EDITAR: la función de mapa de calor funciona en datos de prueba, o si modifico elementos específicos del objeto data_y , pero no cuando actualizo la información del archivo.

1. Hay un botón que permite cargar los archivos csv. En caso de que este código se active:

 <script> let picker = document.getElementById('picker'); picker.addEventListener('change', event => {0 file_list = event.target.files; var fig_y = []; for (let i = 0 ; i< file_list.length ; i++){ if(file_list[i].name == (".DS_Store")){continue} else { var ready = read_data(file_list[i]); fig_y.push(ready); } } console.log(fig_y); plot_heatmap(fig_y); } ); </script>

2. Los datos se leen usando este código.

 <script> function read_data(input){ var xs = 1212; // length of the data file_contents = []; var data_y = Array(xs).fill(1); let file = input; let reader = new FileReader(); reader.readAsText(file); reader.onload = function(){ file_contents = reader.result.split('\n'); // open the data file. First two lines contain a description of the data. for (let j = 2 ; j<file_contents.length-1 ; j++) { // the relevant data is the third number in the column var nr = file_contents[j].split(",").map(Number)[2]; data_y[j-2] = nr; } } return data_y; } </script>

3. el código que hace el mapa de calor plotly.

 <script> function plot_heatmap(data_z){ var data = [ { z: data_z, type: 'heatmap' } ]; Plotly.newPlot('raw_data', data); }; </script>