The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Plot.plot({
marginTop: 80,
marginLeft: 120,
r: {
type: "linear",
range: [5, 28]
},
color: {
scheme: "RdYlGn",
domain: [1, 5]
},
x: {
domain: ["Z-Score", "", "Key Skill", " ", ...fields],
axis: "top",
label: null,
tickSize: 0,
tickRotate: -35
},
y: {
domain: d3
.groupSort(
data,
// Sort by Z-Score, break ties by Key Skill * epsilon
(v) =>
v.find((d) => d.field === "Z-Score").value +
1e-6 * v.find((d) => d.field === "Key Skill").value,
(d) => d.name
)
.reverse(),
label: null,
tickSize: 0
},
marks: [
Plot.dot(data, {
filter: (d) => d.field !== "Z-Score",
x: "field",
y: "name",
r: "value",
fill: "value"
}),
Plot.dot(data, {
filter: (d) => d.field === "Z-Score",
x: "field",
y: "name",
r: (d) => d["value"] * 0.5,
fill: "steelblue",
fillOpacity: (d) => (d["value"] - 7) * 0.6
}),
Plot.text(data, {
x: "field",
y: "name",
text: "value",
fill: "white"
})
],
width: 700,
height: 500
})
candidates = FileAttachment("candidates.csv").csv({ typed: true })
fields = ["Z-Score"].concat(candidates.columns.slice(3))
// reshape
data = candidates
.map((d) =>
fields.map((field) => ({
name: d.Candidate,
value: field === "Z-Score" ? d["Z"] : d[field],
field
}))
)
.flat()
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.
