31:T68b,references = slide.md`### Getting started with dataviz may be easier than you think! - You can play with the example code right now: - [@stwind/github-files-graph](https://observablehq.com/@stwind/github-files-graph) - [@anjana/collapsible-github-tree](https://observablehq.com/@anjana/collapsible-github-tree) - [@anjana/zoomable-circle-packing-files-in-a-github-repo-by-size](https://observablehq.com/@anjana/zoomable-circle-packing-files-in-a-github-repo-by-size) - [@stvkas/software-engineering-visualization-with-githubs-api](https://observablehq.com/@stvkas/software-engineering-visualization-with-githubs-api) - [@chitacan/github-merged-pull-request-analysis](https://observablehq.com/@chitacan/github-merged-pull-request-analysis) - [@rlesser/the-d3-github-network-2013-2021](https://observablehq.com/@rlesser/the-d3-github-network-2013-2021) - [@justingosses/public-engagement-with-nasas-open-source-code-projects-on-g](https://observablehq.com/@justingosses/public-engagement-with-nasas-open-source-code-projects-on-g) - Create a [free Observable account](https://observablehq.com/product) to fork & save your work - _Psst: Save your Github token as a [Secret](https://observablehq.com/@observablehq/secrets) to avoid rate limits!_ - Learn more about [Vega-Lite](https://observablehq.com/collection/@observablehq/observable-for-vega-lite) & [D3](https://observablehq.com/collection/@d3/learn-d3) - _Get help in the [Observable forum](https://talk.observablehq.com/) & [D3 Slack](https://d3-slackin.herokuapp.com/)!_ `32:[{"id":"b9d4943b3eebb8913b23e668fe0da7fdbd3b46406c6ab23ec5c5fe2a788d7b018364335112d365cfeb58ed9affb39eb06ccd07c1709727d476cd22190a83200f","href":"https://static.observableusercontent.com/files/b9d4943b3eebb8913b23e668fe0da7fdbd3b46406c6ab23ec5c5fe2a788d7b018364335112d365cfeb58ed9affb39eb06ccd07c1709727d476cd22190a83200f","name":"image.png","type":"image/png","lastModified":1616460344990.614,"size":212959},{"id":"28ef639c0205b47fd0b51e6467c3f4bcee5d166e209d73cf7bb7042068ddd77d05c1bd25d4757fe3aceee7da6fda3b6eac5b56e2c5d5a373f0db3e6fd4dbfb41","href":"https://static.observableusercontent.com/files/28ef639c0205b47fd0b51e6467c3f4bcee5d166e209d73cf7bb7042068ddd77d05c1bd25d4757fe3aceee7da6fda3b6eac5b56e2c5d5a373f0db3e6fd4dbfb41","name":"image@1.png","type":"image/png","lastModified":1616558074199.525,"size":61894},{"id":"4d36697b434754ab0b07803b83d0f08b463b76da45483afcb02cd08524b13c50123ac88ad67b30e7aea352a8c0acb3c045ea78acd901f3f112add20e2c40655b","href":"https://static.observableusercontent.com/files/4d36697b434754ab0b07803b83d0f08b463b76da45483afcb02cd08524b13c50123ac88ad67b30e7aea352a8c0acb3c045ea78acd901f3f112add20e2c40655b","name":"testJobs.json","type":"application/json","lastModified":1616555406192.43,"size":48622}] 2f:{"title":"Visualizing Open-Source Code, Contributions & Communities","cells":[{"id":0,"value":"slide.md`# Visualizing Open-Source Code, Contributions & Communities\n\n### [@AnjanaVakil](https://twitter.com/AnjanaVakil)\nDeveloper Advocate, [Observable](https://observablehq.com)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"slide.md`### Recognize this? What do you see? \n\n${await FileAttachment(\"image.png\").image()}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"slide.md`## We can better _visualize_ our\n\n- Code\n- Contributions\n- Community \n\n
\n### to understand & make decisions about our OSS projects\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"slide.md`\n\n# 1. Visualizing _Code_\n\n- How is the code organized?\n- How have files changed over time?\n- How is the code performing? \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"slide.md`## How is the code organized?\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"slide.md`### Maybe you prefer a collapsible tree?\n\n\n`\n// \n// `","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"slide.md`### How about file size bubbles? \n\n\n`\n// \n// `","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"slide.md`### An exercise for the reader....\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"slide.md`## How have files changed over time? \n\nDiffs are great - but can we do better? \n\n${await FileAttachment(\"image@1.png\").image()}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"slide.md`## How have files changed over time? \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"slide.md('small')`## How is code performing? \n\n#### Example: Integration tests \nCredit: Visnu Pitiyanuvath ([@visnup](https://observablehq.com/@visnup))\n\n\n- Get the data w/ Github API: [Actions workflow jobs](https://docs.github.com/en/rest/reference/actions#workflow-jobs)\n- Visualize with [Vega-Lite](https://observablehq.com/@observablehq/vega-lite?collection=@observablehq/observable-for-vega-lite)\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"jobs = FileAttachment(\"testJobs.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"// visualize job name, conclusion, & duration (minutes) by run\nvl\n .markSquare()\n .data(jobs)\n .encode(\n vl.x().fieldO('run_number'),\n vl.y().fieldN('name'),\n vl\n .color()\n .fieldN('conclusion')\n .scale({ range: [\"red\", \"yellow\", \"green\"] }),\n vl.size().fieldQ('minutes')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"slide.md`\n\n# 2. Visualizing _Contributions_\n\n- How fast do things move?\n- When do contributions happen? \n- Who has contributed?\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"slide.md`## How fast do things move? \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"slide.md('small')`## When do contributions happen? \n\n### Example: Commit times\n\n- Get the data w/ Github API: [Repo stats \"punch card\"](https://docs.github.com/en/rest/reference/repos#get-the-hourly-commit-count-for-each-day)\n- Visualize with [Vega-Lite](https://observablehq.com/@observablehq/vega-lite?collection=@observablehq/observable-for-vega-lite)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"import { Text } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"viewof orgRepo = Text({ value: \"d3/d3\", label: \"owner/repo\", submit: \"Go\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"punchCard = (await fetch(\n `https://api.github.com/repos/${orgRepo}/stats/punch_card`,\n requestInit\n)).json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"// wrangle data\npunchCardData = punchCard.map(([dayIndex, hour, commits]) => ({\n day: days[dayIndex],\n hour,\n commits\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"// visualize commit times\nvl\n .markSquare()\n .data(punchCardData)\n .encode(\n vl\n .y()\n .fieldO('day')\n .sort(days),\n vl.x().fieldO('hour'),\n vl.size().fieldQ('commits')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"slide.md('small')`## Who has contributed? \n\n#### Example: Bubble Charts\nCredit: Steve Kasica ([@stvkas](https://observablehq.com/@stvkas/software-engineering-visualization-with-githubs-api))\n\n\n- Get the data w/ Github API: [Repo collaborators](https://docs.github.com/en/rest/reference/repos#collaborators) \n - For added fanciness: [Org members](https://docs.github.com/en/rest/reference/orgs#list-organization-members)\n- Visualize with [D3 Bubble Chart](https://observablehq.com/@d3/bubble-chart) + [Observable Inputs](https://observablehq.com/@observablehq/inputs?collection=@observablehq/inputs)\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"import { bind } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"bind(Text({ label: \"org/repo\", submit: \"Go\" }), viewof orgRepo)","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"contributorsJson = (await fetch(\n `https://api.github.com/repos/${orgRepo}/stats/contributors`,\n requestInit\n)).json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":276,"value":"// wrangle data\ncontributors = contributorsJson.map(c => ({\n name: c.author.login,\n title: c.author.login,\n group: orgMembers.includes(c.author.login) ? 'member' : 'external', // orgMembers is fetched below\n value: c.total\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":455,"value":"// display the bubble chart we import below\nbubbleChart","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"// import bubble chart & inject our data\nimport { chart as bubbleChart } with {\n contributors as data\n} from \"@d3/bubble-chart\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"// get org members so we can group by membership\norgMembers = {\n const members = await fetch(\n `https://api.github.com/orgs/${orgRepo.split('/')[0]}/members?per_page=100`\n );\n return (await members.json()).map(m => m.login);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"slide.md`\n\n# 2. Visualizing _Community_\n \n- Who is involved in what?\n- How are collaborators connected? \n- How does the wider community engage?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"slide.md`### Who is involved in what? \n### How are collaborators connected?\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"slide.md`## How does the community engage? \n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"slide.md`# Takeaways`","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"slide.md`#### This is not the only way to look at a project...\n\n${await FileAttachment(\"image.png\").image()}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"slide.md`# Thank you!\n\n- Twitter: [@AnjanaVakil](https://twitter.com/AnjanaVakil)\n- Observable: [@anjana](https://observablehq/@anjana)\n- Github: [@vakila](https://github.com/vakila)\n\n[observablehq.com/@anjana/visualizing-open-source](https://observablehq.com/@anjana/visualizing-open-source)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`------\n\n#### Appendix\n\nThe cells below power the examples & slideshow above\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"import { slide, notes, style, keyBindings } from '@visnup/slides'","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"style","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"keyBindings","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"embedHeight = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"requestInit = {\n const init = {\n headers: {\n Accept: 'application/vnd.github.v3+json'\n }\n };\n try {\n init.headers.Authorization = `token ${Secret('GITHUB_TOKEN')}`;\n } finally {\n return init;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}