[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_99":-5,"_50":16,"_100":-5,"_101":102,"_103":104},"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":-5,"_28":16,"_29":30,"_31":-5,"_32":33},"vizInfo",{"_40":60,"_77":78,"_79":80,"_81":-7,"_82":43,"_83":41,"_84":-5,"_85":86,"_87":16,"_88":89,"_90":89,"_91":-7,"_92":-7,"_57":93,"_59":94,"_95":-5,"_96":56,"_97":98},"vizContent",{"_40":60,"_61":62},"ownerAccount",{"_40":41,"_42":43,"_44":45,"_46":39,"_47":-5,"_48":-7,"_49":-7,"_50":16,"_51":-7,"_52":39,"_53":54,"_55":56,"_57":58,"_59":58},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",0,"forkedFromViz","runtimeVersion","license","descriptionIsAiGenerated","sourceProvenance",{"_34":35,"_36":37,"_27":-5,"_38":39},"project","socialImageUrl","https://next.vizhub.com/assets/unfurl.webp","sourceType","gist","originalUrl","https://gist.github.com/NPashaP/9999786","author","NPashaP","id","gist-user-npashap","accountType","user","email","","displayName","avatar","oauthProvider","oauthId","isAdmin","stripeCustomerId","handle","handleNormalized","npashap","lifecycleEmailsEnabled",true,"createdAt",1791650198193,"updatedAt","gist-9999786","files",{"_63":64,"_65":66,"_67":68},"f1",{"_69":75,"_71":76},"f2",{"_69":73,"_71":74},"f3",{"_69":70,"_71":72},"name","readme.md","text","This example shows how the gradient feature of SVG can be used to create 3D effect.","index.html","\n\n\n\n\n\n\n","gradientPie.js","!function(){\n\tvar gradPie={};\n\t\n\tvar pie = d3.layout.pie().sort(null).value(function(d) {return d.value;});\n\t\t\t\n\tcreateGradients = function(defs, colors, r){\t\n\t\tvar gradient = defs.selectAll('.gradient')\n\t\t\t.data(colors).enter().append(\"radialGradient\")\n\t\t\t.attr(\"id\", function(d,i){return \"gradient\" + i;})\n\t\t\t.attr(\"gradientUnits\", \"userSpaceOnUse\")\n\t\t\t.attr(\"cx\", \"0\").attr(\"cy\", \"0\").attr(\"r\", r).attr(\"spreadMethod\", \"pad\");\n\t\t\t\n\t\tgradient.append(\"stop\").attr(\"offset\", \"0%\").attr(\"stop-color\", function(d){ return d;});\n\n\t\tgradient.append(\"stop\").attr(\"offset\", \"30%\")\n\t\t\t.attr(\"stop-color\",function(d){ return d;})\n\t\t\t.attr(\"stop-opacity\", 1);\n\t\t\t\n\t\tgradient.append(\"stop\").attr(\"offset\", \"70%\")\n\t\t\t.attr(\"stop-color\",function(d){ return \"black\";})\n\t\t\t.attr(\"stop-opacity\", 1);\n\t}\n\t\n\tgradPie.draw = function(id, data, cx, cy, r){\n\t\tvar gPie = d3.select(\"#\"+id).append(\"g\")\n\t\t\t.attr(\"transform\", \"translate(\" + cx + \",\" + cy + \")\");\n\t\t\t\n\t\tcreateGradients(gPie.append(\"defs\"), data.map(function(d){ return d.color; }), 2.5*r);\n\n\t\tgPie.selectAll(\"path\").data(pie(data))\n\t\t\t.enter().append(\"path\").attr(\"fill\", function(d,i){ return \"url(#gradient\"+ i+\")\";})\n\t\t\t.attr(\"d\", d3.svg.arc().outerRadius(r))\n\t\t\t.each(function(d) { this._current = d; });\n\t}\n\t\n\tgradPie.transition = function(id, data, r) {\n\t\tfunction arcTween(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 d3.svg.arc().outerRadius(r)(i(t)); };\n\t\t}\n\t\t\n\t\td3.select(\"#\"+id).selectAll(\"path\").data(pie(data))\n\t\t\t.transition().duration(750).attrTween(\"d\", arcTween); \n\t}\t\n\t\n\tthis.gradPie = gradPie;\n}();\n","slug","9999786","title","Gradient Pie","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","7fNOFeM73xf4gAGdG6snt","startCommitId","forkedFrom","forkedFromVisibility",1396743794000,1405894279000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]