2025-05-30 19:59:02 +00:00
|
|
|
import _ from "lodash-es"
|
2023-07-17 05:21:05 +03:00
|
|
|
|
2025-05-30 19:59:02 +00:00
|
|
|
const url = "https://api.github.com/search/repositories?q=stars:%3E1&sort=stars"
|
2023-07-17 05:21:05 +03:00
|
|
|
const resp = await fetch(url)
|
|
|
|
|
const repos = await resp.json()
|
|
|
|
|
const langs = _(repos.items)
|
|
|
|
|
.map(r => r.language)
|
|
|
|
|
.filter(l => l != null)
|
|
|
|
|
.countBy()
|
|
|
|
|
.toPairs()
|
2025-05-30 19:59:02 +00:00
|
|
|
.map(([language, count]) => ({ language, count }))
|
2023-07-17 05:27:25 +03:00
|
|
|
.value()
|
2023-07-17 05:21:05 +03:00
|
|
|
|
2025-05-30 19:59:02 +00:00
|
|
|
import { barY } from "@observablehq/plot"
|
2023-07-17 05:21:05 +03:00
|
|
|
|
2023-10-02 03:36:13 +03:00
|
|
|
/*
|
2025-09-26 05:27:57 +00:00
|
|
|
Move the cursor to the following line and see the plot displayed alongside
|
|
|
|
|
the code. Use the @dom pragma to display DOM content inline
|
2023-10-02 03:36:13 +03:00
|
|
|
*/
|
|
|
|
|
|
2025-09-26 05:27:57 +00:00
|
|
|
// @dom
|
2025-05-30 19:59:02 +00:00
|
|
|
barY(langs, {
|
|
|
|
|
x: "language",
|
|
|
|
|
y: "count",
|
|
|
|
|
sort: { x: "y", reverse: true },
|
|
|
|
|
fill: "purple",
|
|
|
|
|
}).plot()
|
