html`<figure>
<img src="${await FileAttachment("mapa-subte-buenos-aires.png").url()}">
<figcaption>Subtes de Buenos Aires </figcaption>
</figure>`
html`<iframe width="635" height="400"
src="https://www.youtube.com/embed/neV3EPgvZ3g">
</iframe>`
FileAttachment("temperaturas.csv").text()
// 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())
"62.7" + "59.9" // 122.6? XD!
// Función para convertir una fila
function convertir_fila(fila) {
const parseDate = d3.utcParse("%Y-%m-%d");
// Convertir string de fecha a tipo Date
fila.date = parseDate(fila.date);
// La conversión a tipo númerico se realiza con +
fila.temperature =+ fila.temperature;
return fila;
}
d3.csvParse(await FileAttachment("temperaturas.csv").text(), convertir_fila)
d3.csvParse(await FileAttachment("temperaturas.csv").text(), d3.autoType)
// 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
}
datos_temperatura[1] // Accedo a la posición 1 (los arreglos en JS comienzan en 0)
d3.extent(datos_temperatura, d => d.date) // Rango de fechas
d3.extent(datos_temperatura, d => d.temperature) // Rango de temperaturas
d3.mean(datos_temperatura, d => d.temperature)
d3.median(datos_temperatura, d => d.temperature)
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
datos_temperatura.map(d => d.temperature )
import {Histogram} from "@d3/histogram"
Histogram(temperaturas, {
label: "Grados centígrados",
width,
height: 500,
color: "steelblue"}
)
import {keyStyled} from "@mbostock/keys"
d3 = require("d3@5")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
