2f:T15a1,chart = { const svg = d3.create('svg').attr('id','svg-vis1').attr('class', 'svg-vis').attr("viewBox", [0, 0, width, height]).style('background', background_c) svg.selectAll('circle').data(plastic_waste_world_sort).enter().append('circle').attr('transform', x => `translate(${width/2},${height*0.65}) rotate(${arc_scaler(x.Entity)-90})`) .attr("cx", x => stem_scaler(x.mismanaged_pw_capita) + total_pw_scaler(x.pw_total) + leaf_scaler(x.mismanaged_pw_total) + 10) .attr("cy", 0) .attr("r", x => total_pw_scaler(x.pw_total)) .attr('stroke-width', 2).attr('stroke', primary) .style("fill", secondary) .attr("opacity", 0.4) const groups = svg.selectAll('g').data(plastic_waste_world_sort).enter().append('g').attr('transform', x => `translate(${width/2},${height*0.65}) rotate(${arc_scaler(x.Entity)-90})`) groups.append('path').attr('transform', `rotate(${90}, 0, 0)`).attr('d', x => { const stem = stem_scaler(x.mismanaged_pw_capita)+1 const p_width = leaf_scaler(x.mismanaged_pw_total)+3 // const size = x.mismanaged_ return `M 0 -${inner_radius} C -${0} -${stem-p_width} -${p_width} -${stem-p_width} -${p_width} -${stem} C -${p_width} -${stem+p_width*1.3} ${p_width} -${stem+p_width*1.3} ${p_width} -${stem} C ${p_width} -${stem-p_width} 0 -${stem-p_width} 0 -${inner_radius}` }).style("fill",primary).attr('stroke', primary).attr('stroke-width', 0.2).attr('opacity', 1) groups.append('path').attr('transform', `rotate(${90}, 0, 0)`).attr('d', x => { let total_pw_len = total_pw_scaler(x.pw_total) ? total_pw_scaler(x.pw_total) : 1 let total_len = stem_scaler(x.mismanaged_pw_capita) + total_pw_len*2 + leaf_scaler(x.mismanaged_pw_total) + 20 return `M 0 -${inner_radius} L 0 -${total_len}` }).attr('stroke-width', 0.2) .style("stroke", neutral) // axis svg.append("g").attr("transform", `translate(${260/4}, ${50})`) .call(legend); svg.append("g").attr("transform", `translate(${260/4}, ${500})`) .call(legend2); svg .append("g") .attr("class", "axis axis--x") .attr( "transform", `translate(${width/2}, ${height*0.65}) rotate(170, 0, 0)` ) .call(xAxis); // .style("stroke-dasharray", ("0.4,0.4")) // .attr('transform', d => arc_scaler(d.Entity) > 180 ? `rotate(0)` :`rotate(180)`) // .style("stroke", "gray").style("stroke-dasharray", ("0.4,0.4")) groups.append('text').attr('x', x => { let total_pw_len = total_pw_scaler(x.pw_total) ? total_pw_scaler(x.pw_total) : 1 let total_len = stem_scaler(x.mismanaged_pw_capita) + total_pw_len*2 + leaf_scaler(x.mismanaged_pw_total) + 30 return total_len }).attr('y', 3).text(x => x.Entity).style('font-size', '0.65rem') .attr('transform', d => { let total_pw_len = total_pw_scaler(d.pw_total) ? total_pw_scaler(d.pw_total) : 1 let total_len = stem_scaler(d.mismanaged_pw_capita) + total_pw_len*2 + leaf_scaler(d.mismanaged_pw_total) + 30 return arc_scaler(d.Entity) > 180 ? `rotate(-180, ${total_len}, 0)` :`rotate(-360,${total_len},0)` } ) .attr('text-anchor', d => arc_scaler(d.Entity) > 180 ? `end` :`begin`) .style('font-family',"Roboto").attr('fill', neutral) // annotate_grouping.append('text').style('font-size', 12) // .style('fill', 'whitesmoke') // .attr('dominant-baseline', 'central') // .attr('transform', d => ((x(d.Title) + x.step()/2) > Math.PI) ? `rotate(360)` :`rotate(180)`) // .attr('text-anchor', d => ((x(d.Title) + x.step()/2) > Math.PI) ? `begin` :`end`) // .text(d => d.Title).style('font-size', '12') groups.append('circle') .attr("cx", x => stem_scaler(x.mismanaged_pw_capita)) .attr("cy", 0) .attr("r", x => leaf_scaler(x.mismanaged_pw_total)) .attr('stroke-width', 1) .style("fill",'#293241') .attr("opacity", 0.7) // .style("stroke", "gray") groups.append('circle') .attr("cx", x => stem_scaler(x.mismanaged_pw_capita) + total_pw_scaler(x.pw_total) + leaf_scaler(x.mismanaged_pw_total) + 10) .attr("cy", 0) .attr("r", 1) .style("fill",'black') .attr("opacity", 1) groups.append('circle') .attr("cx", x => stem_scaler(x.mismanaged_pw_capita)) .attr("cy", 0) .attr("r", 1) .style("fill",'white') .attr("opacity", 0.6) groups.append('circle') .attr('cx', x => { let total_pw_len = total_pw_scaler(x.pw_total) ? total_pw_scaler(x.pw_total) : 1 let total_len = stem_scaler(x.mismanaged_pw_capita) + total_pw_len*2 + leaf_scaler(x.mismanaged_pw_total) + 20 return total_len }) .attr("cy", 0) .attr("r", 1) .style("fill",'black') .attr("opacity", 1) // svg.append("circle") // .attr('cx', 100) // .attr('cy', 200) // .attr("r", 100) // .style("fill", t.url()); // svg.append("circle") // .attr('cx', 100) // .attr('cy', 30) transform-origin: center; // .attr("r", 30) // .style("fill", z.url()); // const g = svg.append('g').attr('transform', `translate(${25}, ${25}}`) // g.append('path').attr("transform", `translate(${25}, ${25}) rotate(20, 0, 0)`).attr('d',`M 0 0 C 0 -${stem-2} -${p_width} // -${stem-p_width} -${p_width} -${stem} C -${p_width} -${stem+p_width*1.2} ${p_width} -${stem+p_width*1.2} ${p_width} -${stem} C ${p_width} -${stem-p_width} 0 -${stem-2} 0 0`).style("fill",'tomato') // M 0 0 C 0 -${stem} -${p_width} -5 -2 -7 C -2 -10 2 -10 2 -7 C 2 -5 0 -2 0 0 return svg.node() }30:[{"id":"a0313a37cff5620284f8f964cc51b97f4ef479d63b8913cfe1c7bd73349edf8f94c64f2b3a3554790ce881a6a78ef638098338f4e56757014ee8b4b3aa3aa566","href":"https://static.observableusercontent.com/files/a0313a37cff5620284f8f964cc51b97f4ef479d63b8913cfe1c7bd73349edf8f94c64f2b3a3554790ce881a6a78ef638098338f4e56757014ee8b4b3aa3aa566","name":"plastic_dataset.json","type":"application/json","lastModified":1676137680528.178,"size":9924},{"id":"ce520bc085cd45c5b435e251ff2391bd51b7d3ca8159de62f56cbb76e3d94040a7878a3c26ff57011255bdb0f8c8ab71d31768087c8ac194af998da50be08b7a","href":"https://static.observableusercontent.com/files/ce520bc085cd45c5b435e251ff2391bd51b7d3ca8159de62f56cbb76e3d94040a7878a3c26ff57011255bdb0f8c8ab71d31768087c8ac194af998da50be08b7a","name":"plastic_waste_world@1.csv","type":"text/csv","lastModified":1676270775799.987,"size":9611},{"id":"8312d198423be9dfdff5c3f2cfe93a0dd1bc3d1474d8a9a29c1b2894ef61ea53d4f0b5b25fe214f6570e90c6dfe10061ab573231d003880810b5220357d0f82d","href":"https://static.observableusercontent.com/files/8312d198423be9dfdff5c3f2cfe93a0dd1bc3d1474d8a9a29c1b2894ef61ea53d4f0b5b25fe214f6570e90c6dfe10061ab573231d003880810b5220357d0f82d","name":"plastic_waste_world.csv","type":"text/csv","lastModified":1676269486556.584,"size":11778}] 2d:{"title":"Test Test Test","cells":[{"id":0,"value":"# Test Test Test","pinned":false,"hidden":false,"mode":"md"},{"id":1220,"value":"height = width * 1.7777","pinned":true,"hidden":false,"mode":"ojs"},{"id":1326,"value":"neutral = '#000'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1327,"value":"background_c = '#fff'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1324,"value":"secondary = '#3d5b80'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1322,"value":"primary = '#98c0d9'\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1384,"value":"exampleButton = svgDownloadButton(chart)\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1378,"value":"function svgDownloadButton(svgnode, filename = 'download.svg') {\n const downloadButton = html`${download_icon.outerHTML} Save ${filename}`;\n\n downloadButton.onclick = function(e) {\n var url = (downloadButton.href = URL.createObjectURL(serialize(svgnode)));\n setTimeout(function() {\n URL.revokeObjectURL(url);\n }, 50);\n };\n\n return downloadButton;\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1406,"value":"import { serialize, download_icon } from '@kelleyvanevert/little-things'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1237,"value":"### Controls","pinned":false,"hidden":false,"mode":"md"},{"id":1239,"value":"viewof leaf_width = Inputs.range([0, 100], { value: 50, step: 0.5, label: \"lead width\"})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1243,"value":"viewof stem_x1 = Inputs.range([0, 1600], {value: 1105, step: 0.5, label: \"stem x1\"})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1245,"value":"viewof total_pw_x2 = Inputs.range([0, 1000], {step: 1, label: \"Total_plastic waste max size\"})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1247,"value":"viewof total_x = Inputs.range([0, 1000], { value: 170,step: 0.5, label: \"Total_plastic waste max size\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1249,"value":"viewof inner_radius = Inputs.range([0, 1000], {value:228, step: 0.5, label: \"Total_plastic waste max size\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1213,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":642,"value":"plastic_dataset = FileAttachment(\"plastic_dataset.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":667,"value":"plastic_waste_world1.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":311,"value":"arc_scaler = d3.scaleBand().range([0, 360]).domain(plastic_waste_world1.map(x => x.Entity))","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"stem_scaler = d3.scaleSqrt().range([inner_radius,stem_x1]).domain([0, d3.extent(plastic_waste_world1.map(x => x.mismanaged_pw_capita))[1]])","pinned":true,"hidden":false,"mode":"ojs"},{"id":416,"value":"leaf_scaler = d3.scaleLinear().range([2, leaf_width]).domain(d3.extent(plastic_waste_world1.map(x => x.mismanaged_pw_total)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":771,"value":"total_pw_scaler = d3.scaleLinear().range([5, total_x]).domain(d3.extent(plastic_waste_world1.map(x => x.pw_total )))","pinned":true,"hidden":false,"mode":"ojs"},{"id":704,"value":"plastic_waste_world_sort = plastic_waste_world1.sort((a,b) => b.mismanaged_pw_capita - a.mismanaged_pw_capita)","pinned":true,"hidden":false,"mode":"ojs"},{"id":471,"value":"arc_step = 360 / plastic_waste_world1.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":917,"value":"arc_scaler.step()","pinned":true,"hidden":false,"mode":"ojs"},{"id":981,"value":"background = \"whitesmoke\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":979,"value":"petal_color = \"#fc6f79\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":977,"value":"stroke_line = '#1f1f1f'","pinned":true,"hidden":false,"mode":"ojs"},{"id":998,"value":"pw_total_color = 'tomato' ","pinned":true,"hidden":false,"mode":"ojs"},{"id":975,"value":"text_color = 'black'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1123,"value":"stem_scaler1 = d3.scaleSqrt().range([stem_x1, inner_radius+20]).domain(d3.extent(plastic_waste_world1.map(x => x.mismanaged_pw_capita)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1051,"value":"click link","pinned":false,"hidden":false,"mode":"html"},{"id":1173,"value":"import { legendCircle } from \"@harrystevens/circle-legend\";\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1177,"value":"legend = legendCircle()\n .scale(total_pw_scaler)\n .tickValues([10000000, 30000000, 50000000])\n .tickFormat((d, i, e) => i === e.length - 1 ? d + \" Tonnes of trash\" : d)\n .tickSize(2); // defaults to 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":1179,"value":"legend2 = legendCircle()\n .scale(leaf_scaler)\n .tickValues([50000, 150000, 300000])\n .tickFormat((d, i, e) => i === e.length - 1 ? d + \" bushels of hay\" : d)\n .tickSize(2); // defaults to 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":1116,"value":"xAxis = g => g\n .call(d3.axisLeft(stem_scaler).ticks(8))\n .call(g => g.select('.domain').remove())\n // .call(g => g.select('text').remove())\n // .call(g => g.selectAll('.tick line').remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":1205,"value":"fontName = \"Roboto\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1203,"value":"style = {\n yield html``\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1184,"value":"plastic_waste_world = {\n const updatedData = plastic_waste_world1.map(item => ({\n ...item,\n mismanaged_pw_total: item.mismanaged_pw_total * 0.907 \n}))\n\n return updatedData\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":661,"value":"plastic_waste_world1 = await FileAttachment(\"plastic_waste_world@1.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1060,"value":"{var svg = document.getElementById(\"svg-vis1\");\n\n//get svg source.\nvar serializer = new XMLSerializer();\nvar source = serializer.serializeToString(svg);\n\n//add name spaces.\nif(!source.match(/^]+xmlns=\"http\\:\\/\\/www\\.w3\\.org\\/2000\\/svg\"/)){\n source = source.replace(/^