The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Plot.plot({
marks: [
Plot.cell(cooccurrences, { // a cell is a rectangle
x: "item_a", // for each item_a there will be an x position
y: "item_b", // for each item_b there will be a y position
fill: "count" // the fill color will correspond to the count
})
]
})
Plot.plot({
marks: [
Plot.cell(cooccurrences, {
x: "item_a",
y: "item_b",
fill: "count"
})
],
x: { tickRotate: 90 }, // rotate the ticks by 90 degrees
marginLeft: 250, // add spacing on the left
marginRight: 100, // add spacing on the right
marginBottom: 200, // add spacing on the bottom
width: width // set the width to take up the whole width (via the built-in responsive width variable)
})
Plot.plot({
marks: [
Plot.cell(cooccurrences, {
x: "item_a",
y: "item_b",
fill: "count",
sort: { y: "fill", x: "fill", reverse: true, limit: 20 } // sort the x and y axis by the value in the fill channel (count)
})
],
x: { tickRotate: 90 },
marginLeft: 250,
marginRight: 100,
marginBottom: 200,
width
})
Plot.plot({
marks: [
Plot.cell(cooccurrences, {
x: "item_a",
y: "item_b",
fill: "count",
sort: { y: "fill", x: "fill", reverse: true, limit: 20 }
})
],
x: { tickRotate: 90 },
color: { scheme: "greens", legend: true }, // change the color scheme and show a legend
grid: true, // render a grid for the x and y axes
marginLeft: 250,
marginRight: 100,
marginBottom: 200,
width
})
Plot.plot({
marks: [
Plot.cell(cooccurrences, {
x: "item_a",
y: "item_b",
fill: "count",
title: d => `${d.item_a} + ${d.item_b} = ${d.count}`, // add tooltips for each cell
sort: { y: "fill", x: "fill", reverse: true, limit: 20 }
}),
// Add a textual annotation to each cell
Plot.text(cooccurrences, colorContrast({ // colorContrast is a transform that changes the text color for accessibility
x: "item_a",
y: "item_b",
text: "count",
fill: "count",
pointerEvents: "none", // make the text ignore the mouse pointer (so the cell tooltip works)
}))
],
x: { tickRotate: 90},
color: { scheme: "greens"},
marginLeft: 250,
marginRight: 100,
marginBottom: 200,
grid: true,
width
})
import {Plot} from "@mkfreeman/plot-tooltip"
import { colorContrast } from "@observablehq/plot-colorcontrast-custom-transform"
function Matrix(data, {
width = 640, // have a default width but allow the user to override
top = 20 // show top 20 items by default
} = {}) { // the empty {} allows the user to ignore the 2nd parameter
return Plot.plot({
marks: [
Plot.cell(data, {
x: "item_a",
y: "item_b",
fill: "count",
// fillOpacity: 0.5,
stroke: "gray",
title: d => `${d.item_a} + ${d.item_b} = ${d.count}`,
sort: { y: "fill", x: "fill", reverse: true, limit: top }
}),
width > 750 && top < 30 ? Plot.text(data, colorContrast({
x: "item_a",
y: "item_b",
text: "count",
fill: "count",
title: d => `${d.item_a} + ${d.item_b} = ${d.count}`,
})) : null
],
x: { tickRotate: 90, label: null},
y: { label: null },
color: { scheme: "greens"},
marginLeft: 250,
marginRight: 100,
marginBottom: 200,
grid: true,
width: width
})
}
Matrix(cooccurrences, { width: width })
viewof search2 = Inputs.search(cooccurrences)
viewof range = Inputs.range([20, 100], {label: "Top X", step: 1, value: 20})
Matrix(search2, { width: width, top: range })
import { navigation, previews, notebooks, collection} from "@observablehq/which-items-are-purchased-together"
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.
