[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_96":-5,"_51":16,"_97":-5,"_98":99,"_100":101},"routes/viz-public",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":16,"_18":16,"_19":-5,"_20":21,"_22":16,"_23":24,"_25":-5,"_26":-5,"_27":28,"_29":16,"_30":31,"_32":-5,"_33":34},"vizInfo",{"_41":61,"_74":75,"_76":77,"_78":-7,"_79":44,"_80":42,"_81":-5,"_82":83,"_84":16,"_85":86,"_87":86,"_88":-7,"_89":-7,"_58":90,"_60":91,"_92":-5,"_93":57,"_94":95},"vizContent",{"_41":61,"_62":63,"_27":28},"ownerAccount",{"_41":42,"_43":44,"_45":46,"_47":40,"_48":-5,"_49":-7,"_50":-7,"_51":16,"_52":-7,"_53":40,"_54":55,"_56":57,"_58":59,"_60":59},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",0,"forkedFromViz","runtimeVersion","license","gpl-3.0","descriptionIsAiGenerated","sourceProvenance",{"_35":36,"_37":38,"_27":28,"_39":40},"project","socialImageUrl","https://next.vizhub.com/assets/unfurl.webp","sourceType","gist","originalUrl","https://gist.github.com/NPashaP/9994181","author","NPashaP","id","gist-user-npashap","accountType","user","email","","displayName","avatar","oauthProvider","oauthId","isAdmin","stripeCustomerId","handle","handleNormalized","npashap","lifecycleEmailsEnabled",true,"createdAt",1791650198193,"updatedAt","gist-9994181","files",{"_64":65,"_66":67},"f1",{"_68":72,"_70":73},"f2",{"_68":69,"_70":71},"name","index.html","text","\n\n\n\n\n\n\n\n","Donut3D.js","!function(){\n\tvar Donut3D={};\n\t\n\tfunction pieTop(d, rx, ry, ir ){\n\t\tif(d.endAngle - d.startAngle == 0 ) return \"M 0 0\";\n\t\tvar sx = rx*Math.cos(d.startAngle),\n\t\t\tsy = ry*Math.sin(d.startAngle),\n\t\t\tex = rx*Math.cos(d.endAngle),\n\t\t\tey = ry*Math.sin(d.endAngle);\n\t\t\t\n\t\tvar ret =[];\n\t\tret.push(\"M\",sx,sy,\"A\",rx,ry,\"0\",(d.endAngle-d.startAngle > Math.PI? 1: 0),\"1\",ex,ey,\"L\",ir*ex,ir*ey);\n\t\tret.push(\"A\",ir*rx,ir*ry,\"0\",(d.endAngle-d.startAngle > Math.PI? 1: 0), \"0\",ir*sx,ir*sy,\"z\");\n\t\treturn ret.join(\" \");\n\t}\n\n\tfunction pieOuter(d, rx, ry, h ){\n\t\tvar startAngle = (d.startAngle > Math.PI ? Math.PI : d.startAngle);\n\t\tvar endAngle = (d.endAngle > Math.PI ? Math.PI : d.endAngle);\n\t\t\n\t\tvar sx = rx*Math.cos(startAngle),\n\t\t\tsy = ry*Math.sin(startAngle),\n\t\t\tex = rx*Math.cos(endAngle),\n\t\t\tey = ry*Math.sin(endAngle);\n\t\t\t\n\t\t\tvar ret =[];\n\t\t\tret.push(\"M\",sx,h+sy,\"A\",rx,ry,\"0 0 1\",ex,h+ey,\"L\",ex,ey,\"A\",rx,ry,\"0 0 0\",sx,sy,\"z\");\n\t\t\treturn ret.join(\" \");\n\t}\n\n\tfunction pieInner(d, rx, ry, h, ir ){\n\t\tvar startAngle = (d.startAngle < Math.PI ? Math.PI : d.startAngle);\n\t\tvar endAngle = (d.endAngle < Math.PI ? Math.PI : d.endAngle);\n\t\t\n\t\tvar sx = ir*rx*Math.cos(startAngle),\n\t\t\tsy = ir*ry*Math.sin(startAngle),\n\t\t\tex = ir*rx*Math.cos(endAngle),\n\t\t\tey = ir*ry*Math.sin(endAngle);\n\n\t\t\tvar ret =[];\n\t\t\tret.push(\"M\",sx, sy,\"A\",ir*rx,ir*ry,\"0 0 1\",ex,ey, \"L\",ex,h+ey,\"A\",ir*rx, ir*ry,\"0 0 0\",sx,h+sy,\"z\");\n\t\t\treturn ret.join(\" \");\n\t}\n\n\tfunction getPercent(d){\n\t\treturn (d.endAngle-d.startAngle > 0.2 ? \n\t\t\t\tMath.round(1000*(d.endAngle-d.startAngle)/(Math.PI*2))/10+'%' : '');\n\t}\t\n\t\n\tDonut3D.transition = function(id, data, rx, ry, h, ir){\n\t\tfunction arcTweenInner(a) {\n\t\t var i = d3.interpolate(this._current, a);\n\t\t this._current = i(0);\n\t\t return function(t) { return pieInner(i(t), rx+0.5, ry+0.5, h, ir); };\n\t\t}\n\t\tfunction arcTweenTop(a) {\n\t\t var i = d3.interpolate(this._current, a);\n\t\t this._current = i(0);\n\t\t return function(t) { return pieTop(i(t), rx, ry, ir); };\n\t\t}\n\t\tfunction arcTweenOuter(a) {\n\t\t var i = d3.interpolate(this._current, a);\n\t\t this._current = i(0);\n\t\t return function(t) { return pieOuter(i(t), rx-.5, ry-.5, h); };\n\t\t}\n\t\tfunction textTweenX(a) {\n\t\t var i = d3.interpolate(this._current, a);\n\t\t this._current = i(0);\n\t\t return function(t) { return 0.6*rx*Math.cos(0.5*(i(t).startAngle+i(t).endAngle)); };\n\t\t}\n\t\tfunction textTweenY(a) {\n\t\t var i = d3.interpolate(this._current, a);\n\t\t this._current = i(0);\n\t\t return function(t) { return 0.6*rx*Math.sin(0.5*(i(t).startAngle+i(t).endAngle)); };\n\t\t}\n\t\t\n\t\tvar _data = d3.layout.pie().sort(null).value(function(d) {return d.value;})(data);\n\t\t\n\t\td3.select(\"#\"+id).selectAll(\".innerSlice\").data(_data)\n\t\t\t.transition().duration(750).attrTween(\"d\", arcTweenInner); \n\t\t\t\n\t\td3.select(\"#\"+id).selectAll(\".topSlice\").data(_data)\n\t\t\t.transition().duration(750).attrTween(\"d\", arcTweenTop); \n\t\t\t\n\t\td3.select(\"#\"+id).selectAll(\".outerSlice\").data(_data)\n\t\t\t.transition().duration(750).attrTween(\"d\", arcTweenOuter); \t\n\t\t\t\n\t\td3.select(\"#\"+id).selectAll(\".percent\").data(_data).transition().duration(750)\n\t\t\t.attrTween(\"x\",textTweenX).attrTween(\"y\",textTweenY).text(getPercent); \t\n\t}\n\t\n\tDonut3D.draw=function(id, data, x /*center x*/, y/*center y*/, \n\t\t\trx/*radius x*/, ry/*radius y*/, h/*height*/, ir/*inner radius*/){\n\t\n\t\tvar _data = d3.layout.pie().sort(null).value(function(d) {return d.value;})(data);\n\t\t\n\t\tvar slices = d3.select(\"#\"+id).append(\"g\").attr(\"transform\", \"translate(\" + x + \",\" + y + \")\")\n\t\t\t.attr(\"class\", \"slices\");\n\t\t\t\n\t\tslices.selectAll(\".innerSlice\").data(_data).enter().append(\"path\").attr(\"class\", \"innerSlice\")\n\t\t\t.style(\"fill\", function(d) { return d3.hsl(d.data.color).darker(0.7); })\n\t\t\t.attr(\"d\",function(d){ return pieInner(d, rx+0.5,ry+0.5, h, ir);})\n\t\t\t.each(function(d){this._current=d;});\n\t\t\n\t\tslices.selectAll(\".topSlice\").data(_data).enter().append(\"path\").attr(\"class\", \"topSlice\")\n\t\t\t.style(\"fill\", function(d) { return d.data.color; })\n\t\t\t.style(\"stroke\", function(d) { return d.data.color; })\n\t\t\t.attr(\"d\",function(d){ return pieTop(d, rx, ry, ir);})\n\t\t\t.each(function(d){this._current=d;});\n\t\t\n\t\tslices.selectAll(\".outerSlice\").data(_data).enter().append(\"path\").attr(\"class\", \"outerSlice\")\n\t\t\t.style(\"fill\", function(d) { return d3.hsl(d.data.color).darker(0.7); })\n\t\t\t.attr(\"d\",function(d){ return pieOuter(d, rx-.5,ry-.5, h);})\n\t\t\t.each(function(d){this._current=d;});\n\n\t\tslices.selectAll(\".percent\").data(_data).enter().append(\"text\").attr(\"class\", \"percent\")\n\t\t\t.attr(\"x\",function(d){ return 0.6*rx*Math.cos(0.5*(d.startAngle+d.endAngle));})\n\t\t\t.attr(\"y\",function(d){ return 0.6*ry*Math.sin(0.5*(d.startAngle+d.endAngle));})\n\t\t\t.text(getPercent).each(function(d){this._current=d;});\t\t\t\t\n\t}\n\t\n\tthis.Donut3D = Donut3D;\n}();\n","slug","9994181","title","3D Donut","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","J0zsCDWMuoCY-7t8o465o","startCommitId","forkedFrom","forkedFromVisibility",1396715466000,1472693871000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]