javascript - ScatterChart en NVD3-Lectura de los datos del archivo csv

d3.js scatter-plot

Question

Intento leer los datos del archivo csv y quiero visualizar estos datos con un scatterChart en NVD3.

Me habría vinculado a un JSfiddle o algo similar, pero no sé cómo incluir un archivo csv en estos IDEs de JavaScript en línea. ¿Es eso posible?

El archivo csv tiene el siguiente formato:

   country,y,x
   Algeria,91.8,15.7
   Bahrain,98.2,49.3
   Jordan,99.1,55.0
   Kuwait,98.6,57.4
   Lebanon,98.7,58.6

Mi mejor estimación para el código para leer el archivo csv es:

var scatterdata = [ 
  {
    key    : "Group1",
    values : []//{x:"",y:""}
  }
];

d3.csv("literacyScatterCountrynames.csv", function (error, csv) {
  if (error) return console.log("there was an error loading the csv: " + error);
  console.log("there are " + csv.length + " elements in my csv set");

scatterdata[0].values["x"] = csv.map(function(d){return [+d["x"] ]; });
scatterdata[0].values["y"] = csv.map(function(d){return [+d["y"] ]; });

Veo mis datos en el DOM y se ve bien pero el gráfico no se muestra y en su lugar dice ''No hay datos disponibles''. en negrita donde debería estar el gráfico.

Ni aquí en StockOverflow, ni en la documentación NVD3 en Github, ni en el útil sitio web en gráficos NVD3 de cmaurer en GitHub podría encontrar más información sobre cómo hacerlo.

Answer 1

Puede colocar los datos en una variable, como Mike describe aquí :

name    value
Locke   4
Reyes   8
Ford    15
Jarrah  16
Shephard    23
Kwon    42

está representado de esta manera:

var data = [
  {name: "Locke",    value:  4},
 {name: "Reyes",    value:  8},
 {name: "Ford",     value: 15},
 {name: "Jarrah",   value: 16},
 {name: "Shephard", value: 23},
 {name: "Kwon",     value: 42}
];

Answer 2

Convertir su csv en JSON funcionaría, pero no es necesario. Acaba de obtener sus métodos de formateo de datos de adentro hacia afuera.

Parece que está esperando un objeto que contiene tres matrices, una para cada columna en su tabla. Los métodos D3 crean (y los métodos NVD3 esperan) una matriz de objetos, uno para cada fila.

Cuando tu lo hagas

scatterdata[0].values["y"] = csv.map(function(d){return [+d["y"] ]; });

Está creando propiedades con nombre del objeto de matriz de valores (todas las matrices de Javascript también son objetos), pero no agrega contenido usando métodos de matriz , por lo que la longitud de esa matriz sigue siendo cero y NVD3 la ve como una matriz vacía, y da usted la advertencia "sin datos".

En lugar de usar la función de mapeo como la tiene, puede usar una sola función de mapeo para formatear los números en la matriz de datos, y luego establecer el resultado directamente para que sea su matriz de valores.

Al igual que:

var scatterdata = [ 
  {
    key    : "Group1",
    values : []//{x:"",y:""}
  }
];

d3.csv("literacyScatterCountrynames.csv", function (error, csv) {
  if (error) return console.log("there was an error loading the csv: " + error);
  console.log("there are " + csv.length + " elements in my csv set");

  scatterdata[0].values = csv.map(function(d){ 
                                     d.x = +d.x;  
                                     d.y = +d.y;  
                                     return d;  
                                 });

  console.log("there are " + scatterdata[0].values.length + " elements in my data");
  //this should now match the previous log statement

  /* draw your graph using scatterdata */
}

La función de mapeo toma todos los elementos en la matriz csv, cada uno de los cuales representa una fila de su archivo csv, y los pasa a la función, luego toma los valores devueltos de la función y crea una nueva matriz a partir de ellos. La función reemplaza la versión de cadena de las propiedades x e y del objeto pasado con su versión numérica, y luego devuelve el objeto formateado correctamente. La matriz resultante de objetos formateados se convierte directamente en la matriz de valores.

Editar

El método anterior crea una única serie de datos que contiene todos los puntos de datos. Como se discutió en los comentarios, eso puede ser un problema si desea que aparezca un nombre de categoría en la información sobre herramientas: la información sobre herramientas de NVD3 muestra automáticamente el nombre de la serie como el valor de información sobre herramientas. Que en el código anterior, significaría que cada punto tendría la información sobre herramientas "Grupo1". No es terriblemente informativo.

Para formatear los datos y obtener información sobre herramientas útiles, necesita cada punto como su propia serie de datos. La forma más fácil de hacer que eso suceda, y tener el resultado en la forma que NVD3 espera, es con d3.nest . Cada sub-matriz "anidada" solo tendrá un punto de datos, pero eso no es un problema para NVD3.

El código para crear cada punto como una serie separada sería:

var scatterdata;
   //Don''t need to initialize nested array, d3.nest will create it.

d3.csv("literacyScatterCountrynames.csv", function (error, csv) {
  if (error) return console.log("there was an error loading the csv: " + error);
  console.log("there are " + csv.length + " elements in my csv set");

  var nestFunction = d3.nest().key(function(d){return d.country;});
      //create the function that will nest data by country name

  scatterdata = nestFunction.entries(

                      csv.map(function(d){ 
                                     d.x = +d.x;  
                                     d.y = +d.y;  
                                     return d;  
                                 })

                    );  //pass the formatted data array into the nest function

  console.log("there are " + scatterdata.length + " elements in my data");
  //this should still match the previous log statement
  //but each element in scatterdatta will be a nested object containing
  //one data point

  /* draw your graph using scatterdata */
}