The avatar for @gefero
gefero
Sociologist (with background in statistical modelling, machine learning and data science). Someone said "Data Sociologist"... I like it.
Public
TP4. Datos y escalas en Observable
Edited
Apr 17, 2024
2 forks
2
Insert cell
Insert cell
html`<figure>
<img src="${await FileAttachment("mapa-subte-buenos-aires.png").url()}">
<figcaption>Subtes de Buenos Aires </figcaption>
</figure>`
Insert cell
Insert cell
html`<iframe width="635" height="400"
src="https://www.youtube.com/embed/neV3EPgvZ3g">
</iframe>`
Insert cell
Insert cell
FileAttachment("temperaturas.csv").text()
Insert cell
// La expresión await permite que la función csvParse no se ejecute hasta que el archivo
// no haya sido cargado. Observar que esta función retorna un arreglo con 366 elementos
// (filas del archivo). En cada elemento del arreglo tenemos un objeto con dos atributos:
// date y temperature, que almacenan la información perteneciente a esa entrada en la tabla csv.
d3.csvParse(await FileAttachment("temperaturas.csv").text())
Insert cell
Insert cell
Insert cell
"62.7" + "59.9" // 122.6? XD!
Insert cell
Insert cell
Insert cell
Insert cell
d3.csvParse(await FileAttachment("temperaturas.csv").text(), convertir_fila)
Insert cell
Insert cell
d3.csvParse(await FileAttachment("temperaturas.csv").text(), d3.autoType)
Insert cell
Insert cell
// Asignamos el resultado del bloque a la variable datos_temperatura
datos_temperatura = {
const text = await FileAttachment("temperaturas.csv").text(); // Cargamos los datos en formato texto
return d3.csvParse(text, convertir_fila); // Parseamos (y convertimos) cada fila
}
Insert cell
Insert cell
datos_temperatura[1] // Accedo a la posición 9 (los arreglos en JS comienzan en 0)
Insert cell
Insert cell
d3.extent(datos_temperatura, d => d.date) // Rango de fechas
Insert cell
d3.extent(datos_temperatura, d => d.temperature) // Rango de temperaturas
Insert cell
Insert cell
d3.mean(datos_temperatura, d => d.temperature)
Insert cell
Insert cell
d3.median(datos_temperatura, d => d.temperature)
Insert cell
Insert cell
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
Insert cell
Insert cell
datos_temperatura.map(d => d.temperature )
Insert cell
Insert cell
import {Histogram} from "@d3/histogram"
Insert cell
Histogram(temperaturas, {
label: "Grados centígrados",
width,
height: 500,
color: "steelblue"}
)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {keyStyled} from "@mbostock/keys"
Insert cell
d3 = require("d3@5")
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more