Public
Edited
Jul 27, 2023
Insert cell
Insert cell
Plot.plot({
x: {label: "Trademarks"},
y: {type: "band", label: "Starting Letter"},
marks: [
Plot.barX(data, {
fill: "#ccc",
x: "length",
y: "starting",
sort: {y: "x", reverse: true}
}),
Plot.text(data, {
x: d => 0,
y: "starting",
text: d => {
// clip text
const len = d.list_text.length
const size = 105
return len > size ? d.list_text.slice(0, size) + "...": d.list_text
},
fill: "#555",
textAnchor: "start",
dx: 5
})
]
})
Insert cell
Insert cell
data = d3.groups(apple, d => d.start).map(d => {
return {
starting: d[0],
length: d[1].length,
list_text: d[1].map(d => d.name).join(", ")
}
})
Insert cell
apple = raw.map(d => ({...d, start: d.name[0].toUpperCase()}))
Insert cell
raw = FileAttachment("apple-trademarks.csv").csv()
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more