Lic. en Ciencias de la Computación, DC, FCEyN, UBA.
Profesor Asociado en el ITBA.
Public
Edited
Apr 7
d3.csv(url)
//
// Es un csv, separado por ;
// No lo puedo leer con d3.csv, voy a usar d3.dsv (donde se puede especificar el delimitador)
d3.dsv(";", "https://aaizemberg.github.io/datos/bcra/MyCsvLol.csv")
// Usando el d3.autoType (pero sin éxito)
//
d3.dsv(";", "https://aaizemberg.github.io/datos/bcra/MyCsvLol.csv", d3.autoType)
// Leo el CSV y me quedo solo con las primeras 3 columnas
d3
.dsv(";", "https://aaizemberg.github.io/datos/bcra/MyCsvLol.csv")
.then((data) =>
data.map((d) => ({
"Fecha cotizacion": d["Fecha cotizacion"],
Compra: d["Compra"],
Venta: d["Venta"]
}))
)
// Leo las primeras 3 columnas y transformo a numerico el precio de compra y el de venta
d3
.dsv(";", "https://aaizemberg.github.io/datos/bcra/MyCsvLol.csv")
.then((data) =>
data.map((d) => ({
"Fecha cotizacion": d["Fecha cotizacion"],
Compra: +d["Compra"].replace(",", "."),
Venta: +d["Venta"].replace(",", ".")
}))
)
// Por ultimo voy a trabajar con la fecha, para llevarla del formato d/m/Y al formato ISO 8601 YYYY-MM-DD
// y guardarlo como un objeto de tipo date, tambien hago otras cosas:
// parseFloat o +"0.9"
// Compra --> compra
// Venta --> venta
// "Fecha cotizacion" --> fecha
data = d3
.dsv(";", "https://aaizemberg.github.io/datos/bcra/MyCsvLol.csv?")
.then((data) =>
data
.map((d) => ({
fecha: new Date(
d3.timeFormat("%Y-%m-%d")(
d3.timeParse("%d/%m/%Y")(d["Fecha cotizacion"])
) // renombro "Fecha cotizacion" por fecha y la dejo como un objeto date en formato ISO 8601
),
compra: parseFloat(d["Compra"].replace(",", ".")), // reemplazo , por . y lo convierto a numerico
venta: +d["Venta"].replace(",", ".") // reemplazo , por . y lo convierto a numerico
}))
.map((d) => ({ ...d, diferencial: d.venta - d.compra }))
)
d3.extent(data.map((d) => d.fecha))
dolar_mayorista = d3.tsv(
"https://aaizemberg.github.io/datos/bcra/dolar_mayorista_com3500.tsv",
d3.autoType
)
// fuente: https://dolarhoy.com/historico-dolar-blue
data_db = d3
.csv("https://aaizemberg.github.io/datos/dolar/blue.csv", d3.autoType)
.then((data) =>
data.map((d) => ({
// fecha: new Date(m(d.category).format("YYYY-MM-DD")),
fecha: m(d.category)._d,
blue: d.valor
}))
)
m("Mon Sep 15 2014")._d
d3.extent(data_db.map((d) => d.fecha))
d3.extent(data.map((d) => d.fecha))
linechart = Plot.plot({
title: "Cotización del Dólar oficial (" + tipo + ") y Blue",
width: width,
marks: [
// Plot.ruleY([0]),
Plot.ruleX(
[
new Date("2015-12-10T00:00:00"), // Mauricio Macri
new Date("2019-12-10T00:00:00"), // Alberto Fernandez
new Date("2023-12-10T00:00:00") // Javier Milei
],
{
stroke: "grey",
strokeDasharray: 2
}
),
Plot.lineY(
tipo === "minorista"
? data.filter((d) => d.fecha >= fecha_desde)
: dolar_mayorista.filter((d) => d.fecha >= fecha_desde),
{
x: "fecha",
y: tipo === "minorista" ? "venta" : "cotizacion",
sort: "fecha",
stroke: "grey",
tip: true
//title: (d) =>
// m(d.fecha).format("YYYY-MM-DD") + " -> " + tipo === "minorista"
// ? d.venta
// : d.cotizacion
}
),
Plot.lineY(data_db, {
x: "fecha",
y: "blue",
sort: "fecha",
stroke: "#377eb8",
tip: true,
title: (d) =>
// m(d.fecha).format("YYYY-MM-DD") + " -> " +
d.blue
})
]
})
fecha_desde = d3.min(data_db, (d) => d.fecha)
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.
