Engineer & Educator | Observable Ambassador | Karaoke Enthusiast
Published
Edited
May 27, 2021
11 forks
22 stars
jobs = FileAttachment("testJobs.json").json()
import { vl } from "@vega/vega-lite-api"
// visualize job name, conclusion, & duration (minutes) by run
vl
.markSquare()
.data(jobs)
.encode(
vl.x().fieldO('run_number'),
vl.y().fieldN('name'),
vl
.color()
.fieldN('conclusion')
.scale({ range: ["red", "yellow", "green"] }),
vl.size().fieldQ('minutes')
)
.render()
viewof orgRepo = Text({ value: "d3/d3", label: "owner/repo", submit: "Go" })
punchCard = (await fetch(
`https://api.github.com/repos/${orgRepo}/stats/punch_card`,
requestInit
)).json()
// wrangle data
punchCardData = punchCard.map(([dayIndex, hour, commits]) => ({
day: days[dayIndex],
hour,
commits
}))
// visualize commit times
vl
.markSquare()
.data(punchCardData)
.encode(
vl
.y()
.fieldO('day')
.sort(days),
vl.x().fieldO('hour'),
vl.size().fieldQ('commits')
)
.render()
contributorsJson = (await fetch(
`https://api.github.com/repos/${orgRepo}/stats/contributors`,
requestInit
)).json()
// wrangle data
contributors = contributorsJson.map(c => ({
name: c.author.login,
title: c.author.login,
group: orgMembers.includes(c.author.login) ? 'member' : 'external', // orgMembers is fetched below
value: c.total
}))
// display the bubble chart we import below
bubbleChart
// import bubble chart & inject our data
import { chart as bubbleChart } with {
contributors as data
} from "@d3/bubble-chart"
// get org members so we can group by membership
orgMembers = {
const members = await fetch(
`https://api.github.com/orgs/${orgRepo.split('/')[0]}/members?per_page=100`
);
return (await members.json()).map(m => m.login);
}
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.
