The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Unlisted
Edited
Mar 7, 2023
Importers
2 stars
// What happens with the stacking here....🤔
p = Plot.barY(data, ({ x: "species", y: "body_mass_g"}))
Inputs.table(
getTransformed(
p
// , {refData: data}
)
)
// How exactly is a histogram made....?🤔
p2 = Plot.rectY(
// data,
[1, 1],
Plot.binX(
{
y: "count",
// use a reducer to get all elements in the bin!!!
title: (d) => d
},
// { x: "body_mass" }
{x: d => d}
)
)
[p2.initialize().channels.x1.value, p2.initialize().channels.x2.value]
Plot.rect([1000], {x: d => 1, y: 1}).plot({
x: {
domain: [9, 9]
}
})
viewof binned = Inputs.table(getTransformed(p2))
binned
import {addTooltips} from "@mkfreeman/plot-tooltip"
addTooltips(p2.plot())
// With a fill!
p3 = Plot.rectY(data, Plot.binX({y: "count"}, {x: "body_mass_g", fill: "sex"}))
Inputs.table(getTransformed(p3))
p3.plot()
p4 = Plot.barX(data, Plot.groupY({x: "mean"}, {y: "species", x: "body_mass", title:"sex"}))
viewof grouped = Inputs.table(getTransformed(p4))
grouped
p4.plot({marginLeft: 100, x: {label: "avg. body mass →"}})
p5 = Plot.dot(
data,
Plot.normalizeY({
basis: "mean",
y: "body_mass_g",
x: "body_mass_g",
z: "species",
fill: "species"
})
)
Inputs.table(getTransformed(p5, {refData: data}))
p6 = Plot.barY(data, Plot.selectMaxY({x: "species", y: "culmen_length_mm", z: "species", stroke: "red"}))
Inputs.table(getTransformed(p6))
p7 = Plot.line(
ordered,
Plot.windowY(
{ reduce: "mean", k: 7 },
{ x: "culmen_length_mm", y: "culmen_depth_mm", stroke: "species" }
)
)
Inputs.table(getTransformed(p7, {refData: ordered}))
p7.plot({ color: { legend: true }, y: { label: "windowed bill depth" } })
ordered = aq.from(data).orderby("species", "culmen_length_mm").objects()
getTransformed()
getTransformed = (
mark = Plot.barY(data, { x: "species", y: "body_mass" }),
{ refData = null } = []
) => {
// Get values from the channels
const { facets, channels } = mark.initialize();
const keys = Object.keys(channels);
return Array.from(facets[0], (i) =>
Object.fromEntries(Array.from(keys, (key) => [key, channels[key].value[i]]))
);
}
data = penguins
data
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
