I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Public
Edited
Nov 20
1 fork
30 stars
chart = {
const singleMouseOver = vl.selectSingle().on("mouseover").empty("none"),
singleMouseOverNearest = vl.selectSingle().on("mouseover").nearest(true).empty("none"),
singleClick = vl.selectSingle().on("click").empty("none"),
singleClickNearest = vl.selectSingle().on("click").nearest(true).empty("none"),
multiMouseOver = vl.selectMulti().on("mouseover").empty("none"),
multiMouseOverNearest = vl.selectMulti().on("mouseover").nearest(true).empty("none"),
multiClick = vl.selectMulti().on("click").empty("none"),
multiClickNearest = vl.selectMulti().on("click").nearest(true).empty("none"),
interval = vl.selectInterval().empty("none"),
intervalAll = vl.selectInterval().empty("all"),
intervalX = vl.selectInterval().encodings("x").empty("none"),
intervalY = vl.selectInterval().encodings("y").empty("none");
const base = select =>
vl
.markCircle({ size: 55 })
.select(select)
.encode(
vl.x().fieldQ("x").axis(false),
vl.y().fieldQ("y").axis(false),
vl.color().if(select, vl.value("firebrick")).value("steelblue")
)
.width(150)
.height(150);
return vl
.concat(
base(singleMouseOver).title("single mouseover"),
base(singleMouseOverNearest).title("single mouseover nearest"),
base(singleClick).title("single click"),
base(singleClickNearest).title("single click nearest"),
base(multiMouseOver).title("multi mouseover"),
base(multiMouseOverNearest).title("multi mouseover nearest"),
base(multiClick).title("multi click"),
base(multiClickNearest).title("multi click nearest"),
base(interval).title("interval"),
base(intervalAll).title("interval all"),
base(intervalX).title("interval x"),
base(intervalY).title("interval y")
)
.columns(4)
.data(data)
.render();
}
data = {
const rnd = d3.randomNormal(width / 2, width / 4);
return Array.from({ length: 200 }).map(() => ({
x: rnd(),
y: rnd()
}));
}
d3 = require("d3-random")
import { vl } from "@vega/vega-lite-api"
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.
