I've been developing with WordPress since 2006, and love to code and write about it. My main development work focuses on custom themes and plugins.
Plot.plot({
margin: 150,
style: {
background: "#dbdbdb",
},
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency"}),
Plot.axisY({anchor: "left", label: null}),
Plot.axisY({anchor: "left", label: "Y-TOP", labelAnchor: "top", ticks: [], labelOffset: 50, fill: "red"}),
Plot.axisY({anchor: "left", label: "Y-BOTTOM", labelAnchor: "bottom", ticks: [], labelOffset: 50, fill: "red"}),
Plot.axisY({anchor: "right", label: "Y-TOP", labelAnchor: "top", ticks: [], labelOffset: 20, fill: "red"}),
Plot.axisY({anchor: "right", label: "Y-BOTTOM", labelAnchor: "bottom", ticks: [], labelOffset: 20, fill: "red"}),
Plot.axisX({anchor: "top", label: "X-LEFT", labelAnchor: "left", ticks: [], labelOffset: 20, fill: "blue"}),
Plot.axisX({anchor: "top", label: "X-RIGHT", labelAnchor: "right", ticks: [], labelOffset: 20, fill: "blue"}),
Plot.axisX({anchor: "bottom", label: "X-LEFT", labelAnchor: "left", labelOffset: 50, fill: "blue"}),
Plot.axisX({anchor: "bottom", label: "X-RIGHT", labelAnchor: "right", ticks: [], labelOffset: 50, fill: "blue"})
]
})
Plot.plot({
margin: 150,
style: {
background: "#dbdbdb",
},
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency"}),
Plot.axisY({anchor: "left", label: "Y-TOP", labelAnchor: "top", labelOffset: 50, dx: 50, dy: 25, fill: "red"}),
Plot.axisX({anchor: "bottom", label: "X-RIGHT", labelAnchor: "right", labelOffset: 50, dx: 50, dy: 25, fill: "blue"})
]
})
Plot.plot({
x: { padding: 0.4 },
marks: [
Plot.barY(alphabet, { x: "letter", y: "frequency", dx: -5, dy: -12 }),
Plot.barY(alphabet, {
x: "letter",
y: "frequency",
fill: "green",
dx: -2,
dy: -2
})
]
})
Plot.plot({
title: "For charts, an informative title",
subtitle: "Subtitle to follow with additional context",
caption: "Figure 1. A chart with a title, subtitle, and caption.",
marks: [
Plot.frame(),
Plot.text(
[
"Titles, subtitles, captions, and annotations assist inter•pretation by telling the reader what’s interesting. Don’t make the reader work to find what you already know."
],
{ lineWidth: 30, frameAnchor: "middle" }
)
]
})
Plot.plot({
height: 200,
marks: [Plot.barY(alphabet, { x: "letter", y: "frequency" })]
})
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.
