The avatar for @anjana
Anjana Vakil
Engineer & Educator | Observable Ambassador | Karaoke Enthusiast
Published
Edited
May 27, 2021
11 forks
22 stars
3
Talks
The Art of Functional Programming
(7)
(Easier) Interactive Data Visualization in ReactIt’s a picture! It’s a program!! It’s Piet!!!
Visualizing Open-Source Code, Contributions & Communities
the power of js generatorsThe Universe in a Single Arrow
Also listed in…
Observable for Developers
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
jobs = FileAttachment("testJobs.json").json()
Insert cell
import { vl } from "@vega/vega-lite-api"
Insert cell
// 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()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof orgRepo = Text({ value: "d3/d3", label: "owner/repo", submit: "Go" })
Insert cell
punchCard = (await fetch(
`https://api.github.com/repos/${orgRepo}/stats/punch_card`,
requestInit
)).json()
Insert cell
Insert cell
// wrangle data
punchCardData = punchCard.map(([dayIndex, hour, commits]) => ({
day: days[dayIndex],
hour,
commits
}))
Insert cell
// visualize commit times
vl
.markSquare()
.data(punchCardData)
.encode(
vl
.y()
.fieldO('day')
.sort(days),
vl.x().fieldO('hour'),
vl.size().fieldQ('commits')
)
.render()
Insert cell
Insert cell
Insert cell
Insert cell
contributorsJson = (await fetch(
`https://api.github.com/repos/${orgRepo}/stats/contributors`,
requestInit
)).json()
Insert cell
// 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
}))
Insert cell
// display the bubble chart we import below
bubbleChart
Insert cell
// import bubble chart & inject our data
import { chart as bubbleChart } with {
contributors as data
} from "@d3/bubble-chart"
Insert cell
// 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);
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more