Public
Edited
Apr 3, 2024
1 star
Insert cell
Insert cell
timeline = {
const area = vl
.markArea({ point: true, opacity: 0.8 })
.encode(
vl.x().fieldT("date").timeUnit("yearmonth"),
vl.y().count("charges"),
vl.color().fieldN("Conference")
)
.width(width - 120)
.height(400);

const range = vl.selectInterval().encodings("x");
const filter = area
.params(range)
.encode(vl.opacity().if(range, vl.value(0.9)).value(0.2))
.height(100);

return vl
.vconcat(area.transform(vl.filter(range)), filter)
.data(ieeevis_publications)
.title("IEEEVIS Publications by year and conference")
.render();
}
Insert cell
ieeevis_publications = FileAttachment(
"IEEE VIS papers 1990-2022 - Main dataset.csv"
).csv().then(res => res.map(d => { d.date = new Date(d.Year); return d;}))
Insert cell
Insert cell
{
const base = vl
.markBar()
.encode(vl.x().fieldT("time").bin({ maxbins: 30 }), vl.y().count())
.width(600);

const brush = vl.selectInterval("brush").encodings("x");

const focus = base.params(brush).height(100);
const context = base.encode(
vl
.x()
.fieldT("time")
.bin({ maxbins: 30, extent: { param: "brush" } })
);

return vl
.vconcat(focus, context)
.transform([
{ calculate: "hours(datum.date) + minutes(datum.date) / 60", as: "time" }
])
.data({
values: flights,
format: { parse: { date: "date" } }
})
.render();
}
Insert cell
Insert cell
flights = FileAttachment("flights-5k.json").json()
Insert cell
vegaEmbed = require("vega-embed@6")
Insert cell
import {vl} from "@vega/vega-lite-api-v5"
Insert cell

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.
Learn more