Crafting Visual Stories with Data.
Published
Edited
Dec 5, 2021
raw = aq.table({
name: ["alpha", "beta", "gamma", "epislon", "omnicon", "zeta"],
time: ["2015", "2016", "2017", "2018", "2019", "2020"],
stage: ["a", "a", "b", "c", "c", "a"],
importance: [1, 2, 4, 4, 4, 1]
})
data = raw
.derive({
timeEnd: (d) => aq.op.parse_int(d.time) + 2,
timeStart: (d) => aq.op.parse_int(d.time)
})
.objects()
Inputs.table(data)
vegaEmbed = require("vega-embed")
vegaEmbed({
width: 800,
height: 300,
data: { values: data },
mark: { type: "rule", size: 40 },
encoding: {
x: {
field: "timeStart",
type: "quantitative",
scale: { zero: false }
},
x2: {
field: "timeEnd",
type: "quantitative"
},
y: {
field: "name",
type: "nominal",
axis: { labelExpr: "datum.label[0]" }
},
color: {
field: "stage",
type: "nominal",
scale: { range: ["red", "blue", "green"] }
}
}
})
vegaEmbed({
width: 800,
height: 300,
data: { values: data },
encoding: {
x: {
field: "time",
type: "quantitative",
scale: { domain: [2015, 2020] },
axis: { labelAngle: 0 }
},
y: { field: "stage", type: "nominal" },
color: { field: "stage", type: "nominal" }
},
layer: [
{
mark: { type: "text", size: 12 },
encoding: {
text: { field: "name", type: "nominal" }
}
},
{
mark: "circle",
encoding: { size: { field: "importance", type: "nominal" } }
},
{
mark: "rule",
}
]
})
vl.markPoint()
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.
