22:null 23:["$","title",null,{"children":"2.0 Importando datos en Observable I | Emmanuel Iarussi | Observable"}] 28:T42a,md`Si bien Observable espera implícitamente a que el contenido de otras celdas sea ejecutado, en esta caso debemos hacer explícito el \`\`\`await\`\`\` porque estamos intentando acceder a un valor *prometido* dentro de la misma celda. No vamos a ahondar demasiado en esto, pero sí es importante que entiendan la necesidad de utilizar \`\`\`await\`\`\` en esta función. Observemos un poco más el resultado de \`\`\`d3.csvParse\`\`\` haciendo click en el triangulito negro ${triangle()} que aparece al lado de la palabra \`\`\`Array\`\`\`. Verán que se despliega el contenido del arreglo: objetos con los atributos *date* y *temperature*. El contenido de cada uno de esos atributos es de tipo string, indicado por las comillas y el color celeste. Por defecto, d3 no realiza inferencia de tipos, por lo que los atributos simplemente se leen como cadenas de texto. Sin embargo, no nos es posible operar con valores cuantitativos cuando los datos están en formato texto. Por ejemplo, si intentamos sumar dos temperaturas, el resultado es una concatenación 😝:`29:T866,md`### ¿Cómo funcionan los archivos? Veamos más detalles más sobre los archivos que tal vez necesites saber. ** Los archivos son locales para determinado Notebook. ** No se puede hacer referencia a los archivos desde otros Notebooks: sólo se puede acceder directamente a un archivo determinado dentro del Notebook en el que fue cargado. Sin embargo, es posible importar celdas de otros Notebooks que usan archivos. Además, cuando hacemos ${fork_button()} de un Notebook, se creará una copia personal de los archivos adjuntos que contenga el documento. ** Los archivos son inmutables. ** El contenido asociado con un nombre de archivo no cambia. Cuando se suben dos archivos con el mismo nombre, en lugar de reemplazar el contenido de un archivo, se genera automáticamente un nuevo nombre y actualiza todas las referencias de código para apuntar al nuevo archivo. Esto permite llevar un [historial del Notebook](/@observablehq/history), pudiendo visualizar diferentes versiones del mismo con los datos originales, y en sus diferentes versiones. ** Los archivos se pueden eliminar. ** Si bien la inmutabilidad de los archivos garantiza que pueda retroceder en el tiempo para ver versiones anteriores, hay veces que podemos querer eliminar un archivo para siempre. En este caso, simplemente podemos eliminar el archivo en el panel de archivos. Hay que tener presente que esto va a generarnos errores en cada referencia al archivo eliminado. ** Los tamaños de archivo son limitados. ** Se puede cargar cualquier tipo de archivo, pero hay un límite de 15 megabytes por archivo. ** Por defecto, los archivos son privados. ** Cuando publicamos (o compartimos) un Notebook, solo los archivos _que se utilizan_ se harán públicos. Un archivo que se reemplazó o se dejó de usar, si no hay referencias a él, va a seguir siendo privado. ** Las referencias a los archivos se analizan de forma estática. ** La función \`\`\`FileAttachment\`\`\` solo acepta strings estáticos como: ~~~ js FileAttachment("mi_archivo.csv") ~~~ Es decir, invocaciones como: ~~~ js FileAttachment("mi" + "archivo.csv") ~~~ no poseen una sintaxis válida.`2a:T57b,function attachments_button() { return html``}2b:T583,function fork_button() { return html``}2c:[{"id":"cb1fa9dc3147e810a19f64ff1808f3f0f71d9730b593e1e1ef22e22a1bd3392dba8c3ae7c8efd54726f420bba89fceffe247021605d9668f4d93cca500476986","href":"https://static.observableusercontent.com/files/cb1fa9dc3147e810a19f64ff1808f3f0f71d9730b593e1e1ef22e22a1bd3392dba8c3ae7c8efd54726f420bba89fceffe247021605d9668f4d93cca500476986","name":"temperaturas.csv","type":"text/csv","lastModified":1601139598871.184,"size":5873},{"id":"d9f160c943d772f2557e40e89849091eb7ca861504ba2a91238b8320acd51fb4e63bc7f68c18ce9b3d54c5bbba9b9f8e9574d48708280d8615dc4847307f3a45","href":"https://static.observableusercontent.com/files/d9f160c943d772f2557e40e89849091eb7ca861504ba2a91238b8320acd51fb4e63bc7f68c18ce9b3d54c5bbba9b9f8e9574d48708280d8615dc4847307f3a45","name":"mapa-subte-buenos-aires.png","type":"image/png","lastModified":1601139942000.56,"size":269261}] 26:{"id":"d14ff01549cf5447","slug":"2-0-importando-datos-en-observable-i/2","title":"2.0 Importando datos en Observable I","thumbnail":"9520ffcca137b51be85490e1426e35d08f72f66ef666fd3526ceb47096c93c9e","access_level":"public","create_time":"$D2020-09-26T16:59:58.871Z","update_time":"$D2020-09-26T17:51:13.456Z","view_time":null,"first_public_time":"$D2020-09-26T17:13:56.750Z","has_unpublished_edits":null,"fork":{"id":"7e59765e938b0fa6","slug":"2-0-importando-datos-en-observable-i","title":"2.0 Importando datos en Observable I","owner":{"id":"d82594a3ec5e62c6","login":"emmanueliarussi","name":"Emmanuel Iarussi"}},"stars":3,"starred":false,"owner":{"type":"team","id":"d82594a3ec5e62c6","login":"emmanueliarussi","name":"Emmanuel Iarussi","avatar_url":"https://avatars-next.observableusercontent.com/0fd6fef97f520583a819cb0fa096c1632e930c7a0ff463dc6835a5bddbdfac3f","tier":"pro_2024","bio":"Computer Graphics"},"version":323,"publish_version":323,"role":null,"authored":false,"authors":[{"type":"individual","id":"66ee3c2166ccf72d","login":"emmanueliarussi","name":"Emmanuel Iarussi","avatar_url":"https://avatars-next.observableusercontent.com/0fd6fef97f520583a819cb0fa096c1632e930c7a0ff463dc6835a5bddbdfac3f","tier":null,"bio":"Computer Graphics"}],"members":[{"type":"individual","id":"66ee3c2166ccf72d","login":"emmanueliarussi","name":"Emmanuel Iarussi","avatar_url":"https://avatars-next.observableusercontent.com/0fd6fef97f520583a819cb0fa096c1632e930c7a0ff463dc6835a5bddbdfac3f","tier":null,"role":"editor"}],"comments":[{"id":"dae16b06b071e3e2","reply_to_id":null,"content":"this pattern has changed now, but you can import the Histogram function instead","create_time":"$D2021-10-27T18:01:40.371Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":17,"collection":{"id":"dba3f16f1821c155","slug":"dataviz2025_clase_1","title":"DataViz2025_MiM","owner":{"id":"d82594a3ec5e62c6","login":"emmanueliarussi","name":"Emmanuel Iarussi"}},"type":"notebook","body":{"titling":"auto","title":"2.0 Importando datos en Observable I","cells":[{"id":0,"value":"md`# 2.0 Importando datos en Observable I\n\nHay muchas maneras de importar datos en Observable. La forma más rápida de trabajar con pequeños conjuntos de datos es adjuntar un archivo. Los archivos en Observable pueden ser de muchos tipos diferentes (además de csv/json). Pero también se puede adjuntar otros tipos de datos, como imágenes:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`Este notebook contiene algunos archivos (como esa imagen) que fueron agregados al notebook utilizando el shortcut: ${keyStyled(\"Shift-Cmd-U\")}. También es posible adjuntar archivos mediante la opción ${attachments_button()} que se despliega al apretar ${options_button()} (arriba a la derecha). \n\nOtra forma de adjuntar contenido es mediante referencias a links externos. Por ejemplo, el siguiente video está incrustado en este notebook solamente mediante la referencia a YouTube:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"md`Trabajemos ahora con otro de los adjuntos a este documento, el archivo: *temperaturas.csv*. Podemos ver su contenido de la siguiente manera:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"FileAttachment(\"temperaturas.csv\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"md`Sin emabrgo, para poder utilizar el contenido de este tipo de archivo en nuestras visualizaciones necesitamos *parsearlo* en una estructura de datos. Para esto, d3 nos provee funciones que nos ayudan a analizar el texto del archivo y crear objetos con propiedades que llevan por nombre el título de las columnas (en este caso, *date* y *temperature*). La función que utilizamos se llama [d3.csvParse](https://github.com/d3/d3-dsv/blob/master/README.md#csvParse):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"// La expresión await permite que la función csvParse no se ejecute hasta que el archivo \n// no haya sido cargado. Observar que esta función retorna un arreglo con 366 elementos \n// (filas del archivo). En cada elemento del arreglo tenemos un objeto con dos atributos:\n// date y temperature, que almacenan la información perteneciente a esa entrada en la tabla csv. \nd3.csvParse(await FileAttachment(\"temperaturas.csv\").text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"$28","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"\"62.7\" + \"59.9\" // 122.6? XD!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"md`Para convertir estas cadenas en fechas y números tenemos que pasar un segundo argumento a la función \\`\\`\\`d3.csvParse\\`\\`\\`. Esa función se va a llamar cada vez que \\`\\`\\`csvParse\\`\\`\\` intente cargar una nueva fila del archivo y realizará las conversiones de tipo necesarias. Por ejemplo:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"// Función para convertir una fila\nfunction convertir_fila(fila) {\n const parseDate = d3.utcParse(\"%Y-%m-%d\");\n // Convertir string de fecha a tipo Date\n fila.date = parseDate(fila.date); \n // La conversión a tipo númerico se realiza con +\n fila.temperature = +fila.temperature; \n return fila;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"md`Y ahora pasamos la función \\`\\`\\`convertir_fila\\`\\`\\` como parámetro de \\`\\`\\`d3.csvParse\\`\\`\\` para que d3 pueda convertir cada fila correctamente. Notar que el \\`\\`\\`Array\\`\\`\\` retornado ya no contiene cadenas de texto:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"d3.csvParse(await FileAttachment(\"temperaturas.csv\").text(), convertir_fila)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"md`Otra opción es utilizar la función [\\`\\`\\`d3.autoType\\`\\`\\`](/@d3/d3-autotype) que puede inferir muchos tipos de datos conocidos automáticamente:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"d3.csvParse(await FileAttachment(\"temperaturas.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"md`Sin embargo, notemos que si bien logramos hacer la carga de datos en cada una de las celdas anteriores, al no haberle asignado un nombre al arreglo resultante, no podemos referenciarlo (utilizarlo) desde otras celdas. Veamos cómo hacer todo en un solo paso y resolver la asignación del nombre para el arreglo:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"// Asignamos el resultado del bloque a la variable datos_temperatura\ndatos_temperatura = {\n const text = await FileAttachment(\"temperaturas.csv\").text(); // Cargamos los datos en formato texto\n const parseDate = d3.utcParse(\"%Y-%m-%d\"); // Parser para fechas\n return d3.csvParse(text, convertir_fila); // Parseamos (y convertimos) cada fila\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"md`Con los datos representados como corresponde y con la capacidad de referenciarlos, podemos empezar a trabajar. Por ejemplo, podemos ver el contenido de una posición del arreglo en particular:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"datos_temperatura[0] // Accedo a la posición 9 (los arreglos en JS comienzan en 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"md`Puedo utilizar funciones de *d3* para calcular otras propiedades, como la extensión de las fechas y temperaturas para tener idea del dominio y el rango en mis datos:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"d3.extent(datos_temperatura, d => d.date) // Rango de fechas","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"d3.extent(datos_temperatura, d => d.temperature) // Rango de temperaturas","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"md`Visualicemos ahora el histograma de temperaturas. Primero extraemos un arreglo con la serie de temperaturas:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"temperaturas = datos_temperatura.map( function(d) {return d.temperature} ) // El método map() crea un nuevo arreglo con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos. Más ejemplos: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/map","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"md`Importemos un [histograma](/@d3/histogram) para visualizar la distribución de temperaturas. No te preocupes si no entendés todos los detalles de cómo está implementado el histograma, veremos como crear este tipo de componentes más adelante.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"import {chart as temperatureHistogram} with {temperaturas as data, height} from \"@d3/histogram\" ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"temperatureHistogram // Histograma","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"md`Una consideración sutil cuando trabajamos con datos en Observable es si debemos colocar código en una sola celda o en celdas separadas. Una buena regla es que una celda debe definir un valor con nombre para ser referenciado por otras celdas, o debe mostrar información para el usuario (como el histograma, este texto, el video o la imagen de arriba).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"$29","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`### Otras funciones auxiliares `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"function options_button() { return html`` }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"function triangle() { return html``}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"import {keyStyled} from \"@mbostock/keys\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2c","stdlib":"1"}} 27:"$26:body"