44:["$","title",null,{"children":"React Donut chart | stiansjoli | Observable"}] 4c:T47d,DonutChart = component(({data}) => { const colors = ["#E57438","#f8de7e", "teal", "#569dd2", "#bb1b18", "#FFBF00", "#495F75", "#E6CDAE", "#daa520", "#e4d96f"]; const chartHeight = 600; const chartWidth = 954; const outerRadius = chartHeight * 0.3; const innerRadius = outerRadius - (outerRadius * 0.2) const pie = d3.pie() .padAngle(0.01) .sort((x,y) => d3.ascending(x.total, y.total)) .value(d => d.total); const arc = d3.arc() .innerRadius(innerRadius) .outerRadius(outerRadius) .cornerRadius(1.5) return jsx`` })4d:[] 48:{"id":"29f33bc5fb0543a0","slug":"react-donut-chart","title":"React Donut chart","thumbnail":"1443d583428442b054ea907d968e69f9f7f866a2db519cbdcf929059081053e0","access_level":"public","create_time":"$D2021-03-29T09:29:01.701Z","update_time":"$D2021-03-29T20:06:54.065Z","view_time":null,"first_public_time":"$D2021-03-29T11:42:51.525Z","has_unpublished_edits":null,"fork":{"id":"1b14cfb2cb43dfc1","slug":"react-histogram","title":"React Histogram","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":874,"publish_version":874,"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":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"bebb4b4f76b27d81","slug":"react","title":"React","owner":{"id":"0180fe38760cf17d","login":"stiansjoli","name":""}},"type":"notebook","body":{"titling":"auto","title":"React Donut chart","cells":[{"id":0,"value":"md`# React Donut chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"md` This notebook shows a donut chart of React contributions where React is responsible for UI rendering, while d3 is the kernal calculating positions of the arches. The data is from the Github REST api.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"render(DonutContainer);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"md`### DonutChart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"DonutContainer = component(() => {\n const [contributorData, setContributorData] = useState([]);\n useEffect(() => {\n fetch(\"https://api.github.com/repos/facebook/react/stats/contributors\")\n .then(res => res.json())\n .then(res => res.sort((a,b) => b.total - a.total).slice(0,10))\n .then(res => setContributorData(res))\n },[])\n return contributorData.length === 0 ? jsx`

`: jsx`

\n<${DonutChart} data=${contributorData}/>\n

Donut chart of top 10 contributors to React repository. Total commits for each contributor is reflected in arch length, while colour reflect contributor.

\n`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"md`## Variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"padding = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"import { jsx, useState, useEffect, useMemo, render, component} from '@j-f1/react-16'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null