2f:T832,30:T7aa,piechart = { const svg = d3.select(DOM.svg(width, height)); const g = svg .append("g") .attr("transform", `translate(${(width / 2)}, ${height / 2})`); const arc = g .selectAll(".arc") .data(final_data) .enter() .append("g") .classed("arc", true); paths.forEach((path, index) => { arc .append("path") .attr("d", path.path) .attr("stroke", "white") .attr("stroke-width", 2) .attr("fill", (d) => color(d.data.name)) .attr('opacity', 0.25) }); const axisGrid = g.append("g").attr("class", "axisWrapper"); const axis = axisGrid .selectAll(".axis") .data(final_data) .enter() .append("g") .attr("class", "axis"); const points = g .selectAll(".graph_points") .data(final_data) .enter() .append("g") .classed("segment", true) .selectAll('g') .classed("points", true) .append('circle') .data(d => d.data.points) .enter() points.append("g") .attr( "transform", (d) => `translate(${d3.pointRadial( d.placement, (rScale(maxValue) * yPlacement(d.ring)) ).map(x => x-iconsize/2)})` ) .call(g => g.append("use") .attr("href", d=>`#A`) .attr("width", iconsize) .attr("height", iconsize) .attr("stroke", "#000") .attr("fill", (d) => color(d.group_name))) g .selectAll("paths") .data(paths) .enter() .append('path') .attr("id", d => d.ring) .attr("d", d => d.ringPath()) .attr('fill', 'none') .attr("transform", "translate(0,5)"); g.selectAll("texts") .data(paths) .enter() .append("text") .append("textPath") .attr("xlink:href", d => "#" + d.ring) .style("text-anchor","left") .text(d => d.ring) .attr("fill", 'navy') .attr("filter", "drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))") return svg.node(); }31:[] 2d:{"title":"Concentric Pie Chart","cells":[{"id":0,"value":"md`# Concentric Pie Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1785,"value":"$2f","pinned":false,"hidden":false,"mode":"html"},{"id":2193,"value":"change ring to test to put all the points in data in a single ring of choice. this helps to visualize how the points are not in the right concentric ring of the circle. The points are placed in the circle based on the `yPlacement` and `rScale` functions","pinned":false,"hidden":false,"mode":"md"},{"id":2177,"value":"ring_to_test = \"Ring 1\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2126,"value":"data = [\n {\n name: \"Segment 1\",\n value: 1,\n points: [\n {ring: ring_to_test},\n {ring: ring_to_test},\n {ring: ring_to_test},\n {ring: ring_to_test},\n ]\n },\n {\n name: \"Segment 2\",\n value: 2,\n points: [\n {ring: ring_to_test},\n {ring: ring_to_test},\n ]\n },\n {\n name: \"Segment 3\",\n value: 3,\n points: [\n {ring: ring_to_test},\n {ring: ring_to_test}\n ]\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"yPlacement = function(expr) {\n switch(expr) {\n case \"Ring 7\":\n return 0.01\n break;\n case \"Ring 6\":\n return 0.15\n break;\n case \"Ring 5\":\n return 0.27\n break;\n case \"Ring 4\":\n return 0.4\n break;\n case \"Ring 3\":\n return 0.52\n break;\n case \"Ring 2\":\n return 0.64\n break;\n case \"Ring 1\":\n return 0.77\n break;\n default:\n console.log(`value out of bounds`);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2228,"value":"icon_size = 20","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":450,"value":"myAngleScale = d3.scaleLinear().domain([0, 10]).range([0, 2*Math.PI])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2230,"value":"iconsize = 20;","pinned":true,"hidden":false,"mode":"ojs"},{"id":360,"value":"rScale = d3.scaleLinear()\n .domain([0, maxValue])\n .range([0, radius])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2078,"value":"maxValue = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"wrapWidth = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"# Pie","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"pie = d3.pie()\n\t.value(d => d.value)\n\t// .sort((a,b) => b.value - a.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"radius = Math.min(width, height) / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"make_axis = function(start, end) {\n let increment = end/8\n return Array(((end) - (start + increment)) / increment).fill().map((_, idx) => idx * increment)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"axis = make_axis(0, radius)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1215,"value":"ring_name = [\"Ring 1\", \"Ring 2\", \"Ring 3\", \"Ring 4\", \"Ring 5\", \"Ring 6\", \"Ring 7\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1325,"value":"ring_start = [-1,-0.4,-0.25,-0.17,-0.14,-0.11,-0.09]","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"paths = axis.map((elem, i) => ({ \n path: d3.arc().outerRadius(radius - elem - 50).innerRadius(0),\n ring: ring_name[6-i],\n ring_start: ring_start[i],\n ringPath: d3.arc().innerRadius(d => axis[i] + 25).outerRadius(d => axis[i] + 25).startAngle(d => ring_start[i]).endAngle(d => 1)\n })\n);","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"color = d3.scaleOrdinal().domain(data)\n .range(d3.schemeCategory10.reverse());","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"x = d3.scaleBand().rangeRound([0, width]).padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"y = d3.scaleLinear().rangeRound([height, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"pied_data = pie(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":669,"value":"new_data = {\n let new_data = []\n for (let j = 0; j < data.length; j++) {\n\n var arr = pied_data[j].data.points.map(function(value) {return value.ring;});\n \n var uniques = arr.reduce((acc, val) => {\n acc[val] = acc[val] === undefined ? 1 : acc[val] += 1;\n return acc;\n }, {})\n\n let counts = {};\n let current = pied_data[j].data.points.map(({\n ring,\n name,\n value}) => {\n if(!counts[ring])\n counts[ring]=0;\n counts[ring]+=1\n return {\n ring,\n name,\n group_name: pied_data[j].data.name,\n n_in_slice: uniques[ring],\n iterator_in_slice: counts[ring],\n placement: placement_fun(uniques[ring], pied_data[j].startAngle, pied_data[j].endAngle, counts[ring])\n }\n })\n \n new_data.push(current)\n }\n return new_data\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":931,"value":"placement_fun = (points_in_arc, start, end, index) => {\n // if there's one point put it in the center\n if (points_in_arc === 1) {\n return (end + start) / 2\n } else {\n let slice_size = (end - start) / points_in_arc\n return (slice_size*index) + start - (slice_size/2)\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":674,"value":"final_data = {\n for (let j = 0; j < pied_data.length; j++) {\n pied_data[j].data.points = new_data[j]\n }\n return pied_data\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}