alphabets=d3.csv("https://gist.githubusercontent.com/mbostock/81aa27912ad9b1ed577016797a780b2c/raw/3a807eb0cbb0f5904053ac2f9edf765e2f87a2f5/alphabet.csv", d3.autoType)
Plot.plot({
y: {
grid: true,
nice: true
},
x: {
labelAnchor: "right"
},
marks: [
Plot.barY(alphabets, { x: "letter", y: "frequency", fill: "steelblue" })
]
})
true
Add a rule (horizontal line at y = 0) to the bar chart.
Plot.plot({
y: { grid: true, nice: true },
marks: [
Plot.ruleY([0]),
Plot.barY(alphabets, { x: "letter", y: "frequency", fill: "steelblue" })
]
})
md`Add data value (percent) on the top of each bar.`
Plot.plot({
caption: md`### Figure 1: Frequency of letters in English text.`,
inset: 10,
y: {
nice: true,
grid: true
},
height: 300,
style: {
background: "black",
color: "white"
},
marks: [
Plot.frame({
stroke: "black",
strokeOpacity: 0.25,
fill: "red",
fillOpacity: 0.5
}),
Plot.ruleY([0]),
Plot.barY(alphabets, {
x: "letter",
y: "frequency",
rx: 2,
title: "Example"
}),
Plot.text(alphabets, {
x: "letter",
y: "frequency",
text: (d) => (d.frequency * 100).toFixed(1) + "%",
dy: -5
})
]
})
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.
