Public
Edited
Dec 2, 2022
// Math.random() * 100
// nums = {
// const nums = new Set();
// while(nums.size !== 8) {
// nums.add(Math.floor(Math.random() * 100) + 1);
// };
// return nums;
// }
data@3.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
data
Plot.plot({
marks: [
Plot.barY(data, {x: "model", y: "a", fill : "model"})
]
})
import {vl} from "@vega/vega-lite-api"
Plot.plot({
color: {
type: "ordinal",
scheme: "tableau10"
},
marks: [
Plot.barY(data, {x: "model", y: "a", fill : "model"})
]
})
cross_validation.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
grid: true,
marks: [
Plot.dot(cross_validation, {
x: "model",
y: "time"})
]
})
data
// attribs = [1, 2, 3]
import {slider} from "@jashkenas/inputs"
attribs = {
let all = Object.keys(data[0])
all.shift()
return all
}
viewof numTicks = slider({
min: 1,
max: 10,
value: 3,
step: 1,
title: "Number of vertical ticks"
})
// typeof(Object.values(data[0])[0])
chart = {
const height = 400;
const hover = vl
.selectSingle()
.on("mouseover")
.nearest(true)
.empty("none");
const base = vl.markRule({ color: "#ccc" }).encode(
vl.x().fieldN("key"),
vl.detail().count()
);
const line = base.markLine().encode(
vl.color().fieldN("model"),
vl.detail().fieldN("index"),
vl.opacity().if(hover, vl.value(1)).value(0.6),
vl.y().fieldQ("norm_val").axis(null),
vl.tooltip(attribs)
);
const points = line.markCircle()
.select(hover)
.encode(vl.size().if(hover, vl.value(50)).value(5));
// Generates a spec to show tick values at an specific value of y0
const tick = y0 =>
vl.layer(
base.markText({ style: "label" }).encode(vl.text().max("max")),
base.markTick({ style: "tick", size: 8, color: "#ccc" })
)
.encode(vl.y().value(y0));
// Create an array with *numTicks* ticks
const ticks = Array.from({ length: numTicks })
.map((_, i) => tick((height / (numTicks - 1)) * i));
return vl
.layer(base, line, points, ...ticks)
.data(data)
.transform(
vl.filter(attribs.map(a => `datum["${a}"] != null`).join(" && ")),
vl.window(vl.count().as("index")),
vl.fold(attribs),
vl.groupby("key").joinaggregate(vl.min("value").as("min"), vl.max("value").as("max")),
vl.calculate("(datum.value - datum.min) / (datum.max - datum.min)").as("norm_val"),
vl.calculate("(datum.min + datum.max) / 2").as("mid")
)
.config({
axisX: { domain: false, labelAngle: 0, tickColor: "#ccc", title: null },
view: { stroke: null },
style: {
label: { baseline: "middle", align: "right", dx: -5 },
tick: { orient: "horizontal" }
}
})
.width(width - 100)
.height(height)
.render();
}
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.
