Lic. en Ciencias de la Computación, DC, FCEyN, UBA.
Profesor Asociado en el ITBA.
Public
Edited
Dec 7, 2023
Plot.plot({
marks: [
Plot.barX(
aq.from(data).select("titulo").groupby("titulo").count().objects(),
{
x: "count",
y: "titulo",
fill: "#005588", // tome el color predominante del logo del ITBA
sort: { y: "x", reverse: true }
}
),
Plot.text(
aq.from(data).select("titulo").groupby("titulo").count().objects(),
{
x: "count",
y: "titulo",
text: "count",
textAnchor: "start",
dx: 1
}
)
// Plot.ruleX([0])
],
marginLeft: 220,
marginRight: 100,
height: 500
// width: width
})
// tomando los datos de Github
d3.tsv("https://aaizemberg.github.io/datos/itba/graduados.tsv", d3.autoType)
Wrangler(data)
// To use copied code replace "data" with your own variable
aq
.from(
aq
.from(data)
.select("titulo", "fecha")
.objects()
.map((d) => ({ name: d.titulo, year: d.fecha.getFullYear().toString() }))
)
.groupby("name", "year")
.count()
.rename({ count: "value" })
.objects()
.map((d) => ({ name: d.name, year: +d.year, value: d.value }))
// visualizando los datos en una tabla
//
Inputs.table(data)
Plot.plot({
marks: [
Plot.tickX(data, {
x: "fecha",
y: "titulo",
stroke: "#005588",
strokeOpacity: 0.6
})
],
marginLeft: 220,
width: width
})
d3.extent(
data
.filter((d) => d.titulo == "Ingeniero en Informática")
.map((d) => d.promedio_lineal)
)
Plot.plot({
x: {
grid: true
// inset: 10
},
marks: [
Plot.boxX(
data.filter((d) => d.promedio >= 4),
{ x: "promedio", y: "titulo" }
)
],
marginLeft: 220
})
Plot.plot({
y: {
grid: true
},
color: {
legend: true
},
marks: [
Plot.lineY(my_data, {
x: "year",
y: "value",
stroke: "name"
// marker: "circle"
}),
Plot.ruleY([0])
]
})
embed = require("vega-embed@6")
streamgraph_interactivo = embed(vlSpec)
vl_data = aq
.from(
aq
.from(data)
.select("titulo", "fecha")
.objects()
.map((d) => ({ name: d.titulo, year: d.fecha.getFullYear().toString() }))
)
.groupby("name", "year")
.count()
.rename({ count: "value" })
.objects()
.map((d) => ({ name: d.name, year: d.year + "-01-01", value: d.value }))
my_colors = new Map(
_.uniq(data.map((d) => d.titulo)).map((d, i) => [
d,
d3.interpolateWarm((1 / 19) * i)
])
)
my_data = aq
.from(
aq
.from(data)
.select("titulo", "fecha")
.objects()
.map((d) => ({ name: d.titulo, year: d.fecha.getFullYear().toString() }))
)
.groupby("name", "year")
.count()
.rename({ count: "value" })
.objects()
.map((d) => ({ name: d.name, year: +d.year, value: d.value }))
// tengo que armar una estructura que tenga estos campos:
// date, name, category, value
br_data = {
let tmp = // To use copied code replace "data" with your own variable
aq
.from(data)
.select("titulo", "fecha")
.groupby("titulo", "fecha")
.derive({ year: (d) => d.split(d.fecha, " ")[3] })
.select("titulo", "year")
.groupby("titulo", "year")
.count()
.orderby("year")
.relocate("titulo", { after: "year" })
.rename({ year: "date" })
.rename({ titulo: "name" })
.rename({ count: "value" })
.objects();
return tmp.map((d) => ({
date: new Date(d.date + "-01-01"),
name: d.name,
category: d.name.substr(0, 3),
value: d.value
}));
}
import { chart as br_chart } with {
br_data as data,
my_duration as duration,
br_n as n
} from "@d3/bar-chart-race"
my_duration = 100
// cuantas barras muestro, en la carrera de barras
br_n = 10
aq
.from(data)
.select("titulo", "fecha")
.groupby("titulo", "fecha")
.derive({ year: (d) => d.split(d.fecha, " ")[3] })
.select("titulo", "year")
.groupby("titulo", "year")
.count()
.objects()
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.
