Plot.plot({
height: 556,
x: {percent: true},
marks: [
Plot.gridX({interval: 1}),
Plot.axisX({anchor: "top", label: "Frequency (%) →"}),
Plot.axisX({anchor: "bottom", label: null}),
Plot.axisY({anchor: "left", label: null}),
Plot.barX(alphabet, {x: "frequency", y: "letter", fill: "steelblue"}),
Plot.ruleX([0])
]
})
Plot.plot({
y: {percent: true},
caption: md`Data: *The Onion*’s “Why Are We Leaving Facebook?”`,
marks: [
Plot.axisX({label: null, lineWidth: 8, marginBottom: 40}),
Plot.axisY({label: "↑ Responses (%)"}),
Plot.barY(responses, {x: "name", y: "value"}),
Plot.ruleY([0])
]
})
Plot.plot({
marginTop: 0,
marginLeft: 4,
x: {ticks: 4, label: "Yield (kg) →"},
marks: [
Plot.barX([42, 17, 32], {y: ["🍌 banana", "🍎 apple", "🍐 pear"]}),
Plot.axisY({textAnchor: "start", fill: "white", fontWeight: "bold", dx: 14})
]
})
Plot.plot({
inset: 10,
marks: [
Plot.frame({fill: "#eaeaea"}),
Plot.gridY({stroke: "#fff", strokeOpacity: 1}),
Plot.gridX({stroke: "#fff", strokeOpacity: 1}),
Plot.line(aapl, {x: "Date", y: "Close"})
]
})
Plot.plot({
round: true,
marginLeft: 0, // don’t need left-margin since labels are inset
x: {label: null, insetLeft: 36}, // reserve space for inset labels
marks: [
Plot.gridY({
strokeDasharray: "0.75,2", // dashed
strokeOpacity: 1 // opaque
}),
Plot.axisY({
tickSize: 0, // don’t draw ticks
dx: 38, // offset right
dy: -6, // offset up
lineAnchor: "bottom", // draw labels above grid lines
tickFormat: (d, i, _) => (i === _.length - 1 ? `$${d}` : d)
}),
Plot.ruleY([0]),
Plot.line(aapl, {x: "Date", y: "Close", markerEnd: "dot"})
]
})
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.line(aapl, {x: "Date", y: "Close"}),
Plot.gridX(),
Plot.axisX({
ticks: 20,
tickFormat: (
(formatYear, formatMonth) => (x) =>
d3.utcMonth.count(d3.utcYear(x), x) < 1
? `${formatMonth(x)}\n${formatYear(x)}`
: formatMonth(x)
)(d3.utcFormat("%Y"), d3.utcFormat("%b"))
})
]
})
Plot.plot({
width: 960,
x: {round: true, nice: d3.utcWeek},
y: {inset: 6},
marks: [
Plot.frame({fill: "#eaeaea"}),
Plot.frame({anchor: "bottom"}),
Plot.axisX({ticks: "year", tickSize: 28, tickPadding: -11, tickFormat: " %Y", textAnchor: "start"}),
Plot.axisX({ticks: "month", tickSize: 16, tickPadding: -11, tickFormat: " %b", textAnchor: "start"}),
Plot.gridX({ticks: "week", stroke: "#fff", strokeOpacity: 1, insetBottom: -0.5}),
Plot.line(aapl.slice(-340, -10), {x: "Date", y: "Close", curve: "step"})
]
})
Plot.plot({
marginRight: 0,
marks: [
Plot.ruleY([0]),
Plot.line(aapl, {x: "Date", y: "Close"}),
Plot.gridY({x: (y) => aapl.find((d) => d.Close >= y)?.Date, insetLeft: -6}),
Plot.axisY({x: (y) => aapl.find((d) => d.Close >= y)?.Date, insetLeft: -6, textStroke: "white"})
]
})
Plot.axisX(d3.ticks(0, 1, 10), {color: "red"}).plot() // text fill and tick stroke
Plot.axisX(d3.ticks(0, 1, 10), {stroke: Plot.identity, strokeWidth: 3, tickSize: 10}).plot() // tick stroke
Plot.axisX(d3.ticks(0, 1, 10), {fill: "red"}).plot() // text fill
Plot.plot({
height: 40,
style: "background: #777;",
x: {domain: [0, 100]},
marks: [
Plot.axisX({
stroke: "white",
textStroke: "white",
textStrokeWidth: 3,
textStrokeOpacity: 0.6
})
]
})
chart = Plot.plot({
facet: {marginRight: 80},
grid: true,
marks: [
Plot.frame(),
Plot.dot(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm", fx: "sex", fy: "species"}),
Plot.axisX({color: "red", anchor, facetAnchor: facetAnchor === "auto" ? undefined : facetAnchor}),
Plot.axisFx({color: "blue", anchor: anchor === "top" ? "bottom" : "top"}) // place fx axis opposite x
]
})
Plot.plot({
height: 80,
grid: true,
x: {type: "linear"},
marks: [
Plot.axisX({anchor: "top", label: "top-left", labelAnchor: "left"}),
Plot.axisX({anchor: "top", label: "top-center", labelAnchor: "center", ticks: []}),
Plot.axisX({anchor: "top", label: "top-right", labelAnchor: "right", ticks: []}),
Plot.axisX({anchor: "bottom", label: "bottom-left", labelAnchor: "left"}),
Plot.axisX({anchor: "bottom", label: "bottom-center", labelAnchor: "center", ticks: []}),
Plot.axisX({anchor: "bottom", label: "bottom-right", labelAnchor: "right", ticks: []})
]
})
Plot.plot({
grid: true,
y: {type: "linear"},
marks: [
Plot.axisY({anchor: "left", label: "left-top", labelAnchor: "top"}),
Plot.axisY({anchor: "left", label: "left-center", labelAnchor: "center", ticks: []}),
Plot.axisY({anchor: "left", label: "left-bottom", labelAnchor: "bottom", ticks: []}),
Plot.axisY({anchor: "right", label: "right-top", labelAnchor: "top"}),
Plot.axisY({anchor: "right", label: "right-center", labelAnchor: "center", ticks: []}),
Plot.axisY({anchor: "right", label: "right-bottom", labelAnchor: "bottom", ticks: []})
]
})
responses = d3.tsvParse(`name\tvalue
Family in feud with Zucker\u00adbergs\t.17
Committed 671 birthdays to memory\t.19
Ex is doing too well\t.10
High school friends all dead now\t.15
Discovered how to “like” things mentally\t.27
Not enough politics\t.12
`)
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.
