The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published unlisted
Edited
Mar 22, 2022
5 stars
Plot.plot({
x: {axis: null},
y: {axis: null},
marks: [Plot.arc([[0,1], [1, 2], [2, 2.5]], {
startAngle: "0",
endAngle: "1",
fill: (_,i) => `a${i}`,
innerRadius: () => 60, // 🤔 as a percent of maximum size
outerRadius: (_, i) => 80 + 20 * i, // same
stroke: "white"
})],
height: 300
})
Plot.plot({
x: {axis: null},
y: {axis: null},
marks: [Plot.arc([1,2,3,4], {
transform: d3.pie(),
fill: (_,i) => `a${i}`,
innerRadius: 4,
outerRadius: ({data}) => 25 * data,
stroke: "white",
title: d => `${d.data}`
})]
})
Plot.plot({
marks: [Plot.arc([1,2,3,4,5,6,7,8], {
transform: d3.pie(),
fill: "none",
title: ({data}) => `slice ${data}`,
label: ({data}) => data
})]
})
Plot.plot({
x: {axis: null},
y: {axis: null},
marks: [Plot.pie([1,2,3,1,5,6,1,5], {
value: d => Math.sqrt(d),
sort: false,
// sortValues: (a, b) => a - b,
startAngle: -0.5,
endAngle: 2 * Math.PI - 1,
padAngle: 0.02,
innerRadius: 90, // passed to arc
fill: (_,i) => i,
label: ({data}) => data
})]
})
Plot.plot({
x: {axis: null},
y: {axis: null},
marks: [Plot.arc([[0,1], [1, 2], [2, 2.5]], {
startAngle: "0",
endAngle: "1",
})],
width: 200,
height: 200,
})
Plot.plot({
marks: [
Plot.pie(d3.rollup(penguins, v => v.length, d => d.species), {
value: d => d[1],
innerRadius: 96,
outerRadius: 99,
sortValues: (a, b) => b[1] - a[1],
startAngle: -2.5,
endAngle: Math.PI * 2 - 2.5,
padAngle: 0.3,
fill: ({data}) => data["0"],
x: constant(d3.median(penguins, d => d.bill_length)),
y: constant(d3.median(penguins, d => d.bill_depth)),
}),
Plot.dot(penguins, {
x: "bill_length",
y: "bill_depth",
fill: "species",
stroke: "white"
}),
]
})
Plot.plot({
marks: [
Plot.pie(penguins, {
transform: (data, facets) => ({
facets,
data: d3.rollup(
data,
(v) => d3.median(v, (d) => d.body_mass),
(d) => d.species
)
}),
value: (d) => d[1],
innerRadius: 96,
outerRadius: 99,
sortValues: (a, b) => b[1] - a[1],
startAngle: -2.5,
endAngle: Math.PI * 2 - 2.5,
padAngle: 0.3,
fill: ({ data }) => data["0"],
x: constant(d3.median(penguins, (d) => d.bill_length)),
y: constant(d3.median(penguins, (d) => d.bill_depth))
}),
Plot.dot(penguins, {
x: "bill_length",
y: "bill_depth",
fill: "species",
stroke: "white"
})
]
})
Plot.plot({
marginLeft: 120,
facet: {
data: penguins,
x: "sex",
y: "island"
},
marks: [
Plot.pie(penguins, {
transform: data => d3.rollup(data, v => ({
num: v.length,
median: d3.median(v, d => d.body_mass)
}), d => d.species),
value: d => d[1].num,
innerRadius: 0,
outerRadius: ({data}) => data[1].median * 0.02,
fill: ({data}) => data["0"],
label: ({data}) => data["0"]
})
]
})
constant = x => () => x
Plot.plot({
x: { axis: null },
y: { axis: null },
marks: [Plot.arc([1,2,3,4], {
transform: d3.pie(),
innerRadius: ({data: d}) => 10 * d,
outerRadius: ({data: d}) => 25 * d,
fill: ({data: d}) => `a${d}`,
label: (_,i) => i
})],
width: 300,
height: 300
})
import {population} from "@d3/donut-chart"
Plot.plot({
overflow: "visible",
color: {
domain: [0, population.length],
scheme: "spectral"
},
marks: [Plot.pie(population, {
value: "value",
sort: false,
fill: (_, i) => i,
innerRadius: 70,
stroke: "white",
title: ({data}) => data["value"].toLocaleString(),
label: ({data}) => data["name"]
})],
x: { axis: null },
y: { axis: null }
})
Plot.plot({
marks: [Plot.arc({length: 400}, {
startAngle: 0,
endAngle: 2 * Math.PI,
fill: (_,i) => `a${i}`,
innerRadius: () => Math.random() * 6,
outerRadius: 7,
stroke: "white",
x: Math.random,
y: Math.random,
})]
,height: 500
})
import {data as penguins} from "@observablehq/plot-exploration-penguins"
Plot.plot({
facet: {
data: penguins,
x: "species",
y: "sex"
},
marks: [Plot.arc(penguins, {
startAngle: -.2 * Math.PI,
endAngle: 1.3 * Math.PI,
fill: "species",
innerRadius: () => Math.random() * 6,
outerRadius: d => Math.sqrt(d["body_mass"]) / 4,
stroke: "white",
x: "bill_length",
y: "bill_depth",
})],
height: 500
})
Plot = FileAttachment("plot.umd@7.js").url().then(require)
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.
