Q_D_Intrctv_ObservableJS

Observable JS

This Quarto document is made interactive using Observable JS. Interactive documents allow readers to modify parameters and see the results immediately. Learn more about OJS interactive documents at https://quarto.org/docs/interactive/ojs/.

Bubble Chart

This example uses a D3 bubble chart imported from Observable HQ to analyze commits to GitHub repositories.

Select a repository to analyze the commits of:

viewof repo = Inputs.radio(
  [
    "pandas-dev/pandas",
    "tidyverse/ggplot2",
  ], 
  { label: "Repository:", value: "pandas-dev/pandas"}
)

Fetch the commits for the specified repo using the GitHub API:

d3 = require('d3')
contributors = await d3.json(
  "https://api.github.com/repos/" + repo + "/stats/contributors"
)
commits = contributors.map(contributor => {
  const author = contributor.author;
  return {
    name: author.login,
    title: author.login,
    group: author.type,
    value: contributor.total
  }
})

Note that the repo variable is bound dynamically from the radio input defined above. If you change the input the contributors query will be automatically re-executed.

View the commits sorted by most to least:

Inputs.table(commits, { sort: "value", reverse: true })

Visualize using a D3 bubble chart imported from Observable HQ:

import { chart } with { commits as data } 
  from "@d3/d3-bubble-chart"
chart