2b:null 2c:["$","title",null,{"children":"Simple 3D Pie Chart | Vamsi Yandapalli | Observable"}] 31:Tc25,pie = { const chart = d3.select(svg``); yield chart.node(); // chart.selectAll('*').remove() chart.append("g").attr("id","quotesDonut"); // svgNode.append("g").attr("id","partialDonut"); const ryConverted = ry/90*rx; draw("quotesDonut",data , 350, 200,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 = chart.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;}); }32:T1172,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(1); }) .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}) ` }) */ }33: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(" "); }34:Tabb,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(" "); }35:T683,// 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); //}36:[] 2f:{"id":"698d38a00a9aafc8","slug":"simple-3d-pie-chart","title":"Simple 3D Pie Chart","thumbnail":"f018129a8fbd70364fb792f8cb9f13001974e84b8ba4674555a925a64df82db5","access_level":"public","create_time":"$D2021-12-31T10:43:52.429Z","update_time":"$D2022-01-06T07:16:06.491Z","view_time":null,"first_public_time":"$D2022-01-06T07:17:10.750Z","fork":{"id":"c63ffc387eacbcdc","slug":"3d-pie-chart","title":"3D Pie Chart 😈","owner":{"id":"fcd7e4188e1df970","login":"bumbeishvili","name":"David B."}},"stars":0,"starred":false,"owner":{"type":"team","id":"b0df598649be9d42","login":"6e7ec3b8b5e4f784","name":"Vamsi Yandapalli","avatar_url":"https://avatars-next.observableusercontent.com/c32cf82f91df1b4557f5e3f69702899693721ee73ce62f2741b545882539738a","tier":"starter_2024"},"version":1222,"publish_version":1222,"role":null,"authored":false,"authors":[{"type":"individual","id":"6e7ec3b8b5e4f784","login":"6e7ec3b8b5e4f784","name":"Vamsi Yandapalli","avatar_url":"https://avatars-next.observableusercontent.com/c32cf82f91df1b4557f5e3f69702899693721ee73ce62f2741b545882539738a","tier":null}],"members":[{"type":"individual","id":"6e7ec3b8b5e4f784","login":"6e7ec3b8b5e4f784","name":"Vamsi Yandapalli","avatar_url":"https://avatars-next.observableusercontent.com/c32cf82f91df1b4557f5e3f69702899693721ee73ce62f2741b545882539738a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Simple 3D Pie Chart","cells":[{"id":0,"value":"md`# Simple 3D Pie Chart `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":121,"value":"md`Example was ported from [this example by David B](https://observablehq.com/@bumbeishvili/3d-pie-chart)\n, then removed all the other slices of pie excluding only important 3D pie chart.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":" rx=100;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":215,"value":"ir=0.33;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"h=15;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":563,"value":"rotation=0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":108,"value":"ry=32;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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;\n\t\t\tvar sxFourth = sxFirst;\n\t\t\tvar syFourth = syFirst;\n\n\t\t\t//Creating custom path based on calculation\n\t\t\t// return `\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","author":"$undefined","summary":"$undefined"},{"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\t// return `\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","author":"$undefined","summary":"$undefined"},{"id":188,"value":"data = randomData()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":205,"value":"md`## Data Prep`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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 endAngle: d.endAngle + (Math.PI * 2 * (rotation % 360) / 360),\n })\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":844,"value":"//JSON.stringify(_data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":160,"value":"md`## Drawing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":198,"value":"//pieCorners = _data.map(d=>pieCorner(d, rx+0.5,ry+0.5, h, /*ir*/))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":200,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"function randomData(){\n\treturn salesData;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":31,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":37,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"md`## Libs`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"d3 = require('d3@v5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"