penguins = FileAttachment("penguins.csv").csv({typed: true})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.barY(penguins, Plot.groupX({y: "count"}, {x: "species"})),
Plot.ruleY([0])
]
})
Plot.plot({
x: {
domain: d3.groupSort(penguins, g => -g.length, d => d.species)
},
y: {
grid: true
},
marks: [
Plot.barY(penguins, Plot.groupX({y: "count"}, {x: "species"})),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true,
percent: true
},
marks: [
Plot.barY(penguins, Plot.groupX({y: "proportion"}, {x: "species"})),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
label: "↑ Total mass (kg)",
grid: true,
transform: d => d / 1000
},
marks: [
Plot.barY(penguins, Plot.groupX({y: "sum"}, {x: "species", y: "body_mass_g"})),
Plot.ruleY([0])
]
})
Plot.plot({
marginLeft: 60,
x: {
inset: 6
},
y: {
label: null
},
marks: [
Plot.dot(penguins, {y: "species", x: "body_mass_g"}),
Plot.ruleY(penguins, Plot.groupY({x1: "min", x2: "max"}, {y: "species", x: "body_mass_g"})),
Plot.tickX(penguins, Plot.groupY({x: "median"}, {y: "species", x: "body_mass_g", stroke: "red"}))
]
})
mobydick = [...await FileAttachment("moby-dick-chapter-1.txt").text()]
.filter(c => /\w/i.test(c))
.map(c => c.toUpperCase())
Plot.plot({
y: {
grid: true
},
marks: [
Plot.barY(mobydick, Plot.groupX({y: "count"})),
Plot.ruleY([0])
]
})
md`组转换可以与其他转换组合在一起，例如 [filter transform](/@observablehq/plot-transforms), 说只计算元音的频率。当使用比例减速器时，基础仍然是整个(未过滤的)数据集。`
Plot.plot({
y: {
grid: true,
percent: true
},
marks: [
Plot.barY(mobydick, Plot.groupX({y: "proportion"}, {filter: d => /[AEIOUY]/.test(d)})),
Plot.ruleY([0])
]
})
md`分组可以与[faceting](/@observablehq/plot-facets)结合使用，以创建较小的倍数，其中数据在分组之前被细分为多个方面。`
Plot.plot({
x: {
tickFormat: d => d === null ? "N/A" : d
},
y: {
grid: true
},
facet: {
data: penguins,
x: "species"
},
marks: [
Plot.barY(penguins, Plot.groupX({y: "count"}, {x: "sex"})),
Plot.ruleY([0])
]
})
Plot.plot({
x: {
tickFormat: d => d === null ? "N/A" : d
},
y: {
grid: true,
percent: true
},
facet: {
data: penguins,
x: "species"
},
marks: [
Plot.barY(penguins, Plot.groupX({y: "proportion-facet"}, {x: "sex"})),
Plot.ruleY([0])
]
})
md`虽然groupX和groupY组分别位于x和y上，但可以通过额外的z维度进一步划分(细分)组，比如对于堆叠的条形图。如果z维度未定义，则默认为填充维度或描边维度。下面按 *x* = species 和 *z* = *fill* = sex分组,然后隐式地堆叠y。`
Plot.plot({
y: {
grid: true
},
marks: [
Plot.barY(penguins, Plot.groupX({y: "count"}, {x: "species", fill: "sex"})),
Plot.ruleY([0])
]
})
md`若要单独在z(或填充或描边)上分组，请使用groupZ变换代替groupX或groupY。本例还使用了第一个减速器，通过抽出每个组的第一个值来标记条。`
Plot.plot({
x: {
percent: true
},
marks: [
Plot.barX(penguins, Plot.stackX(Plot.groupZ({x: "proportion"}, {fill: "sex"}))),
Plot.text(penguins, Plot.stackX(Plot.groupZ({x: "proportion", text: "first"}, {z: "sex", text: "sex"}))),
Plot.ruleX([0, 1])
]
})
Plot.plot({
y: {
grid: true,
percent: true
},
facet: {
data: penguins,
x: "species"
},
marks: [
Plot.barY(penguins, Plot.groupZ({y: "proportion-facet"}, {fill: "sex"})),
Plot.ruleY([0, 1])
]
})
md`最后，组变换x和y上的组。这通常与[cell](/@observablehq/plot-cell)或[dot](/@observablehq/plot-dot)一起使用，以产生离散的热图。下面绘制了2012年至2015年西雅图的最高观测温度，其中y =月份，x =月份中的某一天。`
seattle = FileAttachment("seattle-weather.csv").csv({typed: true})
Plot.plot({
padding: 0,
y: {
tickFormat: Plot.formatMonth()
},
color: {
scheme: "BuRd"
},
marks: [
Plot.cell(seattle, Plot.group({fill: "max"}, {
x: d => d.date.getUTCDate(),
y: d => d.date.getUTCMonth(),
fill: "temp_max",
inset: 0.5
}))
]
})
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.
