Published
Edited
Feb 6, 2021
data = {
let the_data = await FileAttachment("places@1.json").json()
the_data = the_data.map(d => ({...d, "correct": d.ground_truth == d.predicted}))
return the_data
}
printTable(data.slice(0, 3))
scratch = data.filter(d => d.network_type == "scratch")
vl.markRect()
.data(scratch)
.encode(
vl.x().fieldN("ground_truth"),
vl.y().fieldN("predicted"),
vl.color().count()
)
.render()
vl.markBar()
.data(data)
.encode(
vl.y().fieldN("network_type").sort(vl.mean('correct').order('descending')),
vl.x().mean("correct").scale({"domain": [0, 1]})
)
.render()
{ const selection = vl.selectSingle().fields("network_type").on("mouseover");
return vl.layer(
vl.markBar()
.data(data)
.select(selection)
.width(400)
.height(400)
.encode(
vl.x().fieldN("ground_truth"),
vl.y().mean("correct").stack("zero"),
vl.color().if(selection, vl.fieldN("network_type")).value("grey"),
vl.opacity().if(selection, vl.value(0.9)).value(0.2)
),
vl.markText({"dx": 0, "dy": 10, "fill": "white"})
.data(data)
.encode(
vl.x().fieldN("ground_truth"),
vl.y().mean("correct").stack("zero"),
vl.color().fieldN("network_type"),
vl.text().mean("correct").format(".2f")
)
)
.render()
}
{ const selection = vl.selectMulti();
return vl.markLine({"point": {"filled": false, "fill": "white"}})
.width(400)
.height(400)
.data(data)
.select(selection)
.encode(
vl.x().fieldN("ground_truth"),
vl.y().mean("correct"),
vl.color().if(selection, vl.fieldN("network_type")).value("grey"),
vl.opacity().if(selection, vl.value(0.9)).value(0.2)
)
.render()
}
vl.markRect()
.data(data)
.encode(
vl.x().fieldN("ground_truth"),
vl.y().fieldN("predicted"),
vl.color().count(),
vl.column().fieldN("network_type")
)
.render()
import {vl} from '@vega/vega-lite-api'
import {printTable} from '@uwdata/data-utilities'
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.
