import {Plot} from "@mkfreeman/plot-tooltip"
Plot.plot({
marks: [
Plot.barY(alphabet, {
x: "letter",
y: "frequency",
title: (b) => `${b.letter}: ${(b.frequency * 100).toFixed(2)}%`, //title: "frequency",
sort: { x: "y", reverse: true }
}),
Plot.ruleY([0])
]
})
//selectedAthletes = olympians.filter((d) => d.nationality === "BRA")
//viewof selectedAthletes = Inputs.select(
// d3.group(olympians, (d) => d.nationality),
// { label: "Nationality:" }
//)
viewof selectedAthletes = Inputs.select(
d3.group(olympians, (d) => d.sport),
{ label: "Sport:" }
)
Plot.plot({
marks: [
Plot.rectY(
selectedAthletes,
Plot.binX({ y: "count" }, { x: "weight", fill: "sex" })
),
Plot.ruleY([0])
],
color: {
legend: true
}
})
alphaFiltered = alphabet.filter((d) => d.frequency >= minFrequency)
Plot.plot({
marks: [
Plot.barY(alphaFiltered, { x: "letter", y: "frequency" }),
Plot.ruleY([0])
],
x: {
domain: d3.sort(alphabet.map((d) => d.letter)) //Pin
}
})
viewof minFrequency2 = Inputs.range([0, 0.13], {
label: "Min Frequency 2",
step: 0.01,
value: 0
})
Plot.plot({
marks: [
Plot.ruleY([0, minFrequency2], { stroke: "orange" }),
Plot.barY(alphaFiltered, {
x: "letter",
y: "frequency",
fill: (d) => (d.frequency >= minFrequency2 ? "orange" : "lightgray")
})
],
x: {
domain: d3.sort(alphabet.map((d) => d.letter)) //Pin
}
})
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.
