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: "species", sort:{x: "y", reverse: true}})),
Plot.ruleY([0])
]
})
Plot.plot({
y:{
grid: true
},
marks:[
Plot.barY(penguins, Plot.groupX({y: "count"},{x: "species", sort:{x: "y", reverse: false}})),
Plot.ruleY([0])
]
})
Plot.plot({
y:{
grid: true
},
marks:[
Plot.barY(penguins, Plot.groupX({y: "count"},{x: "island", sort:{x: "y", reverse: true}})),
Plot.ruleY([0])
]
})
Plot.plot({
y:{
grid: true,
percent: true
},
marks:[
Plot.barY(penguins, Plot.groupX({y: "proportion"},{x: "island", sort:{x: "y", reverse: true}})),
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", sort:{x: "y", reverse: true}})),
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"}))
]
})
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])
]
})
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", fill: "sex"})),
Plot.ruleY([0])
]
})
athletes.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
y: {
grid: true
},
marks:[
Plot.rectY(athletes, Plot.binX({y: "count"}, {x: "weight"})),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true
},
marks:[
Plot.rectY(athletes, Plot.binX({y: "count"}, {x: "weight", inset: 3})),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true
},
marks:[
Plot.areaY(athletes, Plot.binX({y: "count", filter: null}, {x: "weight", fill: "#BBC"})),
Plot.lineY(athletes, Plot.binX({y: "count", filter: null}, {x: "weight", stroke:"black"})),
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"})),
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.1}))
]
})
Plot.plot({
grid: true,
round:true,
marks: [
Plot.rect(athletes, Plot.bin({fillOpacity: "count"}, {x: "weight", y: "height", inset: 0.1}))
]
})
Plot.plot({
grid: true,
round:true,
r: {
range:[0, 10]
},
marks: [
Plot.dot(athletes, Plot.bin({r: "count"}, {x: "weight", y: "height", fill: "sex"}))
]
})
Plot.plot({
grid: true,
round:true,
r: {
range:[0, 10]
},
marks: [
Plot.dot(athletes, Plot.bin({r: "count"}, {x: "weight", y: "height", stroke: "sex"}))
]
})
Plot.plot({
y: {
transform: d => d / 1000,
label: "↑ Unemployed (thousands)"
},
marks: [
Plot.areaY(bls, {x: "date", y: "unemployed", fill: "industry"}), // implicit stacking
Plot.ruleY([0])
]
})
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.
