Published
Edited
Dec 31, 2021
3 forks
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
wind_red=FileAttachment("星巴克@1.csv").csv()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {vl} from '@vega/vega-lite-api-v5'
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
csv=FileAttachment("星巴克@4.csv").csv()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof dateView_MEDV = vegaSync({
facts,
dims: d => {
return [d.calorie];
},
interactivity: "brush",
counts: true,
normalized: true,
spec: {
title: '卡路里值',
width: w,

layer: [
{
mark: "line",
data: {
name: "counts"
},

encoding: {
x: {
field: "key",
type: "quantitative",
title: "卡路里"
},
y: {
field: "value",
type: "quantitative",
title: "分布指数"
},
color: {
value: "#ccc"
}
}
},
{
mark: "bar",
data: {
name: "counts"
},

selection: {
brush: {
name: "brush",
type: "interval",
encodings: ['x']
}
},
encoding: {
x: {
field: "key",
type: "quantitative"
},
y: {
field: "filtered",
type: "quantitative"
},
color: {
condition: { selection: "brush", value: colorVega },
value: "#bbb"
}
}
}
]
},
// specifique observable
invalidation,
visibility
})
Insert cell
Insert cell
Insert cell
Insert cell
facts = createFacts(csv)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
G2Plot = require("@antv/g2plot@1.0.1");
Insert cell

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.
Learn more