Public
Edited
Feb 2, 2023
2 forks
Plot.plot({
marks: [
Plot.cell(selected_fam.deps, { // a cell is a rectangle
x: "downstream_asn", // for each item_a there will be an x position
y: "upstream_asn", // for each item_b there will be a y position
fill: "dependency_pct", // the fill color will correspond to the count
sort: { y: "fill", x: "fill", reverse: true, limit: 20 }
}),
// Add a textual annotation to each cell
/* Plot.text(selected_fam.deps, colorContrast({ // colorContrast is a transform that changes the text color for accessibility
x: "downstream_asn",
y: "upstream_asn",
text: "dependency_pct",
fill: "dependency_pct",
pointerEvents: "none", // make the text ignore the mouse pointer (so the cell tooltip works)
})) */
],
color: { scheme: "blues", legend: true }, // change the color scheme and show a legend
grid: true,
marginLeft: 300,
marginBottom: 400,
x: { tickRotate: 90},
})
familyHegemony = FileAttachment("family-hegemony@4.json").json()
import { colorContrast } from "@observablehq/plot-colorcontrast-custom-transform"
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.
