Plot.plot({
round: true,
color: {legend: true},
marks: [
Plot.rectY(olympians, Plot.binX({y2: "count"}, {x: "weight", fill: "sex", mixBlendMode: "multiply"})),
Plot.ruleY([0])
]
})
us = FileAttachment("facebook@1.csv").text()
d3.csv('facebook@1.csv').then(data => {
Plot.plot({
round: true,
color: { legend: true },
marks: [
Plot.rectY(data, Plot.binX({ y2: "count" }, { x: "Pre", fill: "Post", mixBlendMode: "multiply" })),
Plot.ruleY([0])
]
})
})
facebook@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
facebook.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
d3 = require("d3@5")
Plot.plot({
color: {legend: true},
marks: [
Plot.rectY(
olympians,
Plot.sort(
{channel: "y2", order: "descending"}, // prevent occlusion 🌶️
Plot.binX(
{y2: "count"}, // opt-out of stacking
{x: "weight", fill: "sex"}
)
)
),
Plot.ruleY([0])
]
})
Plot.plot({
round: true,
color: {legend: true},
marks: [
Plot.rectY(olympians, Plot.binX({y: "count"}, {filter: (d) => d.sex === "male", x: "weight", fill: "sex", insetLeft: 4})),
Plot.rectY(olympians, Plot.binX({y: "count"}, {filter: (d) => d.sex === "female", x: "weight", fill: "sex", insetRight: 4})),
Plot.ruleY([0])
]
})
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.
