2c:null 2d:["$","title",null,{"children":"Finalist, Team Viz - Philippines - Plastic Waste and its Sachet Economy | Ryan Joshua Liwag | Observable"}] 32:T515,## Summary Entry 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's. 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 exchanges garbage for cash. ## 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 separate's Sachet from other plastic products, is that 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:T54b,

Visualization Control

34:T346d,visualization = { // → ← const svg = d3.create('svg').attr('viewBox', [0,0,width, height]).style('background', "#333333") const wrapper = svg.append('g').attr("transform", `translate(${margin.left},${margin.top})`) 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') const yAxis_countries = wrapper.append("g").attr('transform', `translate(${0}, ${innerHeight - 75})`).call(xAxisCountries).selectAll("text") .style("text-anchor", "end").attr('opacity', 0).attr("dy", "-1.5em").attr('dx','-2em') .attr("transform", "rotate(-70)"); // step 1 Description const step1description = svg.append('g').attr("transform", `translate(${width/2},${height/2})`).attr('opacity',0) step1description.append('text').attr('class', "text-color-header").text('Philippines and the Sachet Economy').attr('y', 0) // step 2 Description const step2description = wrapper.append('g').attr("transform", `translate(${(innerWidth/2) + innerWidth/4},${innerHeight/2})`) // move to 50 const s2 = step2description.append('text') s2.append('tspan').attr('class', "text-color-header").text('979,458 tons').attr('x', 0) .attr('dy', 5) s2.append('tspan').attr('class', "text-color").text('of mismanaged plastic waste emitted to the ocean each year').attr('x', 0) .attr('dy', "2em") const node_desc = step2description.append('g').attr('transform', `translate(${0}, ${60})`) node_desc.append("text").attr('y', 20).attr('class', 'text-color').text('Each node is equal to 1000 Tons of Plastic') // step 3 Description const step3description = wrapper.append('g').attr("transform", `translate(${innerWidth/2},${220})`) const s3 = step3description.append('text').attr('class', "text-color").style('font-size', "3.5em").text('80%').append('tspan').attr('class', "text-color").text(" of all mismamanged plastic waste come from asia") // step 4 Description const step4description = wrapper.append('g').attr("transform", `translate(${innerWidth/2},${220})`).attr('opacity', 0) const s4 = step4description.append('text').attr('class', "text-color normal").text("Philippines owns more than") s4.append('tspan').attr('class', "text-color red").style('font-size', "3.5em").text(' 50%') step4description.append('text').attr('y', 40).attr('class', "text-color normal").text("of emitted plastic waste in Asia") // with 3.3kg per Capita, philippines contributes more plastic waste than next 4 countries on the list. // step 5 description const step5description = wrapper.append('g').attr("transform", `translate(${innerWidth/2},${320})`).attr('opacity', 0) const s5 = step5description.append('text').attr('class', "text-color").text("At 3.3kg per Capita, Philippines contributes more than the next 3 countries in the list") // step 6 description const step6description = wrapper.append('g').attr("transform", `translate(${innerWidth/2},${420})`).attr('opacity', 1) const s6 = step6description.append('text').attr('class', "text-color amber").text("Sachet's") s6.append('tspan').attr('class', "text-color normal").text(' account for ').append('tspan').attr('class', "text-color amber").style('font-size', "3em").text('52%') step6description.append('text').attr('y', 50).append('tspan').attr('class', "text-color normal").text(' of plastic emission for the philippines') const nodes = wrapper.selectAll('circle').data(nodesData1).join('circle').attr('r', node_radius).attr('fill', 'whitesmoke').attr('stroke', 'black').attr('stroke-width', 0.2) // // init simulation const simulation = d3.forceSimulation(); simulation.nodes(nodesData1); simulation.force('charge', d3.forceManyBody().strength(0)) .force('collision', d3.forceCollide().radius(d => node_radius+0.5).iterations(10)) // step animations return Object.assign(svg.node(), { morph(type) { console.log(type) if (type == 0) { simulation.stop() // hide d3.select('.annotations-class').transition().duration(1000).attr('opacity', 1) areas.transition().duration(200).attr('opacity', 0) nodes.transition().duration(800).attr('r', 0).attr('transform', d => `translate(${Math.random() * innerWidth},${0})`) step2description.transition().duration(800).attr('opacity', 0) step3description.transition().duration(800).attr('opacity', 0) step4description.transition().duration(300).attr('opacity', 0) step5description.transition().duration(300).attr('opacity', 0) step6description.transition().duration(300).attr('opacity', 0) yAxis_countries.attr('opacity', 0) // show step1description.transition().duration(800).attr('opacity', 1) } else if (type == 1) { // hide d3.select('.annotations-class').transition().duration(1000).attr('opacity', 0) areas.transition().duration(200).attr('opacity', 0) step1description.transition().duration(800).attr('opacity', 0) step3description.transition().duration(800).attr('opacity', 0) step4description.transition().duration(300).attr('opacity', 0) step5description.transition().duration(300).attr('opacity', 0) step6description.transition().duration(300).attr('opacity', 0) yAxis_countries.attr('opacity', 0) //show simulation.stop() nodes.transition().duration(1500).attr('transform', d => `translate(${d.x_grid},${d.y_grid})`).attr('r',6).attr('fill', 'whitesmoke') step2description.transition().duration(800).attr('opacity', 1).attr("transform", `translate(${(innerWidth/2) + innerWidth/4},${innerHeight/2})`) } else if (type == 2) { // hide d3.select('.annotations-class').transition().duration(1000).attr('opacity', 0) step1description.transition().duration(800).attr('opacity', 0) step3description.transition().duration(800).attr('opacity', 0) step4description.transition().duration(300).attr('opacity', 0) step5description.transition().duration(300).attr('opacity', 0) step6description.transition().duration(300).attr('opacity', 0) yAxis_countries.attr('opacity', 0) // show step3description.transition().duration(800).attr('opacity', 1) step2description.transition().duration(800).attr('opacity', 1).attr("transform", `translate(${(innerWidth/2)},${50})`) areas.transition().duration(400).attr('opacity', 0.4) nodes.attr('r',node_radius).attr('fill', 'whitesmoke') 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})`})}) simulation.alpha(1).alphaDecay(0.05).velocityDecay(0.36).restart() } else if (type == 3) { //hide d3.select('.annotations-class').transition().duration(1000).attr('opacity', 0) step1description.transition().duration(800).attr('opacity', 0) step3description.transition().duration(800).attr('opacity', 0) step5description.transition().duration(300).attr('opacity', 0) step6description.transition().duration(300).attr('opacity', 0) yAxis_countries.attr('opacity', 0) // show step4description.transition().duration(800).attr('opacity', 1).attr("transform", `translate(${(innerWidth/2)},${200})`) step2description.transition().duration(800).attr('opacity', 1).attr("transform", `translate(${(innerWidth/2)},${50})`) simulation.force('y', d3.forceY().y(d => d.y_map)).force('x', d3.forceX().x(d => d.x_map)) .force('collision', d3.forceCollide().radius(d => node_radius+0.5).iterations(10)) nodes.attr('r',node_radius).attr('fill', d => { if (d.country_code == "PHL") { return 'red' } else { return 'whitesmoke' }}) simulation.force('y', d3.forceY().y(d => d.y_map)).force('x', d3.forceX().x(d => d.x_map)) areas.transition().duration(400).attr('opacity', 0.4) nodes.attr('r',node_radius) simulation.on('tick', () => { nodes.transition().duration(700).ease(d3.easeLinear).attr('transform', function(d) { return `translate(${d.x},${ d.y})`})}) simulation.alpha(1).alphaDecay(0.05).velocityDecay(0.36).restart() } else if (type == 4) { //hide d3.select('.annotations-class').transition().duration(1000).attr('opacity', 0) step1description.transition().duration(800).attr('opacity', 0) step3description.transition().duration(800).attr('opacity', 0) step5description.transition().duration(300).attr('opacity', 0) step6description.transition().duration(300).attr('opacity', 0) areas.transition().duration(200).attr('opacity', 0) simulation.stop() step4description.transition().duration(800).attr('opacity', 1).attr("transform", `translate(${(innerWidth/2)},${200})`) step2description.transition().duration(800).attr('opacity', 1).attr("transform", `translate(${(innerWidth/2)},${50})`) step5description.transition().duration(800).attr('opacity', 1) nodes.attr('r',node_radius).attr('fill', d => { if (d.country_code == "PHL") { return 'red' } else { return 'whitesmoke' }}) yAxis_countries.attr('opacity', 1) simulation.force('y', d3.forceX().x(d => x_countries(d.country)).strength(4)) .force('x', d3.forceY().y(d => y_count(d.count)).strength(1)) simulation.restart() simulation.on('tick', () => { nodes.transition().duration(800).ease(d3.easeLinear).attr('transform', function(d) { return `translate(${d.x},${ d.y})`})}) simulation.alpha(1).alphaDecay(0.1).velocityDecay(0.36).restart() } else if (type == 5) { d3.select('.annotations-class').transition().duration(1000).attr('opacity', 0) // show map areas.transition().duration(200).attr('opacity', 0) step4description.transition().duration(800).attr('opacity', 1).attr("transform", `translate(${(innerWidth/2)},${200})`) step5description.transition().duration(800).attr('opacity', 1) step6description.transition().duration(300).attr('opacity', 1).attr("transform", `translate(${(innerWidth/2)},${430})`) step2description.transition().duration(800).attr('opacity', 1).attr("transform", `translate(${(innerWidth/2)},${50})`) yAxis_countries.attr('opacity', 1) nodes.attr('r',node_radius).attr('fill', d => { if (d.country_code == "PHL") { if (d.count <= count_sachet) { return '#ffbf00' } else { return 'red' } } else { return 'whitesmoke' }}) simulation.stop() simulation.force('y', d3.forceX().x(d => x_countries(d.country)).strength(1)) .force('x', d3.forceY().y(d => y_count(d.count)).strength(0.5)) simulation.restart() simulation.on('tick', () => { nodes.transition().duration(800).ease(d3.easeLinear).attr('transform', function(d) { return `translate(${d.x},${ d.y})`})}) simulation.alpha(1).alphaDecay(0.1).velocityDecay(0.36).restart() } else if (type == 6) { // hide d3.select('.annotations-class').transition().duration(1000).attr('opacity', 0) step1description.transition().duration(800).attr('opacity', 0) step3description.transition().duration(800).attr('opacity', 0) step4description.transition().duration(800).attr('opacity', 0) step5description.transition().duration(300).attr('opacity', 0) step6description.transition().duration(300).attr('opacity', 0) areas.transition().duration(200).attr('opacity', 0) yAxis_countries.attr('opacity', 0) // show step2description.transition().duration(800).attr('opacity', 1).attr("transform", `translate(${(innerWidth/2) + innerWidth/4},${50})`) step4description.transition().duration(300).attr('opacity', 1).attr("transform", `translate(${(innerWidth/2) + innerWidth/4},${330})`) step6description.transition().duration(300).attr('opacity', 1).attr("transform", `translate(${(innerWidth/2) + innerWidth/4},${530})`) d3.select('.annotations-class').transition().duration(1000).attr('opacity', 0) areas.transition().duration(200).attr('opacity', 0) nodes.attr('r',node_radius).attr('fill', d => { if (d.country_code == "PHL") { if (d.count <= count_sachet) { return '#ffbf00' } else { return 'red' } } else { return 'whitesmoke' }}) simulation.stop() nodes.transition().duration(1600).attr('transform', d => `translate(${d.x_grid},${d.y_grid})`).attr('r',6) } // #ffbf00 return 'Morphing!'; } }); }35:Tc37,{ const svg = d3.create('svg').attr('viewBox', [0,0,width_2, height_2]).style('background', "#333333") const wrapper = svg.append('g').attr("transform", `translate(${margin.left},${margin.top})`) const innerHeight2 = innerHeight_2 - 150 const x_all_rivers = d3.scaleBand().domain(all_rivers_plastic1.map(v => v.Entity)).range([0, innerWidth_2]) const y_all_rivers = d3.scaleLinear().domain([0, 7]).range([innerHeight2, 0]) const yAxisAllRivers = g => g.call(d3.axisLeft(y_all_rivers).tickFormat(d => `${d} %`).ticks(5)) const xAxisAllRivers = g => g.call(d3.axisTop(x_all_rivers)) const xAxisGroup = wrapper.append('g') .attr('transform', `translate(${0}, ${innerHeight2+10})`).call(xAxisAllRivers).selectAll("text").style("text-anchor", "end").attr('fill', 'white').attr("transform", "rotate(-90)") // .data(ph_rivers_plastic).join('text') // .attr("x", v => y_plastic_rivers(0) - y_plastic_rivers(v["Share of global plastics emitted to ocean"]) - 10) // const bar = wrapper.append('g').attr('transform', `translate(${-8}, ${(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" : "white") // i => yScale(0) - yScale(Y[i]) const yAxisGroup = wrapper.append('g') .attr('transform', `translate(${-10}, ${0})`).call(yAxisAllRivers) .call(g => g.append('text') .attr('opacity', 0.8) .attr('x', -15) .attr('y', -20) .attr('font-weight', 'bold') .attr('font-size', "0.50rem") .attr('fill', 'white') .attr('text-anchor', 'start') .text('% of Plastic Emission Contribution')) const description = wrapper.append('g').attr("transform", `translate(${innerWidth_2/2},${50})`).attr('opacity', 1) const desc = description.append('text').attr('class', "text-color normal").style('font-size', "1.3em").text("Top 50 Share of ocean plastics that come from the largest emitting rivers") description.append('text').attr('y', 20).attr('class', "text-color normal").style('font-size', "0.875em").text('roughly 80% of worlds plastic emission come from rivers') wrapper.append('g').attr("transform", `translate(${innerWidth_2/2},${innerHeight2/2})`).attr('opacity', 1).append('text').attr('class', "text-color red").style('font-size', "1.4em").text("7 out of the Top 10 Rivers belong the Philippines").style("text-anchor", "middle") return svg.node() }36:T1915,{ const svg = d3.create('svg').attr('viewBox', [0,0,width_2, height_2]).style('background', "#333333") const wrapper = svg.append('g').attr("transform", `translate(${margin.left},${margin.top})`) let geoGenerator = d3.geoPath().projection(projection_2) let regions = wrapper.selectAll('region').data(phl_regions.features) let areas = regions.enter().append("path") .attr("class", "areas").attr("d", d => geoGenerator(d)) .attr('opacity', 0.6).attr("fill", 'gray') .attr('transform', `translate(${innerWidth_2/2}, ${-50})`) // .attr("fill", d => color_scale(d.properties.Population)) // d3.select(target) // .append("g") // .attr("class", "annotation-group") // .call(annotations) const labelAnnotations = [ { id: "valley-of-uncertainty", note: { label: "High Density Area (NCR)", }, color: "white", // Brighter color to make this annotation stand out x:(innerWidth_2/2) + 195, y: 205, dx: 60, dy: -200, subject: { radius: 30, radiusPadding: 5 }, type: d3.annotationCalloutCircle // This annotation refers to an area rather than a point }, ] const makeAnnotations = d3_annotation .annotation() .type(d3_annotation.annotationCalloutCircle) .annotations(labelAnnotations); let river_nodes = wrapper.selectAll('g') .data(ph_rivers_plastic).join('g') .attr('transform', `translate(${innerWidth_2/2}, ${-50})`) let river_circle = river_nodes.append('circle').attr("r",5) .attr('fill', 'gray').attr('opacity', 0.3) .attr('stroke', 'black') .attr("transform", function(d) {return "translate(" + projection_2([d.long,d.lat]) + ")";}) const xAxisGroup = wrapper.append('g') .attr('transform', `translate(${-25}, ${innerHeight_2/2})`).call(xAxisRivers) .selectAll("text").data(ph_rivers_plastic).join('text') .attr("x", v => y_plastic_rivers(0) - y_plastic_rivers(v["Share of global plastics emitted to ocean"]) - 10) .style("text-anchor", "end").attr("transform", "rotate(-90)").on("mouseover", (event, val) => mouseover_animation(val)) const yAxisGroup = wrapper.append('g') .attr('transform', `translate(${-10}, ${innerHeight_2/2})`).call(yAxisRivers) .call(g => g.append('text') .attr('opacity', 0.8) .attr('x', -15) .attr('y', innerHeight_2/2) .attr('font-weight', 'bold') .attr('font-size', "0.50rem") .attr('fill', 'white') .attr('text-anchor', 'start') .text('% of Emission Contribution')) const paths = wrapper.insert("g", "*") .attr("fill", "none") .attr("stroke-opacity", 1) .attr("stroke-width", 1.5) .selectAll("path") .data(ph_rivers_plastic) .join("path") .attr('stroke', 'white') .attr('opacity', 0.1) .attr("d", v => create_bezier_arc(v, innerWidth_2/2, - 50)) const bar = wrapper.append('g').attr('transform', `translate(${-8}, ${(innerHeight_2/2)})`).selectAll('rect').data(ph_rivers_plastic).join('rect') .attr('y', 0) .attr('x', v => x_plastic_rivers(v.river)) .attr('height', v => y_plastic_rivers(v["Share of global plastics emitted to ocean"]) - y_plastic_rivers(0)) .attr('width', x_plastic_rivers.bandwidth()-6) .attr('fill', "white").on("mouseover", (event, val) => mouseover_animation(val)) const mouseover_animation = (val) => { console.log(val) let length = paths.filter(v => v.river == val.river).node().getTotalLength() paths.filter(v => v.river == val.river).attr("stroke-dasharray", length + " " + length) .attr("stroke-dashoffset", length) .transition() .ease(d3.easeLinear) .attr("opacity", 1) .attr('stroke', 'red') .attr("stroke-dashoffset", 0) .duration(800) paths.filter(v => v.river != val.river) .transition() .ease(d3.easeLinear) .attr("opacity", 0.1) .attr('stroke', 'white') .attr("stroke-dashoffset", 0) .duration(300) bar.filter(v => v.river == val.river).transition().duration(800) .attr('fill', 'red') bar.filter(v => v.river != val.river).transition().duration(300) .attr('fill', 'white') river_circle.filter(v => v.river == val.river).transition().delay(800).duration(200) .attr('fill', 'red').attr('opacity', 1) river_circle.filter(v => v.river != val.river).transition().duration(300) .attr('fill', 'gray').attr('opacity', 0.3) } // starting red animation mouseover_animation(ph_rivers_plastic.filter(v => v.river == 'Pasig')[0]) // Desciprtions and Annotations const description = wrapper.append('g').attr("transform", `translate(${innerWidth_2/2},${innerHeight_2 - (innerHeight_2/7) })`).attr('opacity', 1) const desc = description.append('text').attr('class', "text-color normal").style('font-size', "1em").text("Pasig river has the highest share of ocean plastic emission at") desc.append('tspan').attr('class', "text-color red").style('font-size', "2em").text(' 6.7%') const description2 = wrapper.append('g').attr("transform", `translate(${margin.left},${(innerHeight_2/2) -20 })`).attr('opacity', 1).append('text').attr('class', "text-color normal").style('font-size', "1em").text("Hover over bars and text to highlight").style("text-anchor", "start") wrapper .append("g") .attr("class", "annotation-group") .call(makeAnnotations); return svg.node() }37:Tc17,## Solutions to Sachet and Plastic mismanagement The issue with sachets are not just prevalent in the Philippines but are also in countries like India, Srilanka, Indonesia, etc. ### Circular Economy? Currently creating a circular economy for plastic is a pipe dream atleast for the philippines. There is a high-cost attached to the recycling of plastic with high electricity price and logistic costs. Read world bank [study](https://www.worldbank.org/en/country/philippines/publication/market-study-for-philippines-plastics-circularity-opportunities-and-barriers-report-landing-page#:~:text=Several%20structural%20challenges%20cause%20a,operate%20with%20low%2Defficiency%20equipment.) highlighting the issues preventing circular economy. ### Legislation Several solutions have been passed to address the philippines problems with sachets. In the Philippines we have [RA9003](https://www.officialgazette.gov.ph/2001/01/26/republic-act-no-9003-s-2001/), which is a law that tells companies that they are responsible for their own waste, however nothing is specifically stated for sachets. ### Corporate Responsibility Most corporations have entertained the idea of phasing out the production of sachets and, most acknowledge its effect on the environment. Corporations like Unilever are working on creating biodegradable materials and trying to help build the infrastructure for waste management. [But ultimately their stance on plastic sachet are that it gives opportunity to low income households to afford their products](https://www.unilever.com/news/news-search/2022/why-do-you-continue-to-sell-plastic-sachets/). It is prevalent in my country because sachets are the cheaper alternatives. Although cheaper for the individual, sachets are very difficult to recycle and would cost the country more down the line. ### What can Consumers do? I do not want to pass the blame on the consumers for the never ending mismanagement of plastic waste. But most Filipinos are burdened with hard 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 need more visibility ### The Purpose of the Visualization Use visualizations like these to create impactful stories that highlight our dilemma with sachets and push them 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.38:[{"id":"81c0278531eb25f79dc8ba743e288def6912996a8ba9e458f1c161aa0998edf5233ca010b4ea3b09ab0b58c0c49022c833e04f380187ba1a62c899b1a30b0749","href":"https://static.observableusercontent.com/files/81c0278531eb25f79dc8ba743e288def6912996a8ba9e458f1c161aa0998edf5233ca010b4ea3b09ab0b58c0c49022c833e04f380187ba1a62c899b1a30b0749","name":"plastic_dataset@2.csv","type":"text/csv","lastModified":1669387901067.414,"size":4383},{"id":"58b1ed9cd74f3f82b5445d57f7847f829c84c598ed47452810ab1e1d8cdad0ebc4897b14725d7f6acbbe38a4c6c1d30a3d4cc37ee9fef842b224603f6dcfb764","href":"https://static.observableusercontent.com/files/58b1ed9cd74f3f82b5445d57f7847f829c84c598ed47452810ab1e1d8cdad0ebc4897b14725d7f6acbbe38a4c6c1d30a3d4cc37ee9fef842b224603f6dcfb764","name":"image.png","type":"image/png","lastModified":1667895294698.004,"size":257597},{"id":"95dd630d25956a8a63e57e50b5b76d5d69f861c4f8c2ce4ea56c9911c074369c2c9ef9dc4e8b43ff5ee21b8208fc78ae9df4e650aa8a1e7da80484328d6be7b1","href":"https://static.observableusercontent.com/files/95dd630d25956a8a63e57e50b5b76d5d69f861c4f8c2ce4ea56c9911c074369c2c9ef9dc4e8b43ff5ee21b8208fc78ae9df4e650aa8a1e7da80484328d6be7b1","name":"mismanaged_plastic.csv","type":"text/csv","lastModified":1667242248978.31,"size":9693},{"id":"d855cea6a993de072b0cc5b59224bf9f5aeead886a8e04538e0198bbc9b7de68a89de98d2f617274160b52ef072cbc39de37e9b42de58490f4d135319c3c2651","href":"https://static.observableusercontent.com/files/d855cea6a993de072b0cc5b59224bf9f5aeead886a8e04538e0198bbc9b7de68a89de98d2f617274160b52ef072cbc39de37e9b42de58490f4d135319c3c2651","name":"phl_regions2.geojson","type":"application/geo+json","lastModified":1667803951334.198,"size":369397},{"id":"80391b0765b6aec0c064484bb9ff7c70ec2e30cbf1e4f175e2bef4bbe538897fd1d3edbfcd414b2c0be8e6f50e1402ddb598d6acc1df436c6a856c8611758b02","href":"https://static.observableusercontent.com/files/80391b0765b6aec0c064484bb9ff7c70ec2e30cbf1e4f175e2bef4bbe538897fd1d3edbfcd414b2c0be8e6f50e1402ddb598d6acc1df436c6a856c8611758b02","name":"ph_rivers_plastic.csv","type":"text/csv","lastModified":1667804035114.128,"size":1571},{"id":"d919871dc6ce3bc0631bd2a8606ac21e57158fcd2ba592ed276ff87c34b5fe778cc8c2ca241c8afde87e94edb97cc1a1bc185ee28a06eac2808fe1fca331e1ef","href":"https://static.observableusercontent.com/files/d919871dc6ce3bc0631bd2a8606ac21e57158fcd2ba592ed276ff87c34b5fe778cc8c2ca241c8afde87e94edb97cc1a1bc185ee28a06eac2808fe1fca331e1ef","name":"plastics-top-rivers (1).csv","type":"text/csv","lastModified":1667804176939.518,"size":2086},{"id":"375e500d8b608090f6bea50b60634df257b23002dfcd3c05f6c9826d43a17ec3be9e141f89547e29c7d9e77c9729a271216c388e44587a592eba7cc7ed7517ff","href":"https://static.observableusercontent.com/files/375e500d8b608090f6bea50b60634df257b23002dfcd3c05f6c9826d43a17ec3be9e141f89547e29c7d9e77c9729a271216c388e44587a592eba7cc7ed7517ff","name":"world.geojson (2).json","type":"application/json","lastModified":1667309791127.127,"size":953403}] 30:{"id":"5fc74deb211d980f","slug":"philippines-and-the-sachet-economy","title":"Finalist, Team Viz - Philippines - Plastic Waste and its Sachet Economy","thumbnail":"fe8295e2d0ee32eb44b1900bc87c7386a992b5db16e1c15c801c847f360fb739","access_level":"public","create_time":"$D2022-10-31T11:13:46.544Z","update_time":"$D2022-12-04T15:52:13.244Z","view_time":null,"first_public_time":"$D2022-11-04T01:14:05.124Z","has_unpublished_edits":null,"fork":false,"stars":27,"starred":false,"owner":{"type":"team","id":"c71b75bd78c412d0","login":"ryanliwag","name":"Ryan Joshua Liwag","avatar_url":"https://avatars-next.observableusercontent.com/efb265cba0e299ef07d64dfc9d6f3f4979a07886800e10f4f39d8e93fdbd132a","tier":"starter_2024"},"version":2523,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bf2b23a7f00cf7da","login":"ryanliwag","name":"Ryan Joshua Liwag","avatar_url":"https://avatars-next.observableusercontent.com/efb265cba0e299ef07d64dfc9d6f3f4979a07886800e10f4f39d8e93fdbd132a","tier":null}],"members":[{"type":"individual","id":"bf2b23a7f00cf7da","login":"ryanliwag","name":"Ryan Joshua Liwag","avatar_url":"https://avatars-next.observableusercontent.com/efb265cba0e299ef07d64dfc9d6f3f4979a07886800e10f4f39d8e93fdbd132a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":23,"collection":{"id":"c9bf110d67cdaf43","slug":"adb-visualizing-climate-change-resilience-challenge-subm","title":"ADB Visualizing Climate Change & Resilience Challenge Submissions","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"titling":"auto","title":"Finalist, Team Viz - Philippines - Plastic Waste and its Sachet Economy","cells":[{"id":0,"value":"# Finalist, Team Viz -
Philippines - Plastic Waste and its Sachet Economy","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1766,"value":"Finetuned version of this **[Visualization](https://observablehq.com/@ryanliwag/plastic-oceans-the-growing-mismanaged-plastic-waste-in-asi)**\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"### Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1718,"value":"viewof type = Inputs.range([0, 6], {step: 1, value: 0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1770,"value":"# Philippines Plastic and Sachet Contribution","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1489,"value":"$33","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1467,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1772,"value":"# Where do all of these mismanaged Plastic come from?\n\nAlmost 80 percent of ocean plastics come from land-based sources, and the remaining 20 percent from marine sources. The primary method of how land based plastics end up in the ocean are through rivers.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2136,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2309,"value":"# Which areas/rivers should we focus waste management and disposal?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1774,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1744,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1750,"value":"### sources\n\n- https://quezoncity.gov.ph/program/qc-residents-can-exchange-trash-for-food-and-groceries-through-trash-to-cashback/\n- https://ourworldindata.org/plastic-pollution#total-plastic-waste-by-country\n- https://ourworldindata.org/plastic-pollution#river-inputs-to-the-ocean\n- https://www.no-burn.org/sachets-fuel-plastic-waste-crisis-in-the-philippines/\n- https://www.worldbank.org/en/country/philippines/publication/market-study-for-philippines-plastics-circularity-opportunities-and-barriers-report-landing-page#:~:text=Several%20structural%20challenges%20cause%20a,operate%20with%20low%2Defficiency%20equipment.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"### Helper Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2079,"value":"population_data = phl_regions.features.map(d => parseInt(d.properties.Population))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2077,"value":"color_scale = d3.scaleLinear()\n .domain(d3.extent(population_data))\n .range(['gray','blue'])\n .interpolate(d3.interpolateRgb.gamma(2.2))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1888,"value":"function create_bezier_arc(d, x_offset, y_offset) {\n const x_origin = x_plastic_rivers(d.river)\n const y_origin = innerHeight_2/2\n const latlong = projection_2([d.long, d.lat])\n return `M${x_origin},${y_origin} C${x_origin},${0} ${latlong[0]+x_offset-150},${latlong[1]+y_offset-300} ${latlong[0]+x_offset} ${latlong[1]+y_offset}`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"visualization.morph(type)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1727,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1723,"value":"button_controls = {\n d3.select('#next-slide').on('click', () => {\n if (type <= 6) {\n set(viewof type, type+1)\n }\n })\n d3.select('#prev-slide').on('click', () => {\n if (type >= 0) {\n set(viewof type, type-1)\n }\n })\n d3.select('#reset').on('click', () => {\n set(viewof type, 0)\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"### Graph Parameters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1840,"value":"projection_2 = d3.geoMercator().fitSize([innerWidth_2/2, innerHeight_2], phl_regions)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1818,"value":"x_plastic_rivers = d3.scaleBand().domain(ph_rivers_plastic.sort((a,b) => b.lat - a.lat).map(v => v.river)).range([0, innerWidth_2/2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2089,"value":"yAxisRivers = g => g\n .call(d3.axisLeft(y_plastic_rivers).tickFormat(d => `${d} %`).ticks(5))\n .call(g => g.select('.domain').remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1837,"value":"innerWidth_2 = width_2 - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1835,"value":"innerHeight_2 = height_2 - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1893,"value":"xAxisRivers = g => g\n .call(d3.axisBottom(x_plastic_rivers))\n .call(g => g.select('.domain').remove())\n.call(g => g.selectAll('.tick line').remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1802,"value":"y_plastic_rivers = d3.scaleLinear().domain([0, 7]).range([0,300])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1825,"value":"width_2 = 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1827,"value":"height_2 = 800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"projection = d3.geoEquirectangular().fitSize([innerWidth, innerHeight], mapGeoJson)\n .rotate([-30,0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1712,"value":"node_radius = 3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"width = 1200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"height = 900","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"margin = ({top:100, bottom:50, left:50, right:50})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"innerHeight = height - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"innerWidth = width - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"// total mismanaged waste\ntotal_plastic = d3.sum(mismanaged_plastic.map(v => v.pw_total))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"x_countries = d3.scaleBand().domain(mismanaged_plastic.filter(d => d.pw_total > 1000).sort((a,b) => a.pw_total - b.pw_total).map(v => v.country)).range([innerWidth, 50])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1257,"value":"top_countries = {\n let countries_list = mismanaged_plastic.filter(d => d.pw_total > 1000).sort((a,b) => b.pw_total - a.pw_total).slice(0, 10).map(v => v.country) \n return countries_list\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"xAxisCountries = g => g\n .call(d3.axisBottom(x_countries))\n .call(g => g.select('.domain').remove())\n.call(g => g.selectAll('.tick line').remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"y_count = d3.scaleLinear().domain([0, 380]).range([innerHeight-75, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"count_sachet = parseInt(nodesData1.filter(v => v.country == \"Philippines\").splice(-1)[0].count * 0.52)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"#### Import Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"mapGeoJson = FileAttachment(\"world.geojson (2).json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"mismanaged_plastic = FileAttachment(\"mismanaged_plastic.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2376,"value":"phl_regions = FileAttachment(\"phl_regions2.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2371,"value":"ph_rivers_plastic = FileAttachment(\"ph_rivers_plastic.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2365,"value":"all_rivers_plastic = FileAttachment(\"plastics-top-rivers (1).csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1427,"value":"// filter out low total mismanaged waste\nnodesData = {\nconst nodesData = []\nconst count = {}\nmismanaged_plastic.forEach(v => {\n if (v.pw_total > 1000) {\n for (let i = 0; i < Math.floor(v.pw_total / 1000); i++) {\n count[v.country] = (count[v.country] || 0) + 1;\n\n if (top_countries.includes(v.country)) {\n nodesData.push({...v, count: count[v.country], top_country:true})\n } else {\n nodesData.push({...v, count: count[v.country], top_country:false})\n }\n\n }\n }\n})\n\n return nodesData\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1701,"value":"nodesData1 = {\n const cols = 19\n const rows = 50\n\n // add a grid scale\n const calc_grid_pos = (i, nc, nr) => {\n const cs = (innerHeight) / nc\n const rs = (innerWidth/2) / nr\n \n return {y: (Math.floor(i/nr) * cs), x: rs * (i % nr)} \n }\n \n return nodesData.sort((a,b) => b.pw_total - a.pw_total).map((v, i) => {\n const result = calc_grid_pos(i, rows, cols)\n let t = projection([parseFloat(v.long), parseFloat(v.lat)])\n return (\n {...v, x_grid: result.x, y_grid: result.y, x_map:t[0], y_map:t[1]}\n )\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2416,"value":"all_rivers_plastic","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2379,"value":"#### Libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2381,"value":"d3_annotation = require(\"https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W38","stdlib":"1"}} 31:"$30:body"