{
const brush = vl.selectInterval().encodings('x');
const x = vl.x().fieldT('date').title(null);
const y = vl.y().fieldQ('duration');
const selector = vl.markBar({color:'#999'})
.encode(
x,
y
)
.width(700);
const display = vl.markBar({scalePadding:0})
.transform(vl.filter(brush))
.encode(
x,
y,
vl.color().fieldN('activity').scale(custom_scale), // <-- ONLY CHANGE IS ADDING THE SCALE
vl.tooltip(['duration'])
)
.width(700);
const rule = vl.markRule({color: '#aaa'})
.encode(vl.y().value(30000))
return vl.data(data)
.vconcat(
display.encode( x.scale({domain: brush}) ),
selector.select(brush).height(60),
)
.render();
}
data = FileAttachment("sharableData.json").json()
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.
