2f:T12e0,{ const svg = d3.create('svg').attr('id','svg-vis1').attr('class', 'svg-vis').attr("viewBox", [0, 0, width, height]).style('background', background) const groups = svg.selectAll('g').data(plastic_dataset_sorted).enter().append('g').attr('transform', x => `translate(${width*0.1},${height/2}) rotate(${arc_scaler(x.place)} ${0} ${0})`) // 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.63}) rotate(170, 0, 0)` // ) // .call(xAxis); groups.append('path').attr('d', x => { const stem = stem_scaler(x.mpw_oceans_2021)+1 const p_width = leaf_scaler(x.mpw_2021)+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",petal_color).attr('stroke', stroke_line).attr('stroke-width', 0.5).attr('opacity', 0.8) // svg.call(t); // svg.call(z); // groups.append('path').attr('d', x => { // let total_pw_len = total_pw_scaler(x.mpw_2021) ? total_pw_scaler(x.mpw_2021) : 1 // let total_len = stem_scaler(x.pWaste2016) + total_pw_len*2 + leaf_scaler(x.pWaste2016) + 20 // return `M 0 -${inner_radius} L 0 -${total_len}` // }).attr('stroke-width', 0.7) // .style("stroke", stroke_line) // // .style("stroke-dasharray", ("0.4,0.4")) // groups.append('g').attr('transform', `rotate(${-90}, 0, 0)`).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", x => total_pw_scaler(x.pw_total)) // .attr('stroke-width', 0.4) // .style("fill",pw_total_color) // .attr("opacity", 0.5) // .style("stroke", "gray").style("stroke-dasharray", ("0.4,0.4")) // groups.append('text').attr('transform', `rotate(${-90})`).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('text-anchor', 'start').style('font-family',"Roboto").attr('fill', text_color) // // circle markers // groups.append('circle').attr('transform', `rotate(${-90}, 0, 0)`) // .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",'black') // .attr("opacity", 0.5) // // .style("stroke", "gray") // groups.append('circle').attr('transform', `rotate(${-90}, 0, 0)`) // .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('transform', `rotate(${-90}, 0, 0)`) // .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('transform', `rotate(${-90}, 0, 0)`) // .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":1682992912201.596,"size":9924},{"id":"ce520bc085cd45c5b435e251ff2391bd51b7d3ca8159de62f56cbb76e3d94040a7878a3c26ff57011255bdb0f8c8ab71d31768087c8ac194af998da50be08b7a","href":"https://static.observableusercontent.com/files/ce520bc085cd45c5b435e251ff2391bd51b7d3ca8159de62f56cbb76e3d94040a7878a3c26ff57011255bdb0f8c8ab71d31768087c8ac194af998da50be08b7a","name":"plastic_waste_world@1.csv","type":"text/csv","lastModified":1682992912201.596,"size":9611},{"id":"ae0fcc6b1a1a08479ef26a3e65d1eed06ba7e1d96e9b91b72720f76aba8b356d4ee10072c530a68b0a0213b8156b9a30ffaac6b5e53ebfddab9e85fdff450327","href":"https://static.observableusercontent.com/files/ae0fcc6b1a1a08479ef26a3e65d1eed06ba7e1d96e9b91b72720f76aba8b356d4ee10072c530a68b0a0213b8156b9a30ffaac6b5e53ebfddab9e85fdff450327","name":"plastic_oceans_data_2.csv","type":"text/csv","lastModified":1683801894723.82,"size":22297}] 2d:{"title":"Plastic Oceans","cells":[{"id":0,"value":"# Plastic Oceans","pinned":false,"hidden":false,"mode":"md"},{"id":642,"value":"plastic_dataset = FileAttachment(\"plastic_dataset.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1236,"value":"plastic_dataset_sorted = plastic_oceans_data_2.sort((a,b) => b.pWaste2010 - a.pWaste2010 ).slice(0,50)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1228,"value":"## Settings","pinned":false,"hidden":false,"mode":"md"},{"id":1231,"value":"width = 1600","pinned":true,"hidden":false,"mode":"ojs"},{"id":1233,"value":"height = width * 1.4","pinned":false,"hidden":false,"mode":"ojs"},{"id":1216,"value":"## Scalers","pinned":false,"hidden":false,"mode":"md"},{"id":1245,"value":"plastic_dataset_sorted","pinned":true,"hidden":false,"mode":"ojs"},{"id":1249,"value":"plastic_oceans_data_2 = await FileAttachment(\"plastic_oceans_data_2.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":311,"value":"arc_scaler = d3.scaleBand().range([10, 195]).domain(plastic_dataset_sorted.map(x => x.place))","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"stem_scaler = d3.scaleSqrt().range([inner_radius,stem_x1]).domain([0, d3.extent(plastic_dataset_sorted.map(x => x.mpw_oceans_2021))[1]])","pinned":true,"hidden":false,"mode":"ojs"},{"id":416,"value":"leaf_scaler = d3.scaleLinear().range([2, leaf_width]).domain(d3.extent(plastic_dataset_sorted.map(x => x.mpw_2021)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":771,"value":"total_pw_scaler = d3.scaleLinear().range([5, total_x]).domain(d3.extent(plastic_dataset_sorted.map(x => x.pWaste2016 )))","pinned":true,"hidden":false,"mode":"ojs"},{"id":301,"value":"viewof text_x = Inputs.range([0, 1000], {value: 500, step: 1, label: \"Text Distance\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":744,"value":"viewof leaf_width = Inputs.range([0, 100], { value: 50, step: 0.5, label: \"leaf width\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"viewof stem_x1 = Inputs.range([0, 1600], {value: 1105, step: 0.5, label: \"Total Plastic Waste\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":773,"value":"viewof total_pw_x2 = Inputs.range([0, 1000], {step: 1, label: \"Mismanaged Plastic Waste\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":788,"value":"viewof total_x = Inputs.range([0, 1000], { value: 170,step: 0.5, label: \"Mismanaged Oceans Plastic Waste\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"plastic_waste_world_sort = plastic_waste_world.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_world.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":917,"value":"arc_scaler.step()","pinned":true,"hidden":false,"mode":"ojs"},{"id":689,"value":"viewof inner_radius = Inputs.range([0, 1000], {value:228, step: 0.5, label: \"Total_plastic waste max size\"}) ","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_world.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(4))\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":"leaf_scaler.domain()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1341,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1312,"value":"M 0 0 C 0 -1 -2 -2 -2 -4 C -2 -6 0 -6 0 -8 C 0 -6 2 -6 2 -4 C 2 -2 0 -1 0 0 \nM 0 -8 C 0 -10 -5 -10 -5 -14 C -5 -17 -3 -19 0 -19 C 3 -19 5 -17 5 -14 C 5 -10 0 -10 0 -8","pinned":false,"hidden":false,"mode":"md"},{"id":268,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":661,"value":"plastic_waste_world = await FileAttachment(\"plastic_waste_world@1.csv\").csv({typed: \"auto\"})","pinned":true,"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(/^