Engineer & Educator | Observable Ambassador | Karaoke Enthusiast
Plot.plot({
marks: [
Plot.ruleX([1 / 26], { stroke: "orange", strokeWidth: 3 }),
Plot.barX(data, {
y: "letter",
x: "frequency",
sort: { y: "x", reverse: true }
})
],
y: { grid: true }
})
Plot.plot({
marks: [
Plot.dot(devices, {
x: "Width",
y: "Height",
fill: "Device",
fillOpacity: "Sessions",
r: ({ Sessions }) => Math.log(Sessions),
title: ({ Device, Resolution, Sessions }) =>
[Device, Resolution, Sessions].join(": ")
})
],
opacity: { type: "log" },
x: { grid: true, domain: [0, 4200] },
y: { grid: true, domain: [0, 2600] }
})
devices
Plot.plot({
facet: { data: penguins, x: "species" },
marks: [
Plot.dot(penguins, { x: "culmen_length_mm", y: "culmen_depth_mm" }),
Plot.frame()
],
height: width / 3
})
penguins
Plot.plot({
marks: [
Plot.rectY(
// draw rects on the Y axis (vertical)
penguins,
Plot.binX(
// create bins on the X axis
{ y: "mean" }, // outputs: aggregation metric
{ x: "body_mass_g", y: "flipper_length_mm" } // inputs: binning value, value to be aggregated
)
)
]
})
Plot.plot({
marks: [
Plot.barY(
// draw bars on the Y axis (vertical)
penguins,
Plot.groupX(
// create groups along the X axis
{ y: "mean" }, // outputs: aggregation metric
{ x: "species", y: "flipper_length_mm" } // inputs: grouping value, value to aggregate
)
)
]
})
d3.group(devices, (d) => d.Device)
rolled = d3.rollup(
devices,
(v) => ({
count: v.length,
sum: d3.sum(v, (d) => d.Users),
device: v[0].Device
}),
(d) => d.Device
)
d3.map(rolled, (d) => d)
Array.from(rolled.values())
d3.rollup(
devices,
(v) => d3.mean(v, (d) => d.Width),
(d) => d.Device
)
customStyle = html`<style>\
.slide.slide--small {
padding-top: 5%;
padding-bottom: 1%;
min-height: 10vw;
height: auto;
}
.slide.slide--bullets {
padding-top: 10%;
}
.slide--bullets ul {
list-style-position: inside;
list-style-type: disc;
padding:0px;
}
pre, code, table {
font-size: 2vw;
}
</style>`
import { devicesFinished as devices } from "@anjana/dvfs-project-device-sizes"
import { penguins } from "@observablehq/plot-facets"
import { preview } from "@observablehq/plot"
function previews(notebooks, options) {
return htl.html`<div style="width:80%; display: grid; grid-gap: .875rem; grid-template-columns: repeat(2, minmax(100px, 4fr));">${notebooks.map(
(notebook) => preview(notebook, options)
)}</div>`;
}
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.
