32:T5e3,## Summary Finetuned version of my entry to visualizing to ADB [Visualizing Climate Change & Resilience](https://challenges.adb.org/en/challenges/dataviz4climate/pages/brief-2?lang=en) The Philippines contributes to almost 36% of the entire worlds mismanaged plastic waste that pours into the ocean and roughly 50% of the waste comes from sachet packaging. The Goal of the Visualization is to highlight the issue, and advocate current initiatives such as [trash to cashback](https://quezoncity.gov.ph/program/qc-residents-can-exchange-trash-for-food-and-groceries-through-trash-to-cashback/), which exchange garbage for points that can be redeemed as incentives. ## How does plastic affect climate change? Plastic leave a poisonous legacy on our oceans, as it breaks down it releases powerful green house gasses. But aside from direct emission of plastic onto the environment, they also produce the issue of microplastics. Recent studies have suggested adverse effects on plankton to produce oxygen. ## Issues with Plastic Sachet? ### What are Sachets? Sachets are single use plastics that typically used to purchase branded quality products in small amounts. What separate's Sachet from other plastic products? It is a nightmare to recycle. Sachets are single use plastics, and they fundamentally break the rules of reduce, reuse and recycle system. To further exacerbate the situation, sachets are composed of multiple layers of materials, making it either very expensive or difficult to recycle.33:T3cf9,viz = { mutable type = 0 const svg = d3.create('svg').attr('class', 'svg-vis').attr("viewBox", [0, 0, width_c, height]) const south_asian_countries = ['Indonesia', 'Philippines', 'Thailand', 'Vietnam', 'Malaysia'] const projection = d3.geoEquirectangular().fitSize([width_c, height], mapGeoJson) const wrapper = svg.append('g') let geoGenerator = d3.geoPath().projection(projection) let regions = wrapper.selectAll('region').data(mapGeoJson.features) let areas = regions.enter().append('path').attr('class', 'areas').attr('d', d=>geoGenerator(d)).attr('fill','#969696').attr('opacity', 0) const nodes = wrapper.selectAll('circle').data(nodes_data).join('circle').attr('r', node_radius).attr('fill', 'gray').attr('stroke', 'whitesmoke').attr('stroke-width', 0.2) const river_group = wrapper.append('g').attr('opacity', 0) const xAxisGroup = river_group.append('g').attr('transform', `translate(${0}, ${height - (height/3)})`).call(xAxisAllRivers).selectAll("text").attr("dy", "-8px").attr("dx", "-5px").style("text-anchor", "end").attr("transform", "rotate(-90)") const riverbar = river_group.append('g').attr('transform', `translate(${0}, ${(0)})`) .selectAll('rect').data(all_rivers_plastic1).join('rect') .attr('y', v => y_all_rivers(v["Share of global plastics emitted to ocean"])) .attr('x', v => x_all_rivers(v["Entity"])) .attr('height', v => y_all_rivers(0) - y_all_rivers(v["Share of global plastics emitted to ocean"])) .attr('width', x_all_rivers.bandwidth()-3) .attr('fill', v => v.ph ? "red" : "gray") const yAxisGroup = river_group.append('g') .attr('transform', `translate(${margin.right}, ${0})`).call(yAxisAllRivers) .call(g => g.append('text') .attr('opacity', 0.8) .attr('x', 10) .attr('y', margin.top) .attr('fill','gray') .attr('font-weight', 'bold') .attr('font-size', "0.50rem") .attr('text-anchor', 'start') .text('% of Plastic Emission Contribution')) // // init simulation const simulation = d3.forceSimulation(); simulation.nodes(nodes_data); simulation.force('charge', d3.forceManyBody().strength(0)) .force('collision', d3.forceCollide().radius(d => node_radius+0.5).iterations(10)).stop() const annotate_node = wrapper.append("g") .attr('transform', `translate(${(width_c/4-5)}, ${(height/3) - 2})`) annotate_node.append('path') .attr('d', generateArrow( -200, 0, 0, 0, 5, 1, 1)) .style('fill', 'none') .style('stroke', 'black'); annotate_node.append('text').text('Each Dot = 1000 Tones of Trash').attr('x', -200).attr('dy', -9).attr('class', 'annotate_node') const countries_bar = wrapper.append("g") .attr('transform', `translate(${margin.left}, ${height - (height/4)})`).call(yAxisCountries) .selectAll("text") .style("text-anchor", "end").attr('opacity', 1).attr("dy", "-16px").attr("dx", "-15px") .attr("transform", "rotate(-90)"); const scatter_group = wrapper.append('g') const scatter_X_axis =scatter_group.append('g').attr('opacity', 0.8) .attr('transform', `translate(0, ${height/2})`) .call(scatterXAxis) .call(g => g.append('text') .attr('opacity', 0.8) .attr('x', width_c - 200) .attr('y', 20) .attr('fill','gray') .attr('font-weight', 'bold') .attr('font-size', "0.61rem") .attr('text-anchor', 'start') .text('→ GDP per Capita (Purchasing Power)')) scatter_group.append("g").attr("transform", `translate(${width_c - (width_c/3)}, ${height/3})`) .call(circleLegend); const scatter_Y_axis = scatter_group.append('g').attr('opacity', 0.8) .attr('transform', `translate(${margin.left}, 0)`) .call(scatterYAxis) .call(g => g.append('text') .attr('opacity', 0.8) .attr('x', 10) .attr('y', 20) .attr('fill','gray') .attr('font-weight', 'bold') .attr('font-size', "0.61rem") .attr('text-anchor', 'start') .text('Total Plastic Emission ↑')) const circleScatter = wrapper.append("g") .attr("stroke", "whitesmoke") .attr("stroke-opacity", 1.2) .selectAll("circle") .data(plastic_dataset) .enter().append("circle") .attr("cx", d => xScaleScatter(d.GDP_per_capita)) .attr("cy", d => yScaleScatter(d.pw_total)) .attr('fill', d => { if (south_asian_countries.includes(d.Entity)) { return 'red' } else { return 'gray' }}) .attr('opacity', 0.5) .on("mousemove", (event, val) => mouseover_animation(val,event)).on("mouseout", (d) => { tooltip.style("visibility",'hidden') }) const mouseover_animation = (val, event) => { tooltip.style("visibility", "visible").style("top", (event.y-10)+"px").style("left",(event.x+10)+"px") .html("

Country: " + val.Entity + "

" +"

Plastic Waste Total: " + (val.pw_total/1000).toFixed(2) + "k

" +"

") } const scatterText = scatter_group.append("g") .selectAll("text") .data(plastic_dataset) .enter().append("text") .attr("x",d => xScaleScatter(d.GDP_per_capita)) .attr("y", d => yScaleScatter(d.pw_total)) .attr("dy", d => (sizeScale(d.mismanaged_pw_capita)+10)) .style("font-size", d => Math.max(10,sizeScale(d.mismanaged_pw_capita) * 0.4)) .style("text-anchor", "middle") .attr('fill', d => { if (south_asian_countries.includes(d.Entity)) { return "red" } else { return 'gray' }}) .text(function(d) { return d.Entity; }); return Object.assign ( html`

Visualization Controls

${viz_descriptions}

${svg.node()}

`, { morph(type) { d3.select('.annotation-section').style('max-height', width*0.6 + "px") d3.selectAll('.desc-section').style('height', width*0.6 + "px") if (type == 0) { nodes.attr('transform', function(d) { return `translate(${width_c/2},${height/2 })`}) // Nodes simulation.stop() // nodes.transition() // .duration(800) // .attr('r', node_radius) // .attr('opacity', 0) // .attr('transform', d => `translate(${Math.random() * width_c },${0})`).attr('fill', 'gray') // Nodes simulation.force('charge', d3.forceManyBody().strength(-5)) .force('collision', d3.forceCollide().radius(d => Math.ceil(Math.random()*10, 3)).strength(1)) .force('center', d3.forceCenter(width_c/2, height/2).strength(1)) .force('y', d3.forceY().y(height/2).strength(1)) .force('x', d3.forceX().x(width_c/2).strength(1)) simulation.on('tick', () => { nodes.transition().duration(1500).ease(d3.easeLinear).attr('transform', function(d) { return `translate(${d.x},${ d.y })`}).attr("fill", 'gray').attr('opacity', 0.6).attr('r', d => Math.ceil(Math.random()*10, 3))}) simulation.velocityDecay(0.3).alpha(1).restart() // hide annotate_node.transition().attr('opacity', 0) scatter_group.transition().attr('opacity', 0) circleScatter.transition().duration(800).attr("r",0); countries_bar.transition().attr('opacity', 0) areas.transition().attr('opacity', 0) river_group.transition().attr('opacity', 0) } else if (type == 1) { // Nodes simulation.force('charge', d3.forceManyBody().strength(0)) .force('collision', d3.forceCollide().radius(d => node_radius+0.5).iterations(10)) .force('charge', d3.forceManyBody().strength(0)).force('center', d3.forceCenter(width_c/2, height/2).strength(0)).stop() nodes.transition().duration(1500) .attr('opacity', 1) .attr('transform', d => `translate(${d.x_grid},${d.y_grid})`).attr('fill', 'gray').attr("r",node_radius); annotate_node.transition().attr('opacity',1) // hide scatter_group.transition().attr('opacity', 0) countries_bar.transition().attr('opacity', 0) areas.transition().attr('opacity', 0) circleScatter.transition().duration(800).attr("r",0); } else if (type == 2) { simulation.stop() // show areas.transition().duration(400).attr('opacity', 0.4) // Nodes simulation .force('charge', d3.forceManyBody().strength(0)) .force('collision', d3.forceCollide().radius(d => node_radius+0.5).iterations(10)) .force('y', d3.forceY().y(d => d.y_map)) .force('x', d3.forceX().x(d => d.x_map)) simulation.on('tick', () => { nodes.transition().duration(800).ease(d3.easeLinear).attr('transform', function(d) { return `translate(${d.x},${ d.y})`}).attr('fill', 'gray') }); simulation.alpha(1).alphaDecay(0.05).velocityDecay(0.25).restart() // hide annotate_node.transition().attr('opacity',0) scatter_group.transition().attr('opacity', 0) countries_bar.transition().attr('opacity', 0) circleScatter.transition().duration(800).attr("r",0); } else if (type == 3) { simulation.stop() // show areas.transition().duration(400).attr('opacity', 0.4) // Nodes simulation.force('y', d3.forceY().y(d => d.y_map)).force('x', d3.forceX().x(d => d.x_map)) simulation.on('tick', () => { nodes.transition().duration(800).ease(d3.easeLinear).attr('transform', function(d) { return `translate(${d.x},${ d.y})`}).attr('fill', d => { if (south_asian_countries.includes(d.Entity)) { return 'red' } else { return 'gray' }})}) simulation.alpha(1).alphaDecay(0.05).velocityDecay(0.25).restart() // hide river_group.transition().attr('opacity', 0) scatter_group.transition().attr('opacity', 0) countries_bar.transition().attr('opacity', 0) circleScatter.transition().duration(800).attr("r",0); } else if (type == 4) { simulation.stop() // show countries_bar.transition().attr('opacity', 1) // Nodes simulation.force('y', d3.forceY().y(d => x_count(d.count)).strength(4)) .force('x', d3.forceX().x(d => y_countries(d.Entity)).strength(1)) .force('collision', d3.forceCollide().radius(d => node_radius+0.5).iterations(10)) simulation.restart() simulation.on('tick', () => { nodes.transition().duration(800).ease(d3.easeLinear).attr('transform', function(d) { return `translate(${d.x + margin.left},${ d.y })`}).attr('fill', d => { if (south_asian_countries.includes(d.Entity)) { return 'red' } else { return 'gray' }}).attr('opacity', 1)}) simulation.alpha(1).alphaDecay(0.1).velocityDecay(0.36).restart() // hide river_group.transition().attr('opacity', 0) scatter_group.transition().attr('opacity', 0) areas.transition().attr('opacity', 0) circleScatter.transition().duration(800).attr("r",0); } else if (type == 5) { simulation.stop() // show countries_bar.transition().attr('opacity', 1) // Nodes simulation.force('y', d3.forceY().y(d => x_count(d.count)).strength(4)) .force('x', d3.forceX().x(d => y_countries(d.Entity)).strength(1)) .force('collision', d3.forceCollide().radius(d => node_radius+0.5).iterations(10)) simulation.restart() simulation.on('tick', () => { nodes.transition().duration(800).ease(d3.easeLinear).attr('transform', function(d) { return `translate(${d.x + margin.left},${ d.y })`}).attr('fill', d => { if (d.Entity == 'Philippines') { return 'red' } else { return 'gray' }}).attr('opacity', 1)}) simulation.alpha(1).alphaDecay(0.1).velocityDecay(0.36).restart() // hide river_group.transition().attr('opacity', 0) scatter_group.transition().attr('opacity', 0) areas.transition().attr('opacity', 0) circleScatter.transition().duration(800).attr("r",0); } else if (type == 6) { simulation.stop() // show scatter_group.transition().attr('opacity', 1) circleScatter.transition().duration(5000).attr("r", d => sizeScale(d.mismanaged_pw_capita)); // Nodes nodes.transition().delay((d, i) => i * (Math.random() * 5)).duration(Math.random() * 500).ease(d3.easeLinear).attr('transform', function(d) { return `translate(${xScaleScatter(d.GDP_per_capita)},${yScaleScatter(d.pw_total)})`}).transition().attr('opacity', 0) // hide river_group.transition().attr('opacity', 0) areas.transition().attr('opacity', 0) countries_bar.transition().attr('opacity', 0) } else if (type == 7) { simulation.stop() nodes.transition() .duration(800) .attr('r', node_radius) .attr('opacity', 0) .attr('transform', d => `translate(${Math.random() * width_c},${0})`).attr('fill', "gray") river_group.transition().attr('opacity', 1) // hide scatter_group.transition().attr('opacity', 0) countries_bar.transition().attr('opacity', 0) areas.transition().attr('opacity', 0) circleScatter.transition().duration(800).attr("r",0); } else if (type == 8) { // Nodes simulation.stop() nodes.transition().duration(800) .attr('opacity', 1) .attr('transform', d => `translate(${d.x_grid},${d.y_grid})`).attr('fill', "red") .transition().delay((d, i) => i * (Math.random() * 30)).duration(Math.random() * 1500) .attr('transform', d => `translate(${d.x_grid},${width_c})`).attr('opacity', 0) // hide river_group.transition().attr('opacity', 0) scatter_X_axis.transition().attr('opacity', 0) scatter_Y_axis.transition().attr('opacity', 0) countries_bar.transition().attr('opacity', 0) scatterText.transition().attr('opacity', 0) areas.transition().attr('opacity', 0) // hide scatter_group.transition().attr('opacity', 0) circleScatter.transition().duration(800).attr("r",0); } } }) }34:T54c,## Solutions to Sachet and Plastic mismanagement ### What can Consumers do? I do not want to pass the blame on the consumers for the never ending mismanagement of plastic waste. However, most Filipinos are burdened with challenging lives, and not much thought goes into where the trash goes. If the production of sachet is unavoidable and it is difficult to pass laws that can control/limit the production of sachets. I believe the next best thing is to promote or create programs that buy back this plastic waste from consumers. Several cities in the Philippines like Quezon City have started a program called [trash to cashback](https://quezoncity.gov.ph/faqs/faq-trash-to-cashback-program/#:~:text=The%20Trash%20to%20Cashback%20Program%2C%20which%20was%20launched%20by%20the,diversion%20program%20of%20the%20city.). I believe in these programs, and they deserve more attention. ### The Purpose of the Visualization Use visualizations like these to create impactful data stories that highlight our dilemma with plastic mismanagement and push people to local or government programs that handle sachets. Create visibility on the issue and follow up with incentive such as the Trash to cashback program here in the Philippines. If we cannot recycle and cannot stop using Single use plastics, we need to at least stop them from getting into our oceans.35:T5d2,style = html` `36:Te82,slide_descriptions = [ {'id':1, titleSlide:"Plastic Oceans", titleDescription: "The growing mismanaged plastic waste in Asia", descriptionBox:"Goal of the Visualization is to highlight the issue of mismanaged plastic pouring into the ocean."}, {'id':2, titleSlide:"Over 970,000 Tons of Plastic are in our oceans each year", titleDescription: "", descriptionBox:"Plastic leaves a poisonous legacy on our oceans, as it breaks down it releases powerful green house gasses. But aside from direct emission of plastic onto the environment, they also produce the issue of microplastics. Recent studies have suggested adverse effects on plankton to produce oxygen."}, {'id':3, titleSlide:"80% of the plastic in the ocean comes from Asia", titleDescription: "", descriptionBox:"A large contributing factor for this phenomenon in Asia is due to the popularity of Sachet's in most Asian Countries, especially South East Asian Nations. Sachet's are small plastic pouches that carry different sorts of product. These plastics fundamentally break the circular economy of recycling and without proper waste managment system, sachet's have a high chance of ending up in the ocean."}, {'id':4, titleSlide:"", titleDescription: "South East Asian Nations have the largest share of plastic in the ocean.", descriptionBox:"Most ASEAN countries are emerging economies with densly populated areas living near shorelines, contributing to the plastic emission."}, {'id':5, titleSlide:"Indonesia, Philippines, Malaysia, Vietnam and Thailand contribute 54% of plastic emission dumped into the ocean", titleDescription: "", descriptionBox:"These countries have high density populations living close to either coastlines or inland waterways. These factors, combined with high rainfall, further increases the probability for mismanaged plastic waste."}, {'id':6, titleSlide:"Philippines alone is responsible for 1/3 of the mismanaged plastic in the ocean", titleDescription: "", descriptionBox:"Sachet's (single use plastics) account for roughly 50% of the plastic waste emission in the Philippines. Sachet's are created for the purpose of helping low-income communities in these countries but have a terrible plastic waste debt for countries with underdeveloped waste managment systems."}, {'id':7, titleSlide:"", titleDescription: "Southeast Asia’s plastic mismanagment issues does not just come from coastlines, population size or income", descriptionBox:"Despite lower population and purchasing power, countries like Philippines and Malaysia still emit more plastic than China, USA or Japan. This problem stems from rapid growth that these Asean countries have made, and waste managment have not developed enough to handle these growing economies"}, {'id':8, titleSlide:"80% of mismanaged ocean plastic emission comes from Rivers", titleDescription: "Top 50 rivers generating plastic to the ocean", descriptionBox:"7 out of the top 10 rivers emitting plastic into the ocean belong to the Philippines. The combination of rapid urbanization in cities like Manila and close proximity to several rivers have led these rivers to produce the most plastic waste emission."}, { 'id':9, titleSlide:"Create Awarness and Incetivize", titleDescription: "Just a 5% improvement in mismanaged plastic waste handling in the Philippines is as effective as clearing out ocean plastic emission from 87 other countries", descriptionBox:"Waste programs must be started that makes recycling accessible and also incentize the lower income households through either cash or credits. Programs like trash to cashback in the philippines and bank sampah in india are programs working with this idea." } ]37:T439,nodes_data = { // convert raw data to nodes const nodes = [] const count_dict = {} plastic_dataset.forEach(v => { for (let i = 0; i < Math.floor(v.mismanaged_pw_total/1000); i++) { count_dict[v.Entity] = (count_dict[v.Entity] || 0) + 1; let projected_latlong = projection([parseFloat(v.long), parseFloat(v.lat)]) nodes.push({...v, count: count_dict[v.Entity]}) } }) // calculate grid positions const cols = 50 const rows = 19 let box_size = width_c / 2 let box_height = height / 2 // add a grid scale const calc_grid_pos = (i, nc, nr) => { const cs = (box_height) / nc const rs = (box_size) / nr return {y: (Math.floor(i/nr) * cs) + ((height/4)), x: rs * (i % nr) + (((width_c) / 2) - box_size/2)} } return nodes.sort((a,b) => b.mismanaged_pw_total - a.mismanaged_pw_total).map((v, i) => { const result = calc_grid_pos(i, rows, cols) let t = projection([parseFloat(v.long), parseFloat(v.lat)]) return ( {...v, x_grid: result.x, y_grid: result.y, x_map:t[0], y_map:t[1]} ) }) }38:[{"id":"d855cea6a993de072b0cc5b59224bf9f5aeead886a8e04538e0198bbc9b7de68a89de98d2f617274160b52ef072cbc39de37e9b42de58490f4d135319c3c2651","href":"https://static.observableusercontent.com/files/d855cea6a993de072b0cc5b59224bf9f5aeead886a8e04538e0198bbc9b7de68a89de98d2f617274160b52ef072cbc39de37e9b42de58490f4d135319c3c2651","name":"phl_regions2.geojson","type":"application/geo+json","lastModified":1669022027855.729,"size":369397},{"id":"d919871dc6ce3bc0631bd2a8606ac21e57158fcd2ba592ed276ff87c34b5fe778cc8c2ca241c8afde87e94edb97cc1a1bc185ee28a06eac2808fe1fca331e1ef","href":"https://static.observableusercontent.com/files/d919871dc6ce3bc0631bd2a8606ac21e57158fcd2ba592ed276ff87c34b5fe778cc8c2ca241c8afde87e94edb97cc1a1bc185ee28a06eac2808fe1fca331e1ef","name":"plastics-top-rivers (1).csv","type":"text/csv","lastModified":1669022027855.729,"size":2086},{"id":"375e500d8b608090f6bea50b60634df257b23002dfcd3c05f6c9826d43a17ec3be9e141f89547e29c7d9e77c9729a271216c388e44587a592eba7cc7ed7517ff","href":"https://static.observableusercontent.com/files/375e500d8b608090f6bea50b60634df257b23002dfcd3c05f6c9826d43a17ec3be9e141f89547e29c7d9e77c9729a271216c388e44587a592eba7cc7ed7517ff","name":"world.geojson (2).json","type":"application/json","lastModified":1669022027855.729,"size":953403},{"id":"81c0278531eb25f79dc8ba743e288def6912996a8ba9e458f1c161aa0998edf5233ca010b4ea3b09ab0b58c0c49022c833e04f380187ba1a62c899b1a30b0749","href":"https://static.observableusercontent.com/files/81c0278531eb25f79dc8ba743e288def6912996a8ba9e458f1c161aa0998edf5233ca010b4ea3b09ab0b58c0c49022c833e04f380187ba1a62c899b1a30b0749","name":"plastic_dataset@2.csv","type":"text/csv","lastModified":1669162549571.642,"size":4383}] 30:{"title":"Plastic Oceans -The growing mismanaged plastic waste in Asia","cells":[{"id":0,"value":"# Plastic Oceans -The growing mismanaged plastic waste in Asia","pinned":false,"hidden":false,"mode":"md"},{"id":4385,"value":"### Previous version of the [visualization](https://observablehq.com/@ryanliwag/philippines-and-the-sachet-economy)","pinned":false,"hidden":false,"mode":"md"},{"id":4277,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":4134,"value":"// slide step\nmutable type = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":3587,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":4281,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":4241,"value":"fpsMeter()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3274,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"### Helper Functions","pinned":false,"hidden":false,"mode":"md"},{"id":4237,"value":"fpsMeter = () => {\n const stats = new Stats();\n stats.showPanel(0);\n stats.dom.style.position = 'static';\n\n let running = true;\n requestAnimationFrame(function animate() {\n stats.update();\n \n if (running) {\n requestAnimationFrame(animate);\n }\n });\n \n invalidation.then(() => {\n running = false;\n });\n \n return stats.dom;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2780,"value":"viz.morph(type)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4171,"value":"projection = d3.geoEquirectangular().fitSize([width_c, height], mapGeoJson)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4176,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .attr('class', 'tooltip')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4230,"value":"// button controls\n{\n d3.select('#next-slide').on('click', () => {\n if (type <= 7) {\n mutable type += 1\n var objDiv = document.getElementById('annotation-sec')\n objDiv.scrollTo({top: objDiv.scrollTop + width*0.6, behavior:'smooth'})\n } \n })\n d3.select('#prev-slide').on('click', () => {\n if (type >= 0) {\n mutable type -= 1\n var objDiv = document.getElementById('annotation-sec')\n\n objDiv.scrollTo({top: objDiv.scrollTop - width*0.6, behavior:'smooth'})\n }\n })\n d3.select('#reset').on('click', () => {\n mutable type = 0\n var objDiv = document.getElementById('annotation-sec')\n \n objDiv.scrollTo({top:0, behavior:'smooth'})\n })\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4156,"value":"#### d3 scale functions","pinned":false,"hidden":false,"mode":"md"},{"id":3844,"value":"circleLegend = legendCircle()\n .scale(sizeScale)\n .tickValues([0.5, 2, 4])\n .tickFormat((d, i, e) => `${d.toFixed(2)} kg of ocean plastic waste per Capita`)\n .tickSize(2); // defaults to 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":4179,"value":"x_count = d3.scaleLinear().domain([0, 380]).range([height - (height/4), 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":4159,"value":"scatterXAxis = g => g.call(d3.axisTop(xScaleScatter))\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":4161,"value":"scatterYAxis = g => g.call(d3.axisLeft(yScaleScatter))","pinned":true,"hidden":false,"mode":"ojs"},{"id":4189,"value":"y_countries = d3.scaleBand().domain(nodes_data.sort((a,b) => a.mismanaged_pw_total - b.mismanaged_pw_total).map(v => v.Entity)).range([width_c - margin.left - margin.right, 0])\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4191,"value":"\nyAxisCountries = g => g\n .call(d3.axisBottom(y_countries))\n .call(g => g.select('.domain').remove())\n.call(g => g.selectAll('.tick line').remove())\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4193,"value":"sizeScale = d3.scaleLinear().domain([0, 4.5]).range([5,50])","pinned":false,"hidden":false,"mode":"ojs"},{"id":4210,"value":"xScaleScatter = d3.scaleSqrt().domain([1, 80000]).range([margin.left, width_c - margin.right])\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":4212,"value":"yScaleScatter = d3.scaleLog().domain([31300, 70079741]).range([height-(height/5), 10])\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":4214,"value":"xAxisAllRivers = g => g.call(d3.axisBottom(x_all_rivers)).call(g => g.select('.domain').remove()).call(g => g.selectAll('line').remove())\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":4216,"value":"yAxisAllRivers = g => g.call(d3.axisLeft(y_all_rivers).tickFormat(d => `${d} %`).ticks(5)).call(g => g.select('.domain').remove())\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":4218,"value":"x_all_rivers = d3.scaleBand().domain(all_rivers_plastic1.map(v => v.Entity)).range([margin.left, width_c-margin.right])\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":4220,"value":"y_all_rivers = d3.scaleLinear().domain([0, 7]).range([height-(height/3), margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":4151,"value":"#### Template Literal Function","pinned":false,"hidden":false,"mode":"md"},{"id":4196,"value":"desc_output = (title, description, title2, description2) => {\n return `

'+title+'

'+description+'

'+title2+'

'+description2+'

`\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4198,"value":"template_literal_output = (title, description, description2) => {\n return `

${title}

${description}

${description2}

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4228,"value":"viz_descriptions = {\n let html_output = ''\n slide_descriptions.forEach(v => {\n html_output = html_output.concat(template_literal_output(v.titleSlide, v.titleDescription, v.descriptionBox))\n })\n return html_output\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3641,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"### Graph Parameters","pinned":false,"hidden":false,"mode":"md"},{"id":4144,"value":"node_radius = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":4142,"value":"width_c = 1100","pinned":false,"hidden":false,"mode":"ojs"},{"id":4140,"value":"height = width_c * 0.6","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"margin = ({top:80, bottom:5, left:60, right:60})","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"#### Import Data","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"mapGeoJson = FileAttachment(\"world.geojson (2).json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2376,"value":"phl_regions = FileAttachment(\"phl_regions2.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2365,"value":"all_rivers_plastic = FileAttachment(\"plastics-top-rivers (1).csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2368,"value":"all_rivers_plastic1 = {\n let temp_arr = all_rivers_plastic.sort((a, b) => b[\"Share of global plastics emitted to ocean\"] - a[\"Share of global plastics emitted to ocean\"]).slice(0,50)\n\n temp_arr = temp_arr.map(v => {\n if (v.Entity.includes('Philippines')) {\n return {...v, 'ph':1}\n } else {\n return {...v, 'ph': 0}\n \n }\n })\n return temp_arr\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2956,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":4444,"value":"function generateArrow(x1, y1, x2, y2, flangeSize, padding1, padding2) {\n const dx = x2 - x1;\n const dy = y2 - y1;\n const length = Math.sqrt(dx * dx + dy * dy);\n\n let multiplier1 = padding1 / length;\n const dx1 = dx * multiplier1;\n const dy1 = dy * multiplier1;\n\n let multiplier2 = padding2 / length;\n const dx2 = dx * multiplier2;\n const dy2 = dy * multiplier2;\n\n var px = y1 - y2;\n var py = x2 - x1;\n let plength = Math.sqrt(px * px + py * py);\n let pmultiplier = flangeSize / plength;\n\n const px1 = px * pmultiplier;\n const py1 = py * pmultiplier;\n\n const sx = dx * pmultiplier;\n const sy = dy * pmultiplier;\n\n const a1 = x1 + dx1;\n const b1 = y1 + dy1;\n const a2 = x2 - dx2;\n const b2 = y2 - dy2;\n\n return `\n M${a1}, ${b1}\n L${a2}, ${b2}\n M${a2 + px1 - sx}, ${b2 + py1 - sy}\n L${a2}, ${b2}\n L${a2 - px1 - sx}, ${b2 - py1 -sy}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2379,"value":"#### Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":4223,"value":"import { legendCircle } from \"@harrystevens/circle-legend\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":4239,"value":"Stats = require('stats.js@0.17.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1740,"value":"### Notes\nThe environmental group GAIA studied non-recyclable waste collected in Philippine cleanups and found that 60 percent of it came from just 10 companies, led by Nestle NESN.S, Unilever ULVR.L and Procter & Gamble PG.N.\n\nhttps://www.no-burn.org/sachets-fuel-plastic-waste-crisis-in-the-philippines/\n\n52% of residual plastic waste stream. 164M sachets are used per day.\n\nand roughly 52% of all plastic waste from the philippines are from sachet. Philippines contributes 36% of all mismanaged plastic waste.","pinned":false,"hidden":false,"mode":"md"},{"id":3524,"value":"plastic_dataset = await FileAttachment(\"plastic_dataset@2.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}