31:[] 2f:{"title":"Top 10 Languages on code.gov by Percentage","cells":[{"id":0,"value":"md`# Top 10 Languages on code.gov by Percentage`","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"svg`${chart.outerHTML}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"api_key = \"90LWafgJ8bcxpCNHxkhA3jcxbG8TQKlQates3tJ9\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"total_num_repos_with_languages = fetch(`https://api.code.gov/repos?size=10000&api_key=${api_key}`)\n .then(response => response.json())\n .then(json => json.repos.filter(repo => repo.languages && Array.isArray(repo.languages) && repo.languages.length > 0))\n .then(repos => repos.length)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"languages = fetch(`https://api.code.gov/languages?api_key=${api_key}`)\n .then(response => response.json())\n .then(json => json.languages)","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"unsorted = languages\n .filter(language => language.term != \"\")\n .map(language => {\n return {name: language.name.toUpperCase(), value: language.numRepos / total_num_repos_with_languages };\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"data = unsorted.sort((language1, language2) => language1.value - language2.value).slice(-5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"x = d3.scaleBand()\n .domain(data.map(d => d.name))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.value)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"xAxis = g => {\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .attr(\"font-size\", \"20\")\n .attr(\"stroke\", \"#fff\")\n .call(d3.axisBottom(x)\n .tickSizeOuter(0))\n .attr(\"font-size\", \"20\")\n \n g.select(\"path\").attr(\"stroke\", \"fff\")\n g.selectAll(\"text\").attr(\"fill\", \"#fff\")\n g.selectAll(\"line\").attr(\"stroke\", \"ffff\") \n\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"yAxis = g => {\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .attr(\"stroke\", \"#fff\")\n .call(d3.axisLeft(y))\n .attr(\"font-size\", \"20\")\n .call(g => g.select(\".domain\").remove())\n \n g.selectAll(\"text\").attr(\"fill\", \"#fff\")\n g.selectAll(\"line\").attr(\"stroke\", \"ffff\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"margin = ({top: 40, right: 20, bottom: 60, left: 80})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"chart = {\n const svg = d3.select(DOM.svg(width, height));\n \n svg.append('rect')\n .attr(\"fill\", \"#485567\") \n .attr(\"height\", \"100%\")\n .attr(\"width\", \"100%\")\n\n \n svg.append(\"g\")\n .attr(\"fill\", \"#08c1bb\")\n .selectAll(\"rect\").data(data).enter().append(\"rect\")\n .attr(\"x\", d => x(d.name))\n .attr(\"y\", d => y(d.value))\n .attr(\"height\", d => y(0) - y(d.value))\n .attr(\"width\", x.bandwidth());\n \n svg.append(\"g\")\n .call(xAxis);\n \n svg.append(\"g\")\n .call(yAxis);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"chart.outerHTML","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"viewof download = {\n const text = chart.outerHTML.replace(/`;\n a.href = url;\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}