34:["$","title",null,{"children":"Donut of contributions | stiansjoli | Observable"}] 3c:T47f,createPieChart = (data) => { const svg = DOM.svg(chartHeight, width/1.8); const svgRef = d3.select(svg); const arcs = svgRef .selectAll(".arc") .data(pie(data)) .enter() .append("g") .classed("arc", true); arcs .attr("transform", "translate(" + (outerRadius + 75) + ", " + (outerRadius + 75) + ")") .append("path") .attr("fill", (d,i) => colors[i]) .attr("stroke", "black") .attr("d", arc) const legend = svgRef .selectAll(".legend") .data(data) .enter() .append("g") .classed("legend", true) .attr("transform", "translate(" + chartHeight/2.7 + "," + chartWidth/6.2 + ")") legend .append("rect") .attr("x", 0) .attr("y", (d,i) => i*55) .attr("width", 15) .attr("height", 50) .attr("fill", (d,i) => colors[i]) .attr("stroke", "black") legend .append("text") .attr("text-anchor", "start") .attr("y", (d,i) => i*(55) + 25) .attr("x", 20) .text(d => d.author.login) .attr("fill", "black") .attr("font-size", 12) .attr("font-style", "italic") .attr("font-family", "sans-serif") return svg; }3d:[] 38:{"id":"8efd82141e67b0d2","slug":"donut-of-contributions-on-vue-3-vs-angular-vs-react","title":"Donut of contributions","thumbnail":"f8101baa46309580c44c45b29b9cf3564cc7860bf1968bd8434ea3315d4181c6","access_level":"public","create_time":"$D2020-09-22T08:11:53.456Z","update_time":"$D2021-03-29T09:33:35.461Z","view_time":null,"first_public_time":"$D2020-09-22T13:18:28.490Z","has_unpublished_edits":null,"fork":{"id":"ccb8d2872a1e108f","slug":"donut-of-contributions-on-the-vue-js-library","title":"Donut of contributions on the Vue.js library","owner":{"id":"0180fe38760cf17d","login":"stiansjoli","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"0180fe38760cf17d","login":"stiansjoli","name":"","avatar_url":"https://avatars-next.observableusercontent.com/525d5eb4e53d0775e37aba98891c9c250af905d65d277309f7ade3a1b90dbbd1","tier":"starter_2024","bio":"","following":false},"version":306,"publish_version":306,"role":null,"authored":false,"authors":[{"type":"individual","id":"cca1bdf075ffc83b","login":"stiansjoli","name":"","avatar_url":"https://avatars-next.observableusercontent.com/525d5eb4e53d0775e37aba98891c9c250af905d65d277309f7ade3a1b90dbbd1","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"cca1bdf075ffc83b","login":"stiansjoli","name":"","avatar_url":"https://avatars-next.observableusercontent.com/525d5eb4e53d0775e37aba98891c9c250af905d65d277309f7ade3a1b90dbbd1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Donut of contributions","cells":[{"id":25,"value":"md`# Donut of contributions \nThe donut chart shows the relative contribution from the four top contributors to the selected javascript framework/library. Data is taken from the Github statistics API. \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"viewof index = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"createPieChart(data[parseInt(index)])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"pie_data = contributors.slice(contributors.length - 4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"chartWidth = 954","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"pie = d3.pie()\n .padAngle(0.01)\n .sort((x,y) => d3.ascending(x.total, y.total))\n .value(d => d.total);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"arc = d3.arc()\n .innerRadius(innerRadius)\n .outerRadius(outerRadius)\n .cornerRadius(1.5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"innerRadius = outerRadius - (outerRadius * 0.2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"colors = [\"#E57438\",\"#f8de7e\", \"teal\", \"#569dd2\"];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"chartHeight = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"outerRadius = chartHeight * 0.3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"contributors = fetch(\"https://api.github.com/repos/vuejs/vue/stats/contributors\").then(res => res.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"data = Promise.all([\n fetch(\"https://api.github.com/repos/facebook/react/stats/contributors\").then(res => res.json()).then(res => { res.sort((a,b) => a.total < b.total); \n return res.slice(0, 4)}), \n fetch(\"https://api.github.com/repos/vuejs/vue-next/stats/contributors\").then(res => res.json()).then(res => {\n res.sort((a,b) => a.total < b.total);\n return res.slice(0,4)\n }),\n fetch(\"https://api.github.com/repos/angular/angular/stats/contributors\").then(res => res.json()).then(res =>{\n res.sort((a,b) => a.total < b.total);\n return res.slice(0,4)\n })\n]) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1"}} 33:null