Data Visualization Consultant, and an enthusiastic generalist in building software systems
Plot.plot({
x: {
label: "Published Date →"
},
y: {
label: "Loved ↑"
},
marks: [
Plot.dot(mostLovedBlocks, {
x: "createdAt",
y: "love",
fill: "primaryColor"
})
]
})
Plot.plot({
x: {
label: "Loved Score →"
},
facet: {
data: mostLovedBlocks,
y: (d) => d.createdAt.getUTCFullYear()
},
marks: [
Plot.dot(mostLovedBlocks, {
x: "love",
fill: "primaryColor",
fillOpacity: 0.2
})
]
})
Plot.plot({
height: 950,
x: {
axis: null,
padding: 0
},
y: {
padding: 0,
tickFormat: Plot.formatWeekday("en", "narrow"),
tickSize: 0
},
fy: {
reverse: false
},
facet: {
data: mostLovedBlocks,
y: (d) => d.createdAt.getUTCFullYear()
},
color: {
type: "log",
scheme: "RdPu"
},
marks: [
Plot.cell(mostLovedBlocks, {
x: (d) => d3.utcWeek.count(d3.utcYear(d.createdAt), d.createdAt),
y: (d) => d.createdAt.getUTCDay(),
fill: "love",
title: (d) =>
`${d.description} by ${d.userId}\nLoved: ${d.love}\nForks: ${d.forks}\nStars: ${d.stars}`,
inset: 0.5
})
]
})
Plot.plot({
y: {
label: "Loved ↑",
tickSize: 0
},
x: {
tickSize: 0
},
marks: [
Plot.dot(mostLovedBlocks, {
x: "createdAt",
y: "love",
fill: "#eee",
r: 2
}),
Plot.dot(mostLovedBlocks.slice(0, 10), {
x: "createdAt",
y: "love",
fill: "primaryColor",
stroke: "primaryColor",
fillOpacity: 0.75,
r: 5,
title: (d) =>
`${d.description} by ${d.userId}\nLoved: ${d.love}\nForks: ${d.forks}\nStars: ${d.stars}`
}),
Plot.text(mostLovedBlocks.slice(0, 10), {
x: "createdAt",
y: "love",
// fill: "primaryColor",
text: "userId",
dy: -8
})
]
})
blocksByUsers = d3.rollups(
mostLovedBlocks,
(v) => v.length,
(d) => d.userId
)
top10LovedBlockCreators = blocksByUsers
.sort((a, b) => d3.descending(a[1], b[1]))
.slice(0, 10)
Table(mostLovedBlocks)
mostLovedBlocks = blocksWithLove
.filter((b) => b.love)
.sort((a, b) => d3.descending(a.love, b.love))
.slice(0, 2021)
.map((b) => {
b.createdAt = new Date(b.createdAt);
b.updatedAt = new Date(b.updatedAt);
return b;
})
import { Plot, d3 } from "@observablehq/plot"
import { blocksWithLove } from "@git-ashish/d3-parade-2021"
import { html, Table } from "@observablehq/inputs"
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.
