Public
Edited
Nov 23, 2022
penguins.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
Inputs.table(penguins)
Plot.plot({
y: {
grid: true
},
marks: [
Plot.barY(penguins, Plot.groupX({y: "count"}, {x: "species"})),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.barY(penguins, Plot.groupX({y: "count"}, {x: "island"})),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.barY(penguins, Plot.groupX({y: "count"}, {x: "sex"})),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.barY(penguins, Plot.groupX({y: "count"}, {x: "species", sort: {x: "y", reverse: true}})),//把X的值按照y的值排序。
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.barY(penguins, Plot.groupX({y: "count"}, {x: "species", sort: {x: "y", reverse: false}})),//false就是倒过来了
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.barY(penguins, Plot.groupX({y: "proportion"}, {x: "species", sort: {x: "y", reverse: false}})),//y轴现在就是百分比（proportion
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", sort: {x: "y", reverse: false}})),
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: "island", y: "body_mass_g", sort: {x: "y", reverse: false}, fill: "species"})),//加颜色
Plot.ruleY([0])
]
})
Plot.plot({
marginLeft: 60,
x: {
inset: 6//改可视范围？
},
y: {
label: null
},
marks: [
Plot.dot(penguins, {y: "species", x: "body_mass_g"}),//dot点阵图，y不同的品种，，x重量
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"}))//增加中位数的标识，stroke是加颜色。
]
})
Plot.plot({
marginLeft: 60,
x: {
inset: 6
},
y: {
label: null
},
marks: [
Plot.dot(penguins, {y: "species", x: "body_mass_g"})
]
})
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
},
facet: {
data: penguins,
x: "island"//更换分面
},
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
},
facet: {
data: penguins,
x: "species"
},
marks: [
Plot.barY(penguins, Plot.groupX({y: "proportion-facet"}, {x: "sex"})),//加了facet就是分面里面的百分比，没加就是占总数的百分比
Plot.ruleY([0])
]
})
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: "proportion"}, {x: "sex"})),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.barY(penguins, Plot.groupX({y: "count"}, {x: "species", fill: "sex"})),
Plot.ruleY([0])
]
})
athletes.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
Inputs.table(athletes)//只要直接file attachment就完了，不需要这一步。。。
Plot.plot({
y: {
grid: true
},
marks: [
Plot.rectY(athletes, Plot.binX({y: "count"}, {x: "weight", inset: 2})),//改成了rectangle，就似乎好看一点,inset是间隔距离，
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.barY(athletes, Plot.binX({y: "count"}, {x: "weight"})),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.areaY(athletes, Plot.binX({y: "count"}, {x: "weight"})),//改成了area,就是流域图
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.areaY(athletes, Plot.binX({y: "count", filter: null}, {x: "weight", fill: "steelblue"})),//fill的甚至就是一个颜色
Plot.lineY(athletes, Plot.binX({y: "count", filter: null}, {x: "weight", stroke:"blue"})),//这就是加个边框,stroke是后面加颜色
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.rectY(athletes, Plot.binX({y: "count"}, {x: "weight", cumulative: true})),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true
},
color: {
legend: true
},
marks: [
Plot.rectY(athletes, Plot.binX({y: "count"}, {x: "weight", fill: "sex", cumulative: true})),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true
},
color: {
legend: true
},
marks: [
Plot.rectY(athletes, Plot.binX({y: "count"}, {x: "weight", fill: "sex"})),
Plot.ruleY([0])
]
})
Plot.plot({
grid: true,//这是表格
round: true,
color: {
scheme: "YlGnBu"//这是配色方案
},
marks: [
Plot.rect(athletes, Plot.bin({fill: "count"}, {x: "weight", y: "height", inset: 0}))//用直方图显示热力图，本身x和y就是有关系的，按计数的多少进行填充
]
})
Plot.plot({
grid: true,
round: true,
marks: [
Plot.rect(athletes, Plot.bin({fill: "count"}, {x: "weight", y: "height", inset: 0}))
]
})
Plot.plot({
grid: true,
round: true,
color: {
scheme: "Spectral"
},
marks: [
Plot.rect(athletes, Plot.bin({stroke: "count"}, {x: "weight", y: "height", inset: 0}))//换成了沟边，效果似乎不好
]
})
Plot.plot({
grid: true,//这是表格
round: true,
color: {
scheme: "YlGnBu"//这是配色方案
},
marks: [
Plot.rect(athletes, Plot.bin({fill: "count"}, {x: "height", y: "weight", inset: -1}))//这是x轴y轴互换，
]
})
Plot.plot({
grid: true,//这是表格
round: true,
color: {
scheme:"RdYlGn"//这是配色方案
},
marks: [
Plot.rect(athletes, Plot.bin({fillOpacity: "count"}, {x: "weight", y: "height", fill:"sex", inset: 0}))//透明度，更加模糊什么的,fill的是性别，所以就两种主要颜色？然后看透明度。
]
})
Plot.plot({
grid: true,//这是表格
round: true,
color: {
scheme:"RdYlGn"//这是配色方案
},
marks: [
Plot.rect(athletes, Plot.bin({fillOpacity: "count"}, {x: "weight", y: "height", fill:"sport", inset: 0}))//透明度，更加模糊什么的,fill的是运动，所以就主要颜色也没啥关系啊。
]
})
Plot.plot({
grid: true,
round: true,
r: {
range: [0, 10]//这是半径最小到最大
},
marks: [
Plot.dot(athletes, Plot.bin({r: "count"}, {x: "weight", y: "height", stroke: "sex"}))//dot是点阵图，最后的是描边，写过几次了，但是无所谓
]
})
Plot.plot({
grid: true,
round: true,
color: {
scheme:"Rainbow"//这是配色方案
},
r: {
range: [0, 10]//这是半径最小到最大
},
marks: [
Plot.dot(athletes, Plot.bin({r: "count"}, {x: "weight", y: "height", stroke: "sport"}))//dot是点阵图，最后的是填充，写过几次了，但是无所谓
]
})
Plot.plot({
grid: true,
round: true,
r: {
range: [0, 20]//这是半径最小到最大
},
marks: [
Plot.hexagon(athletes, Plot.bin({r: "count"}, {x: "weight", y: "height", stroke: "sex"}))//hexagon是六边形的，最后的是描边，写过几次了，但是无所谓
]
})
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.
