viewof inset = Inputs.range([-1, 10], { label: "Amount", step: 1, value: 1 })
Plot.plot({
marks: [
Plot.barY(alphabet, {
x: "letter",
y: "frequency",
sort: { x: "y", reverse: true },
insetLeft: inset,
insetRight: inset
}),
Plot.ruleY([0])
]
})
viewof letter = Inputs.range([0, 25], { label: "Letter Pos", step: 1 })
Plot.plot({
marks: [
Plot.barY(alphabet, {
x: "letter",
y: "frequency",
fill: (d, i) => (i === letter ? "steelblue" : "lightgray"),
sort: { x: "y", reverse: true }
}),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.barY([1 / 26], { fill: "orange", fillOpacity: 0.4 }),
//Plot.ruleY([1 / 26], { stroke: "orange" }),
Plot.barY(alphabet, {
x: "letter",
y: "frequency",
sort: { x: "y", reverse: true }
}),
Plot.ruleY([0])
]
})
import { power_vs_temperature } from "@observablehq/guide-electricity"
import { Plot } from "@mkfreeman/plot-tooltip"
Plot.plot({
marks: [
Plot.dot(power_vs_temperature, {
x: "temperature",
y: "power",
fill: "city"
})
],
color: {
domain: ["Seattle", "Los Angeles"],
legend: true
},
marginLeft: 50
})
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.
