hello everybody
viewof yourColor = color({value: "#21abc0", title:"chose favorite color"})
{
const selection = vl.selectSingle('Select')
.init({kind: 'one'})
.bind({ kind: vl.radio(kind)});
const dot = vl.markPoint()
.data(data)
.select(selection)
.encode(
vl.x().fieldQ("length").scale({zero: false}),
vl.y().fieldQ("width").scale({zero: false}),
vl.color().value(yourColor),
vl.opacity().if(selection, vl.value(0.8)).value(0.08),
vl.tooltip(['length', 'width'])
);
return vl.hconcat(dot).render();
}
{
const brush = vl.selectInterval().encodings('x');
const click = vl.selectPoint().encodings('color');
const scale = {
domain: ['one', 'two', 'three'],
range: ['#e7ba32', '#9467bd', '#4EEE94']
};
const plot1 = vl.markCircle({filled: true})
.encode(
vl.x().fieldQ("length").scale({zero: false}),
vl.y().fieldQ("width").scale({zero: false}),
vl.color().value('lightgray')
.if(brush, vl.color().fieldN('kind').scale(scale).title('kind')),
vl.opacity().if(brush, vl.value(1.0)).value(0.2),
vl.size().fieldQ('preimeter').scale({domain: [13, 17], range: [10, 500]}).title('preimeter'),
vl.order().fieldQ('preimeter').sort('descending')
)
.width(width)
.height(600)
.params(brush)
.transform(vl.filter(click));
const plot2 = vl.markBar()
.encode(
vl.color().if(click, vl.color().fieldN('kind')).value('lightgray')
.scale(scale).title('kind'),
vl.x().count(),
vl.y().fieldN('kind').scale({domain: scale.domain}).title('kind')
)
.width(width)
.params(click)
.transform(vl.filter(brush));
return vl.vconcat(plot1, plot2)
.data(data)
.autosize({type: 'fit-x', contains: 'padding'})
.render();
}
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.
