30:Tc07,pie = { const svgNode = d3.select(svg``); yield svgNode.node(); svgNode.selectAll('*').remove() svgNode.append("g").attr("id","quotesDonut"); svgNode.append("g").attr("id","partialDonut"); const ryConverted = ry/90*rx; draw("quotesDonut",data , 600, 100,rx, ryConverted, h, ir); draw("partialDonut",data , 600, 400,rx, ryConverted, h, ir,true); // . Slices const innerSlices = svgNode.append("g").attr('transform',`translate(${250},175)`) innerSlices.selectAll(".innerSlices").data(_data).enter().append("path").attr("class", "innerSlices") .style("fill", function(d) { return d3.hsl(d.data.color).darker(0.7); }) .attr("d",function(d){ return pieInner(d, rx+0.5,ryConverted+0.5, h, ir);}) .each(function(d){this._current=d;}); // . Top Slices const topSlices = svgNode.append("g").attr('transform',`translate(${250},100)`) topSlices.selectAll(".topSlices").data(_data).enter().append("path").attr("class", "topSlices") .style("fill", function(d) { return d.data.color; }) .style("stroke", function(d) { return d.data.color; }) .attr("d",function(d){ return pieTop(d, rx, ryConverted, ir);}) .each(function(d){this._current=d;}); // corner slices const cornerSlices = svgNode.append("g").attr('transform',`translate(${250},270)`) const cornerSliceElements = cornerSlices.selectAll(".cornerSlices").data(_data).enter().append("path").attr("class", "cornerSlices") .style("fill", function(d) { return d3.hsl(d.data.color).darker(0.3); }) .attr("d",function(d){ return pieCorner(d, rx-.5,ryConverted-.5, h);}) .each(function(d){this._current=d;}) cornerSliceElements.sort(function(a,b){ const angleA = a.endAngle; const angleB = b.endAngle; return Math.sin(angleA)<=Math.sin(angleB)?-1:1; }) // corner outside surface slices const cornerSurfaceSlices = svgNode.append("g").attr('transform',`translate(${250},420)`) const cornerSurfaceSliceElements = cornerSurfaceSlices.selectAll(".cornerSlices").data(_data).enter().append("path").attr("class", "cornerSlices") .style("fill", function(d) { return d3.hsl(d.data.color).darker(0.3); }) .attr("d",function(d){ return pieCornerSurface(d, rx-.5,ryConverted-.5, h);}) .each(function(d){this._current=d;}) cornerSurfaceSliceElements.sort(function(a,b){ const angleA = a.startAngle; const angleB = b.startAngle; return Math.sin(angleA)<=Math.sin(angleB)?-1:1; }) // . Outer Slices const outerSlices = svgNode.append("g").attr('transform',`translate(${250},540)`) outerSlices.selectAll(".outerSlices").data(_data).enter().append("path").attr("class", "outerSlices") .style("fill", function(d) { return d3.hsl(d.data.color).darker(0.7); }) .attr("d",function(d){ return pieOuter(d, rx-.5,ryConverted-.5, h);}) .each(function(d){this._current=d;}); return svgNode.node(); }31:T110e,function draw(id, data, x /*center x*/, y/*center y*/, rx/*radius x*/, ry/*radius y*/, h/*height*/, ir/*inner radius*/,partial){ var slices = d3.select("#"+id).append("g").attr("transform", "translate(" + x + "," + y + ")") .attr("class", "slices"); const cornerSliceElements = slices.selectAll(".cornerSlices") .data(_data.map(d=>Object.assign({},d))) .enter().append("path").attr("class", "cornerSlices") .style("fill", function(d) { return d3.hsl(d.data.color).darker(0.7); }) .attr("d",function(d){ return pieCorner(d, rx-.5,ry-.5, h);}) .each(function(d){this._current=d;}) .attr('opacity',(d,i)=>i||!partial?1:0) .classed('slice-sort',true) .style("stroke",function(d) { return d3.hsl(d.data.color).darker(0.7); }) //-------------- const cornerSliceSurfaceElements = slices.selectAll(".cornerSlicesSurface") .data(_data.map(d=>Object.assign({},d))) .enter().append("path").attr("class", "cornerSlicesSurface") .style("fill", function(d) { return d3.hsl(d.data.color).darker(0.7); }) .attr("d",function(d){ return pieCornerSurface(d, rx-.5,ry-.5, h);}) .each(function(d){this._current=d;}) .attr('opacity',(d,i)=>i||!partial?1:0) .classed('slice-sort',true) .style("stroke",function(d) { return d3.hsl(d.data.color).darker(0.7); }) slices.selectAll(".innerSlice") .data(_data.map(d=>Object.assign({},d))) .enter().append("path").attr("class", "innerSlice") .style("fill", function(d) { return d3.hsl(d.data.color).darker(2); }) .attr("d",function(d){ return pieInner(d, rx+0.5,ry+0.5, h, ir);}) .each(function(d){this._current=d;}) .attr('opacity',(d,i)=>i||!partial?1:0) .classed('slice-sort',true) .style("stroke",function(d) { return d3.hsl(d.data.color).darker(2); }) cornerSliceElements.sort(function(a,b){ const angleA = a.endAngle; const angleB = b.endAngle; return Math.sin(angleA)<=Math.sin(angleB)?-1:1; }) cornerSliceSurfaceElements.sort(function(a,b){ const angleA = a.startAngle; const angleB = b.startAngle; return Math.sin(angleA)<=Math.sin(angleB)?-1:1; }) slices.selectAll('.slice-sort') .sort(function(a,b){ const first = slices.selectAll('.slice-sort').filter(d=>d==a).node(); const second = slices.selectAll('.slice-sort').filter(d=>d==b).node(); return first.getBoundingClientRect().topi||!partial?1:0) // slices.selectAll(".topSlice").data(_data).enter().append("path").attr("class", "topSlice") .style("fill", function(d) { return d.data.color; }) .style("stroke", function(d) { return d.data.color; }) .attr("d",function(d){ return pieTop(d, rx, ry, ir);}) .each(function(d){this._current=d;}) .attr('opacity',(d,i)=>i||!partial?1:0) /* slices.selectAll(".percent").data(_data).enter().append("text").attr("class", "percent") .attr('text-anchor',d=>{ const centerAngle = ((d.startAngle + d.endAngle) / 2) % (Math.PI * 2); if (centerAngle % (Math.PI * 2) >= Math.PI/2 && centerAngle % (Math.PI * 2) < Math.PI/2*3) { return 'middle' } return "middle" }) .text((d) => d.data.label + ' (' + Math.round(d.value * 100) + '%)') .attr('font-size',10) .attr('transform', (d) => { const centerAngle = ((d.startAngle + d.endAngle) / 2) % (Math.PI * 2); const radianNumber = 180 / Math.PI; console.log(centerAngle * radianNumber, d.data.label) let angleAddition = 0; if (centerAngle % (Math.PI * 2) >= Math.PI/2 && centerAngle % (Math.PI * 2) < Math.PI/2*3) { angleAddition = 180; } const diff = rx/ry; const x = rx*0.8 * Math.cos(centerAngle); const y = ry*0.8 * Math.sin(centerAngle); return `translate(${x},${y}) ` }) */ }32:T800,function pieOuter(d, rx, ry, h ){ // Process corner Cases if (d.endAngle == Math.PI * 2 && d.startAngle > Math.PI && d.startAngle < Math.PI * 2) { return "" } if (d.startAngle > Math.PI * 3 && d.startAngle < Math.PI * 4 && d.endAngle > Math.PI * 3 && d.endAngle <= Math.PI * 4) { return "" } // Reassign startAngle and endAngle based on their positions var startAngle = d.startAngle; var endAngle = d.endAngle; if (d.startAngle > Math.PI && d.startAngle < Math.PI * 2) { startAngle = Math.PI; if (d.endAngle > Math.PI * 2) { startAngle = 0; } } if (d.endAngle > Math.PI && d.endAngle < Math.PI * 2) { endAngle = Math.PI; } if (d.startAngle > Math.PI * 2) { startAngle = d.startAngle % (Math.PI * 2); } if (d.endAngle > Math.PI * 2) { endAngle = d.endAngle % (Math.PI * 2); if (d.startAngle <= Math.PI) { endAngle = Math.PI; startAngle = 0 } } if (d.endAngle > Math.PI * 3) { endAngle = Math.PI } if (d.startAngle < Math.PI && d.endAngle >= 2 * Math.PI) { endAngle = Math.PI; startAngle = d.startAngle } // Calculating shape key points var sx = rx * Math.cos(startAngle), sy = ry * Math.sin(startAngle), ex = rx * Math.cos(endAngle), ey = ry * Math.sin(endAngle); // Creating custom path commands based on calculation var ret = []; ret.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"); // If shape is big enough, that it needs two separate outer shape , then draw second shape as well if (d.startAngle < Math.PI && d.endAngle >= 2 * Math.PI) { startAngle = 0; endAngle = d.endAngle; var sx = rx * Math.cos(startAngle), sy = ry * Math.sin(startAngle), ex = rx * Math.cos(endAngle), ey = ry * Math.sin(endAngle); ret.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"); } // Assemble shape commands return ret.join(" "); }33:Tab5,function pieInner(d, rx, ry, h, ir ){ // Normalize angles before we start any calculations var startAngle = (d.startAngle < Math.PI ? Math.PI : d.startAngle); var endAngle = (d.endAngle < Math.PI ? Math.PI : d.endAngle); // Take care of corner cases if (d.startAngle > Math.PI * 2 && d.endAngle < Math.PI * 3) { return ""; } if (d.startAngle >= Math.PI*2 && d.endAngle >= Math.PI * 2 && d.endAngle <= Math.PI * 3) { return ""; } // Reassign startAngle and endAngle based on their positions if (d.startAngle <= Math.PI && d.endAngle > Math.PI * 2) { startAngle = Math.PI; endAngle = 2 * Math.PI; } if (d.startAngle > Math.PI && d.endAngle >= Math.PI * 3) { endAngle = 2 * Math.PI; } if (d.startAngle > Math.PI && d.endAngle > Math.PI * 2 && d.endAngle < Math.PI * 3) { endAngle = 2 * Math.PI; } if (d.startAngle > Math.PI && d.startAngle < Math.PI * 2 && d.endAngle > Math.PI * 3) { endAngle = 2 * Math.PI; startAngle = Math.PI } if (d.startAngle > Math.PI && d.startAngle < Math.PI * 2 && d.endAngle > Math.PI * 3) { endAngle = 2 * Math.PI; startAngle = Math.PI } if (d.startAngle > Math.PI && d.startAngle < Math.PI * 2 && d.endAngle > Math.PI * 3) { startAngle = Math.PI; endAngle = Math.PI + d.endAngle % Math.PI; } if (d.startAngle > Math.PI * 2 && d.startAngle < Math.PI * 3 && d.endAngle > Math.PI * 3) { startAngle = Math.PI; endAngle = Math.PI + d.endAngle % Math.PI; } if (d.startAngle > Math.PI * 3 && d.endAngle > Math.PI * 3) { startAngle = d.startAngle % (Math.PI * 2) endAngle = d.endAngle % (Math.PI * 2) } // Calculating shape key points var sx = ir * rx * Math.cos(startAngle), sy = ir * ry * Math.sin(startAngle), ex = ir * rx * Math.cos(endAngle), ey = ir * ry * Math.sin(endAngle); // Creating custom path commands based on calculation var ret = []; ret.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"); // If shape is big enough, that it needs two separate outer shape , then draw second shape as well if (d.startAngle > Math.PI && d.startAngle < Math.PI * 2 && d.endAngle > Math.PI * 3) { startAngle = d.startAngle % (Math.PI * 2); endAngle = Math.PI * 2; var sx = ir * rx * Math.cos(startAngle), sy = ir * ry * Math.sin(startAngle), ex = ir * rx * Math.cos(endAngle), ey = ir * ry * Math.sin(endAngle); ret.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"); } // Assemble shape commands return ret.join(" "); }34:T61e,function transition(id, data, rx, ry, h, ir){ function arcTweenInner(a) { var i = d3.interpolate(this._current, a); this._current = i(0); return function(t) { return pieInner(i(t), rx+0.5, ry+0.5, h, ir); }; } function arcTweenTop(a) { var i = d3.interpolate(this._current, a); this._current = i(0); return function(t) { return pieTop(i(t), rx, ry, ir); }; } function arcTweenOuter(a) { var i = d3.interpolate(this._current, a); this._current = i(0); return function(t) { return pieOuter(i(t), rx-.5, ry-.5, h); }; } function textTweenX(a) { var i = d3.interpolate(this._current, a); this._current = i(0); return function(t) { return 0.6*rx*Math.cos(0.5*(i(t).startAngle+i(t).endAngle)); }; } function textTweenY(a) { var i = d3.interpolate(this._current, a); this._current = i(0); return function(t) { return 0.6*rx*Math.sin(0.5*(i(t).startAngle+i(t).endAngle)); }; } var _data = d3.pie().sort(null).value(function(d) {return d.value;})(data); d3.select("#"+id).selectAll(".innerSlice").data(_data) .transition().duration(750).attrTween("d", arcTweenInner); d3.select("#"+id).selectAll(".topSlice").data(_data) .transition().duration(750).attrTween("d", arcTweenTop); d3.select("#"+id).selectAll(".outerSlice").data(_data) .transition().duration(750).attrTween("d", arcTweenOuter); d3.select("#"+id).selectAll(".percent").data(_data).transition().duration(750) .attrTween("x",textTweenX).attrTween("y",textTweenY).text(getPercent); }35:[] 2e:{"title":"3D Pie Chart 😈","cells":[{"id":0,"value":"md`# 3D Pie Chart 😈 `","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"md`Example was ported from [this block](https://bl.ocks.org/bill-kidwell/2d09c9892747495592a7eb009d4d238d/e53b0de3bda5b801cfc30a930affb466d5b172b2)\n, then cut into slices and added missing 3d features for partial drawing, also implemented rotations over y line\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"viewof rx = slider({\n min: 0, \n max: width, \n step: 1, \n value:100,\n format: \"\",\n description: \"width (rx)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"viewof ir = slider({\n min: 0, \n max: 1, \n step: 0.01 , \n value:0.3,\n format: \"\",\n description: \"Inner radius proportion (ir)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"viewof h = slider({\n min: 0, \n max: 150, \n step: 1,\n value:40,\n format: \"\",\n description: \"height3D (h)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"viewof rotation = slider({\n min: 0, \n max: 359, \n step: 1, \n value:55,\n format: \"\",\n description: \"Rotation clockwise \"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"viewof ry = slider({\n min: 1, \n max: 90, \n value:25,\n step: 1, \n format: \"\",\n description: \"Rotation 3D (ry)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":962,"value":"embed = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":818,"value":"_data.map(d=>d.startAngle).map(d=>d/Math.PI*180).map(d=>Math.round(d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":813,"value":"_data.map(d=>d.endAngle).map(d=>d/Math.PI*180).map(d=>Math.round(d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"salesData=[\n\t{label:\"Basic\", color:\"#E8BE00\",value:0.21},\n\t{label:\"Plus\", color:\"#F18100\",value:0.05},\n\t{label:\"Lite\", color:\"#007D83\",value:0.06},\n\t{label:\"Elite\", color:\"#94688B\",value:0.08},\n\t{label:\"Delux\", color:\"#98BE00\",value:0.208},\n];","pinned":true,"hidden":false,"mode":"ojs"},{"id":512,"value":"function pieCornerSurface(d, rx, ry, h ){\n\t\t\t// Calculating corner left surface key points\n\t\t\tvar sxFirst = ir * rx * Math.cos(d.startAngle);\n\t\t\tvar syFirst = ir * ry * Math.sin(d.startAngle)\n\t\t\tvar sxSecond = rx * Math.cos(d.startAngle);\n\t\t\tvar sySecond = ry * Math.sin(d.startAngle);\n\t\t\tvar sxThird = sxSecond;\n\t\t\tvar syThird = sySecond + h;\n\t\t\tvar sxFourth = sxFirst;\n\t\t\tvar syFourth = syFirst + h;\n\n\t\t\t// Creating custom path based on calculation\n\t\t\treturn `\n\t\t\t\tM ${sxFirst} ${syFirst} \n\t\t\t\tL ${sxSecond} ${sySecond}\n\t\t\t\tL ${sxThird} ${syThird} \n\t\t\t\tL ${sxFourth} ${syFourth}\n\t\t\t\tz\n\t ` \n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":288,"value":"function pieCorner(d, rx, ry, h ){\n\n\t\t\t// Calculating right corner surface key points\n\t\t\tvar sxFirst = ir * rx * Math.cos(d.endAngle);\n\t\t\tvar syFirst = ir * ry * Math.sin(d.endAngle);\n\t\t\tvar sxSecond = rx * Math.cos(d.endAngle);\n\t\t\tvar sySecond = ry * Math.sin(d.endAngle);\n\t\t\tvar sxThird = sxSecond;\n\t\t\tvar syThird = sySecond + h;\n\t\t\tvar sxFourth = sxFirst;\n\t\t\tvar syFourth = syFirst + h;\n\n\t\t\t// Creating custom path based on calculation\n\t\t\treturn `\n\t\t\t\tM ${sxFirst} ${syFirst} \n\t\t\t\tL ${sxSecond} ${sySecond}\n\t\t\t\tL ${sxThird} ${syThird} \n\t\t\t\tL ${sxFourth} ${syFourth}\n\t\t\t\tz\n\t\t\t\t` \n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"data = randomData()","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"md`## Data Prep`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"_data = d3.pie().sort(null).value(function(d) {return d.value;})(data).map(d=>{\n return Object.assign(d,{\n startAngle: d.startAngle + (Math.PI * 2 * (rotation % 360) / 360),\n\t\t\t\tendAngle: d.endAngle + (Math.PI * 2 * (rotation % 360) / 360),\n })\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":844,"value":"JSON.stringify(_data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"md`## Drawing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"pieCorners = _data.map(d=>pieCorner(d, rx+0.5,ry+0.5, h, ir))","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"function randomData(){\n\treturn salesData;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"function changeData(){\n\ttransition(\"salesDonut\", randomData(), 130, 100, 30, 0.4);\n\ttransition(\"quotesDonut\", randomData(), 130, 100, 30, 0);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"function pieTop(d, rx, ry, ir ){\n\n\t\t\t// If angles are equal, then we got nothing to draw\n\t\t\tif (d.endAngle - d.startAngle == 0) return \"M 0 0\";\n\n\t\t\t// Calculating shape key points\n\t\t\tvar sx = rx * Math.cos(d.startAngle),\n\t\t\t\tsy = ry * Math.sin(d.startAngle),\n\t\t\t\tex = rx * Math.cos(d.endAngle),\n\t\t\t\tey = ry * Math.sin(d.endAngle);\n\n\t\t\t// Creating custom path based on calculation\n\t\t\tvar ret = [];\n\t\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\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\t\treturn ret.join(\" \");\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"function 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","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`## Libs`","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require('d3@v5')","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}