Published
Edited
Oct 19, 2021
2 forks
1 star
{
const hover = vl.selectSingle()
.encodings('x') // limit selection to x-axis value
.on('mouseover') // select on mouseover events
.toggle(false) // disable toggle on shift-hover
.nearest(true); // select data point nearest the cursor
const sop = vl.markLine().encode(
vl.x().fieldO('aspect_num').title('Element Number'),
vl.y().fieldQ('SOP'),
vl.color().fieldN('performance_id')
.legend(null)
);
const goeMinMax = vl.markArea({opacity: 0.3}).encode(
vl.x().fieldO('aspect_num'),
vl.y().fieldQ('GOE+').title('Points'),
vl.y2().fieldQ('GOE-'),
vl.color().fieldN('performance_id')
);
const base = sop.transform(vl.filter(hover));
const label = {align: 'left', dx: 5, dy: -5};
const white = {stroke: 'white', strokeWidth: 2};
return vl
.layer(
sop,
goeMinMax,
// add a rule mark to serve as a guide line
vl.markRule({color: '#aaa'})
.transform(vl.filter(hover))
.encode(vl.x().fieldO('aspect_num')),
// add circle marks for selected time points, hide unselected points
sop.markCircle()
.select(hover) // use as anchor points for selection
.encode(vl.opacity().if(hover, vl.value(1)).value(0)),
// add white stroked text to provide a legible background for labels
base.markText(label, white).encode(vl.text().fieldN('aspect_desc')),
base.markText(label).encode(vl.text().fieldN('aspect_desc'))
)
.width(width*0.3)
.height(120)
.facet(vl.facet()
.sort({field: "place", order: "ascending"})
.fieldN('performance_id').title(null)
)
.columns(3)
.data(bv2)
.bounds('flush')
.render();
}
bv2=FileAttachment("bv_template.csv").csv()
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.
