31:T4cc,animation = { replay; const height = 70; const marginLeft = 40; const marginRight = 40; const duration = 5000; const x = d3.scaleLinear( d3.extent(data, (d) => d.date), [marginLeft, width - marginRight] ); const t = d3.scaleLinear( d3.extent(data, (d) => d.date), [0, duration] ); const r = d3.randomNormal(0, height / 4); const sel = d3 .create("svg") .attr("width", width) .attr("height", height) .style("overflow", "visible"); const g = sel.append("g").attr("transform", `translate(0, ${height / 2})`); if (pages_remaining === 0) { g.append("text") .text("•") .attr("transform", `translate(${x.range()[0]}, 0)`) .transition() .ease(d3.easeLinear) .duration(t.range()[1]) .attr("transform", `translate(${x.range()[1]}, 0)`) .remove(); g.selectAll("text.star") .data(dates) .join("text") .attr("class", "star") .attr("transform", (date) => `translate(${x(date)}, 0)`) .attr("opacity", 0) .text("⭐️") .transition() .delay((date) => t(date)) .attr("transform", (date) => `translate(${x(date)}, ${r()})`) .attr("opacity", 1); } return sel.node(); }32:T563,data = { // Start with an empty array of results; we'll yield it repeatedly as more results come in const S = []; yield S; // Get total number of pages from response headers let pages = await fetchGithubResponse(`/repos/${repo}/stargazers`, {per_page: 100}, fetchOptions) .then(d => [...d.headers].find(d => d[0] === "link")?.[1].split(/,/).pop().match(/&page=(\d+)/)?.[1] || 1); let l = Math.min(maxPages, pages); mutable pages_remaining = l; // Fetch the first page, last page, and then remaining pages shuffled for (const page of new Set([1, +pages].concat(d3.shuffle(d3.range(2, +pages))))) { const s = await fetchGithub(`/repos/${repo}/stargazers`, {per_page: 100, page}, fetchOptions); // If there's an error, return if (!s) return; if (s.message) return mutable error_message = s.message; // Push a transformed version of the stargazer response, sort it, and yield it s.forEach((u, i) => { S.push({ login: u.user.login, id: u.user.id, date: new Date(u.starred_at), count: 100 * (page - 1) + i + 1, repo }); }); S.sort((a, b) => a.count - b.count); yield S; // Decrement log of remaining pages mutable pages_remaining = --l; if (l === 0) break; // Wait before next request await Promises.delay(150); } // Final results yield S; }33:[] 2f:{"title":"GitHub Stargazer History","cells":[{"id":0,"value":"# GitHub Stargazer History\nGitHub shows you how many people have starred a repository, and who they are. The website doesn’t show _when_ they starred the repo, but the API does. We can use this to show a history of the number of stars a repo gets over time, with tagged releases labeled for context.\n\nThis example shows who’s starred [Observable Plot](https://github.com/observablehq/plot), but you can change it to any repo. To increase your rate limit or show private repos, [authenticate with GitHub](#instructions).","pinned":false,"hidden":false,"mode":"md"},{"id":318,"value":"repo = \"observablehq/plot\"\n// repo = \"observablehq/runtime\"\n// repo = \"fivethirtyeight/russian-troll-tweets\"\n// repo = \"sveltejs/kit\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":474,"value":"Plot.plot({\n width,\n marginLeft: 40,\n marginBottom: -40,\n marginTop: 0,\n x: { inset: 20, domain: d3.extent(data, (d) => d.date) },\n y: {ticks : 0},\n height: 50,\n marks: [\n Plot.dot(tags, {\n x: \"date\",\n stroke: \"currentColor\",\n fill: \"white\",\n r: 1\n }),\n Plot.text(tags, {\n x: \"date\",\n text: \"name\",\n textAnchor: \"start\",\n rotate: -30,\n dx: 5\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"chart = Plot.plot({\n marks: [\n Plot.ruleY([0]),\n Plot.line(data, {\n x: \"date\",\n y: \"count\",\n stroke: \"steelblue\",\n strokeWidth: 2.5\n }),\n Plot.text(data, Plot.selectMaxX({\n x: \"date\",\n y: \"count\",\n text: d => d.count.toLocaleString(\"en-US\"),\n textAnchor: \"start\",\n dx: 3,\n dy: 6\n }))\n ],\n x: { grid: true },\n y: { type: \"linear\", nice: true, grid: true, label: `⭐️ Stargazers for ${repo}` },\n width,\n marginRight: 40\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":842,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":878,"value":"viewof replay = Inputs.button(\"Replay\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"

\n \n \n \n \n \n ${topDays.slice(0, 5).map(d => htl.html.fragment`\n \n \n `)}\n \n

Top days
${d[0].toLocaleDateString(\"en-US\", {dateStyle: \"full\"})}	+${d[1].length}

\n \n \n \n \n \n \n ${milestones.map(d => htl.html.fragment`\n \n \n `)}\n \n \n \n \n \n

Milestones
${d[0] === 1 ? `First` : `${d[0]}th`} stargazer	${d[1] ? `${d[1].login} (${d[1].date.toLocaleDateString(\"en-US\", {dateStyle: \"long\"})})` : \"Unknown\"}
Latest stargazer	${d3.greatest(data, d => d.date).login} (${d3.greatest(data, d => d.date).date.toLocaleDateString(\"en-US\", {dateStyle: \"long\"})})

","pinned":false,"hidden":false,"mode":"html"},{"id":302,"value":"

[View all stargazers for ${repo}](https://github.com/${repo}/stargazers)

","pinned":false,"hidden":false,"mode":"md"},{"id":697,"value":"instructions = md`---\n\n## How to authenticate with GitHub\n\nGetting the stargazers for just one repo can require a lot of API requests: one per hundred stars, plus one per tagged release. Without authentication, you are rate-limited to 60 requests per hour; with a token, it goes up to 5,000 requests per hour.\n\nTo authenticate, first fork this notebook. Then create a GitHub [personal access token](https://github.com/settings/tokens) with no scopes selected, or the **repo** scope if you need access to a private repository. \n\nSave the token in a [Secret](https://observablehq.com/settings/secrets) named \\`GITHUB_ACCESS_TOKEN\\` and refresh this page. Treat the Secret like a password! Do not share or publish a notebook with a Secret; if you do, the Secret will refuse to load.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"apiKeyStatus","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"rateLimitSummary","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"Data loads incrementally, and is limited by GitHub to the first 40,000 stars. To get a better sense of the total distribution faster, this function initially loads the first and the last chunks of stargazers; then it loads the middle chunks in random order.","pinned":false,"hidden":false,"mode":"md"},{"id":81,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":980,"value":"To keep you from blowing through your rate limit on one popular repo, we limit the number of pages of stargazers we’ll fetch; it’s higher if you’ve authenticated.","pinned":false,"hidden":false,"mode":"md"},{"id":964,"value":"maxPages = hasApiKey ? 50 : 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":821,"value":"For debugging, you can see the number of pages left to load and any error messages.","pinned":false,"hidden":false,"mode":"md"},{"id":354,"value":"mutable pages_remaining = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":525,"value":"mutable error_message = {}","pinned":true,"hidden":false,"mode":"ojs"},{"id":830,"value":"To add context to the timeline of stars, we load any tagged releases. For each tag, we fetch the associated commit to get the date.","pinned":false,"hidden":false,"mode":"md"},{"id":562,"value":"tags = {\n const tags = await fetchGithub(`/repos/${repo}/tags`);\n for (const tag of tags) {\n const commit = await fetchGithub(`/repos/${repo}/commits/${tag.commit.sha}`);\n tag.commit = commit;\n tag.date = new Date(commit.commit.author.date);\n }\n return tags;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":984,"value":"For the exploding-stars animation, we want to show one star per stargazer even if we haven’t loaded their name and timestamp. So the array below has one date for each stargazer: the actual date if we know it, or else an interpolated date.","pinned":false,"hidden":false,"mode":"md"},{"id":975,"value":"dates = {\n const D = [];\n const max = data[data.length - 1].count;\n let i = 0;\n for (let count = 1; count <= max; count++) {\n while (data[i].count < count) i++;\n const date =\n data[i].count === count\n ? data[i].date\n : d3.interpolate(\n data[i - 1].date,\n data[i].date\n )((count - data[i - 1].count) / (data[i].count - data[i - 1].count));\n D.push(date);\n }\n return D;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":835,"value":"We compute a few additional stats for the summary tables: the days on which the repo got the most stars, and the round-number power-of-ten milestones (like hundredth star).","pinned":false,"hidden":false,"mode":"md"},{"id":634,"value":"topDays = d3.groups(data, d => d3.utcDay.floor(d.date)).sort((a, b) => d3.descending(a[1].length, b[1].length))","pinned":true,"hidden":false,"mode":"ojs"},{"id":663,"value":"milestones = d3\n .range(Math.ceil(Math.log10(data[data.length - 1].count)))\n .map((n) => 10 ** n)\n .map((n) => [n, data.find((d) => d.count === n)])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1010,"value":"Finally, fetching the date at which a person starred the repo (`starred_at`) requires passing a special header.","pinned":false,"hidden":false,"mode":"md"},{"id":796,"value":"fetchOptions = ({\n headers: {\n accept: \"application/vnd.github.v3.star+json\" // necessary to get the starred_at field\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":544,"value":"import {\n fetchGithub,\n fetchGithubResponse,\n hasApiKey,\n apiKeyStatus,\n rateLimitSummary\n} from \"@observablehq/github-actions-workflows-api\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":826,"value":"// For a notebook to access Secrets, it must statically reference one; this cell grants Secret access to the notebook from which we import the GitHub API helpers. `undefined &&` prevents the Secret from appearing in plaintext in the Inspector.\nundefined && Secret(\"GITHUB_ACCESS_TOKEN\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}