Plot.plot({
marks: [
Plot.barX(
olympians,
Plot.groupY(
{
x: "count",
title: "count"
},
{ y: (d) => d.sport, sort: { y: "x", reverse: true, limit: 20 } } //(d) => d.sport or "sport"
)
),
Plot.ruleX([0])
],
marginLeft: 80
})
Plot.plot({
marks: [Plot.dot(olympians, { x: "weight", stroke: "lightgreen", r: 1 })]
})
Plot.plot({
marks: [
Plot.dot(
olympians,
Plot.dodgeY({ x: "weight", stroke: "lightgreen", r: 1 }) //escape data
)
],
width,
height: 1500
})
viewof numBins = Inputs.range([1, 100], { label: "Number of Bins", step: 1 })
Plot.plot({
marks: [
Plot.rectY(
olympians,
Plot.binX({ y: "count" }, { x: "weight", thresholds: numBins }) //Bin saves each data in each Y bar
),
Plot.ruleY([0])
],
width
})
Plot.plot({
marks: [
Plot.barY(
olympians,
Plot.groupX(
{ y: "count" },
{
x: "nationality",
fill: "sport", //stacking
sort: { x: "y", reverse: true, limit: 20 },
title: "sport"
}
)
),
Plot.ruleY([0])
],
width,
color: {
legend: true
}
})
Plot.plot({
marks: [
Plot.barY(
olympians,
Plot.groupX(
{ y: "count" },
{
x: "nationality",
fill: "sex",
sort: { x: "y", reverse: true, limit: 20 },
title: "sex"
}
)
),
Plot.ruleY([0])
],
width,
color: {
legend: true
}
})
//Pie/Donuts charts are like stack chart
import { Plot } from "@mkfreeman/plot-tooltip"
viewof stacking = Inputs.select(
["baseline", "silhouette", "wiggle", "expand"],
{ label: "Stacking method" }
)
Plot.plot({
y: {
tickFormat: "s"
},
marks: [
Plot.areaY(industries, {
x: "date",
y: "unemployed",
fill: "industry",
title: "industry",
offset: stacking === "baseline" ? null : stacking
}),
Plot.ruleY([0])
],
width
})
viewof table = Inputs.table(aapl)
viewof k = Inputs.range([1, 20], {label: "Window size", step: 1, value: 1})
viewof reducer = Inputs.select(["mean", "median", "min", "max"], {
label: "Reducer"
})
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(
aapl,
Plot.windowY({ x: "Date", y: "Close", reduce: reducer, k: k }) // computes data
)
]
})
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.
