The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published unlisted
Edited
Jul 13, 2022
{
const a = Plot.plot({
className: "custom",
grid: 30,
insetTop: 10,
marks: [
Plot.ruleY([0]),
Plot.rectY(
data,
Plot.binX({ y: "sum" }, { x: "flipper_length_mm", thresholds: bins })
)
]
});
d3.select(a).append("style").text(`
.custom g:nth-child(2) g.grid path { stroke: green; stroke-opacity: .5; stroke-width: 4 }
.custom g:nth-child(3) g.grid path { stroke: red; stroke-opacity: .5; stroke-width: 4 }
`);
return a;
}
Plot.plot({
grid: 30,
insetTop: 10,
marks: [
Plot.ruleY([0]),
Plot.rectY(
data,
Plot.binX({ y: "sum" }, { x: "flipper_length_mm", thresholds: bins })
)
]
})
Plot.plot({
x: {
grid: d3.ticks(180, 210, 10)
},
insetTop: 10,
marks: [
Plot.ruleY([0]),
Plot.rectY(
data,
Plot.binX({ y: "sum" }, { x: "flipper_length_mm", thresholds: bins })
)
]
})
Plot.plot({
height: 180,
y: {grid: [30, 60]},
marks: [
Plot.dot(
data,
Plot.sort(
{
channel: "x"
},
Plot.dodgeX(
{
padding: 1,
anchor: "middle"
},
{
stroke: "#ffffff",
strokeWidth: 2,
fill: "species",
y: "culmen_length_mm",
r: 4,
}
)))
]
})
data = FileAttachment("penguins.csv").csv({typed: true})
viewof bins = Inputs.range([3, 20], {step: 1, label: "Bins"})
Plot = require(await FileAttachment("plot@1.umd.js").url())
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.
