PhD candidate with InfoVis Lab at UBC Computer Science, CU Boulder School of Long Distance Running alum
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({
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,
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])
]
})
Plot.plot({
y: {
grid: true,
percent: true
},
marks: [
Plot.barY(mobydick, Plot.groupX({y: "proportion"}, {filter: d => /[AEIOUY]/.test(d)})),
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: "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])
]
})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.barY(penguins, Plot.groupX({y: "count"}, {x: "species", fill: "sex"})),
Plot.ruleY([0])
]
})
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])
]
})
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.
