[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_112":-5,"_61":16,"_113":-5,"_114":115,"_116":117},"routes/viz-public",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":16,"_18":16,"_19":-5,"_20":21,"_22":16,"_23":24,"_25":26,"_27":-5,"_28":29,"_30":16,"_31":32,"_33":-5,"_34":35},"vizInfo",{"_42":70,"_91":70,"_44":92,"_93":-7,"_94":51,"_95":49,"_96":-5,"_97":98,"_99":16,"_100":101,"_102":103,"_104":43,"_105":-7,"_67":106,"_69":107,"_108":-5,"_109":66,"_110":111},"vizContent",{"_42":70,"_71":72,"_28":29},"ownerAccount",{"_42":49,"_50":51,"_52":53,"_54":48,"_55":56,"_57":58,"_59":60,"_61":16,"_62":-7,"_63":41,"_64":41,"_65":66,"_67":68,"_69":68},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",0,"forkedFromViz",{"_42":43,"_44":45,"_46":41,"_47":48},"runtimeVersion","license","MIT","descriptionIsAiGenerated","sourceProvenance",{"_36":37,"_38":39,"_28":29,"_40":41},"project","socialImageUrl","https://next.vizhub.com/assets/unfurl.webp","sourceType","v3","originalUrl","https://vizhub.com/zoomzky/48cbb994868b4097af2e341a4fb9ec51","author","zoomzky","id","5c08f90aeb0e4669af45879cd406c20a","title","Fork of D3 v5 Zoomable Sunburst with local json","ownerHandle","ownerDisplayName","Liml","v3-user-zoomzky","accountType","user","email","micke@liml.se","displayName","avatar","https://avatars.githubusercontent.com/u/155622787?v=4","oauthProvider","github","oauthId","155622787","isAdmin","stripeCustomerId","handle","handleNormalized","lifecycleEmailsEnabled",true,"createdAt",1791491424725,"updatedAt","48cbb994868b4097af2e341a4fb9ec51","files",{"_73":74,"_75":76,"_77":78,"_79":80},"29fbc049",{"_81":89,"_83":90},"8dbc301e",{"_81":87,"_83":88},"c7881bfe",{"_81":85,"_83":86},"cc1f3962",{"_81":82,"_83":84},"name","index.js","text","const width = 300;\nconst height = width / 2;\n\nconst svg = d3\n .select('svg')\n .attr('width', '100%')\n .attr('height', '100%')\n .attr('viewBox', `0 0 ${width} ${height}`)\n .attr('style', 'width: 100%; height: auto;');\n\nconst container = svg\n .append('g')\n .attr('transform', `translate(${width / 2}, ${height})`); // move origin to center of bottom\n\nconst data = [\n { value: 20, label: 'A' },\n { value: 55, label: 'C' },\n { value: 90, label: 'D' },\n { value: 35, label: 'B' },\n { value: 150, label: 'E' },\n];\nconst pie = d3\n .pie()\n .value((d) => d.value)\n .startAngle(-0.5 * Math.PI)\n .endAngle(0.5 * Math.PI)\n .padAngle(0.02);\nconst arcData = pie(data);\n\nconst colorScale = d3.scaleOrdinal(\n d3.schemeTableau10.slice(0, data.length),\n);\n\nconst arc = d3\n .arc()\n .startAngle((d) => d.startAngle)\n .endAngle((d) => d.endAngle)\n .innerRadius(width / 4)\n .outerRadius(width / 2 - 1)\n .cornerRadius(5);\n\ncontainer\n .append('g')\n .selectAll('g')\n .data(arcData)\n .join('g')\n .call((g) =>\n g\n .append('path')\n .attr('fill', (d, i) => colorScale(i))\n .attr('stroke', 'none')\n .attr('d', arc),\n )\n // add labels (A, B, C, D, E):\n .each(function (d, i) {\n const [x, y] = arc.centroid(d);\n d3.select(this)\n .append('text')\n .attr('x', (d) => x)\n .attr('y', (d) => y)\n .attr('fill', 'white')\n .attr('text-anchor', 'middle')\n .attr('dy', '0.33em')\n .text(data[i].label);\n });\n","styles.css","body {\n margin: 0;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n.inner {\n stroke: black;\n stroke-width: 2;\n}\nline {\n stroke: red;\n stroke-width: 2;\n}\ntext {\n text-anchor: middle;\n font-size: 20px;\n font-family: sans-serif;\n font-weight: bold;\n}\n.special {\n fill: steelblue;\n}\n\n.DS {\n fill: green;\n}\n\n.N {\n fill: purple;\n}\n\n.S {\n fill: pink;\n}\n.events {\n fill: #d8d29a;\n stroke: black;\n}\n\n.K1 {\n fill: #00bfff;\n stroke-width: 0.5px;\n stroke: black;\n}\n.K1:hover {\n fill: yellow;\n}\n\n.K2 {\n fill: #d8d29a;\n stroke-width: 0.5px;\n stroke: black;\n}\n\n.K3 {\n fill: #4ea24e;\n stroke-width: 0.5px;\n stroke: black;\n}\n\n.K4 {\n fill: #c8715d;\n stroke-width: 0.5px;\n stroke: black;\n}\n\n.mars {\n fill: #f2f0dd;\n}\n.mars:hover {\n fill: yellow;\n}\n.april {\n fill: #d8d29a;\n stroke: #d8d29a;\n}\n.maj {\n fill: #aca243;\n stroke: #d8d29a;\n}\n\n.juni {\n fill: #9bce9b;\n stroke: #9bce9b;\n}\n.juli {\n fill: #4ea24e;\n stroke: #4ea24e;\n}\n.augusti {\n fill: #316731;\n stroke: #316731;\n}\n\n.september {\n fill: #dba498;\n stroke: #dba498;\n}\n.oktober {\n fill: #c8715d;\n stroke: #c8715d;\n}\n.november {\n fill: #974634;\n stroke: #974634;\n}\n\n.december {\n fill: none;\n stroke: #6bdaff;\n}\n.januari {\n fill: #00bfff;\n stroke: #00bfff;\n}\n.februari {\n fill: #005b7a;\n stroke: #005b7a;\n}\n\n.week {\n fill-opacity: 0.1;\n}\n\n.day {\n fill-opacity: 0.3;\n stroke: #adadad;\n}\n\n.monthText {\n fill: white;\n font-size: 13px;\n stroke: black;\n stroke-width: 0.5px;\n text-transform: capitalize;\n}\n.quarterText {\n fill: black;\n font-size: 12px;\n stroke: black;\n stroke-width: 1px;\n text-transform: capitalize;\n}\n.eventText {\n fill: white;\n font-size: 12px;\n stroke: black;\n stroke-width: 1px;\n text-transform: capitalize;\n}\n\ntext.middle {\n font-size: 24px;\n fill: #d3d3d3;\n stroke: #202020;\n}\n","index.html","\n\n \n \n \n \n\n\n\n","README.md","Mike Bostock's [D3 Zoomable Sunburst example](https://beta.observablehq.com/@mbostock/d3-zoomable-sunburst)\n* with D3 v5 (based on the [changes in v5](https://github.com/d3/d3/blob/master/CHANGES.md#changes-in-d3-50))\n

\nPorted from [this Observable notebook](https://beta.observablehq.com/@tasqon/d3-circle-packing) for [this](https://talk.observablehq.com/t/notebook-to-vanilla-javascript-steps/1644/5) forum thread. Many thanks to Bryan Gingechen who answered my question about the necessary steps to get from an (Observable) JavaScript notebook to a vanilla JavaScript index.html. He presented his solution on [blockbuilder.org](https://blockbuilder.org/bryangingechen/ffd619bb5889d146fe6c5d581d3ea00e)","slug","Fork of Fork of D3 v5 Sunburst diagram","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","c47a2f920c284ea8b55d4186a57a9b4c","startCommitId","dff278ff28c142cd8a099c7f300373b8","forkedFrom","forkedFromVisibility",1712300219000,1712300812000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]