OS JS

Author

AHS

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"}
)

repo = "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
  }
})

d3 = Object {format: ƒ(t), formatPrefix: ƒ(t, n), timeFormat: ƒ(t), timeParse: ƒ(t), utcFormat: ƒ(t), utcParse: ƒ(t), Adder: class, Delaunay: class, FormatSpecifier: ƒ(t), InternMap: class, InternSet: class, Node: ƒ(t), Path: class, Voronoi: class, ZoomTransform: ƒ(t, n, e), active: ƒ(t, n), arc: ƒ(), area: ƒ(t, n, e), areaRadial: ƒ(), ascending: ƒ(t, n), …}

OJS Error

Error: 403

OJS Runtime Error

403

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 })

OJS Runtime Error

403

Visualize using a D3 bubble chart imported from Observable HQ:

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

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