Computer Graphics
Published
Edited
Sep 26, 2020
3 stars
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
const parseDate = d3.utcParse("%Y-%m-%d"); // Parser para fechas
return d3.csvParse(text, convertir_fila); // Parseamos (y convertimos) cada fila
}
datos_temperatura[0] // Accedo a la posición 9 (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
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
import {chart as temperatureHistogram} with {temperaturas as data, height} from "@d3/histogram"
temperatureHistogram // Histograma
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.
