Published
Edited
Dec 1, 2021
data1 = FileAttachment("IMDB-Movie-Data.csv").csv({typed: true})
利用下图一的直方图对2006-2016年每年电影的数量做统计，在直方图中拖动间隔选择来在下图散点图中显示（ps：悬停鼠标显示相关电影信息）
{
// 在x轴编码上创建一个时间间隔的选择
const brush = vl.selectInterval().encodings('x');
// 根据“笔刷”确定不透明度
const opacity = vl.opacity().if(brush, vl.value(0.8)).value(0.1);
// 每年电影数量的直方图
// 添加间隔刷，以随时间选择
const overview = vl.markBar()
.encode(
vl.x().fieldO('Year') // 以提取年份为单位，按顺序处理
.axis({title: null, labelAngle: 0}),
vl.y().count().title('电影数量'), //计数，没有轴标题
opacity
)
.params(brush) // 向图表中添加有时间间隔的“笔刷”选择
.width(1100)
.height(50);
// 散点图绘制
const detail = vl.markPoint()
.encode(
vl.x().fieldQ('Rating').scale({domain: [0, 10]}).stack(null).title('Rating'),
vl.y().fieldQ('Revenue (Millions)'),
opacity
//vl.tooltip().if(opacity,
,vl.tooltip(['Title','Rating', 'Revenue (Millions)'])
) // 如何在笔刷选中之后让消失的点不再显示电影信息？？？暂时没解决
.width(1100)
.height(500)
return vl.data(data1).vconcat(overview, detail).render();
}
多图交互式
{
const brush = vl.selectInterval()
.resolve('intersect'); // 所有“笔刷”的交集
const legend = vl.selectPoint()
.fields('Year')
.bind('legend'); // 绑定到与颜色图例的交互作用
const brushAndLegend = vl.and(brush, legend);
return vl.markCircle()
.data(data1)
.params(brush, legend)
.encode(
vl.x().fieldQ(vl.repeat('column')),
vl.y().fieldQ(vl.repeat('row')),
vl.color().if(brushAndLegend, vl.fieldO('Year')).value('grey'),
vl.opacity().if(brushAndLegend, vl.value(0.8)).value(0.1),
vl.tooltip(['Title', 'Rating', 'Revenue (Millions)'])
)
.width(170)
.height(150)
.repeat({
column: ['Metascore','Rating','Revenue (Millions)','Votes'],
row: ['Votes', 'Revenue (Millions)','Rating','Metascore']
})
.render();
}
import { toc } from "@nebrius/indented-toc" // This component generates the Table of Contents
import { Search, Table } from "@observablehq/inputs"
import {vl} from '@vega/vega-lite-api-v5'
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.
