Published
Edited
Sep 21, 2022
2.Double Kill
boston_housing_data = FileAttachment("boston_housing_data.csv").csv()
Inputs.table(boston_housing_data.filter(d => d))
{
const click = vl.selectPoint().encodings('color');
const brush = vl.selectInterval().encodings("x");
const scale = {
domain: [1, 2, 3, 4, 5],
range: [ '#00ffff', '#87CEEB', '#FFFFBF', '#4682B4',' #ffeeaa']
};
const a = vl
.markBar({ width: 30 })
.data(boston_housing_data)
.encode(
vl.color().if(click, vl.color().fieldN('RAD')).value('lightgray')
.scale(scale),
vl.x().fieldQ("MEDV").title(null),
vl.y().fieldN('RAD').scale({domain: scale.domain}),
)
.width(300)
.height(200)
.params(click)
.transform(vl.filter(brush));
const b = vl
.markPoint()
.data(boston_housing_data)
.encode(
vl.color().value('lightgray')
.if(brush, vl.color().fieldN('RAD').scale(scale)),
vl.x().fieldQ("AGE"),
vl.y().fieldQ("RM"),
vl.opacity().if(brush, vl.value(0.75)).value(0.05),
)
.width(500)
.height(300)
.params(brush)
.transform(vl.filter(click));
return vl.vconcat(a, b).spacing(50).render();
}
import {vl} from '@vega/vega-lite-api-v5'
通过对RM和AGE两个参数的可视化，可以很清晰的看出两者的关系，更容易分析出房价的相关因素如何影响。
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.
