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()
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.