2b:null 2c:["$","title",null,{"children":"Flowers and Tracks: A visual and cartographic exploration | Cham Mamador | Observable"}] 31:T46e,viewof typhoonScrubber = Scrubber(sortedTyphoons, { autoplay: false, // initial: sortedTyphoons.length - 1, loopDelay: 1000, delay: 20, format: typhoonScrubber => { let name = typhoonScrubber.properties.name; let start = getMonthYear(typhoonScrubber)[0]; let end = getMonthYear(typhoonScrubber)[1]; geojsonLayerStatic.setStyle({color: "red", weight: 2, opacity: 0.2, }) geojsonLayer.clearLayers(); geojsonLayer.addData(typhoonScrubber); if(!geojsonLayerStatic.hasLayer(typhoonScrubber)){ geojsonLayerStatic.addData(typhoonScrubber); } d3.selectAll("#overlayLLSVGText").remove(); const overlayLLSVGText = d3.select(initialmap.getPanes().overlayPane) .append("svg") .attr('width',960) .attr('height',650) // .style('position','relative') .attr('id','overlayLLSVGText'); // add text to the map addBigYearTextStatic(overlayLLSVGText,`${getMonthYear(typhoonScrubber)[0]}`,'black',100,100) console.log(d3.selectAll("#overlayLLSVGText")); return `${name} from ${start} to ${end} ` } });32:Ta51,viewof typhoonYearScrubber = Scrubber(typhoonYear, { autoplay: false, // initial: sortedTyphoons.length - 1, loopDelay: 1000, delay: 300, format: typhoonYearScrubber => { let selectedYearGeoJsonData = filteredTyphoonsPerYear(sortedTyphoons,typhoonYearScrubber); geojsonPerYearLayer.clearLayers(); geojsonPerYearLayer.addData(selectedYearGeoJsonData[0]); geojsonPerYearLayer.setStyle({color: "grey", weight: 2, opacity: 0.2, }); layerGPerYear.clearLayers(); let noIntensityData = false; for (const feat of selectedYearGeoJsonData[0].features){ for (var i = 0; i< feat.geometry.coordinates.length; i++){ let latlng =L.latLng(feat.geometry.coordinates[i][1], feat.geometry.coordinates[i][0]); layerGPerYear.addLayer(L.circle(latlng, {stroke: false,radius: feat.properties.windspeed[i] ? feat.properties.windspeed[i]*3000 :0, opacity: 0.3, color: feat.properties.windspeed[i]?coloralt(feat.properties.windspeed[i]):'transparent'})); noIntensityData = isNaN(feat.properties.windspeed[i]) ? true : false; } } d3.select("#overlayLLSVGText_perYear").remove(); const overlayLLSVGText_perYear = d3.select(perYearMap.getPanes().overlayPane) .append("svg") .attr('width',960) .attr('height',250) .attr('id','overlayLLSVGText_perYear'); // overlayLLSVGText.append('text') // .text(`${avePeakIntensity(selectedYearGeoJsonData[0].features)}`) d3.selectAll("#ave-peak-text").remove(); let maxPeakValue = maxPeakIntensity(selectedYearGeoJsonData[0].features); if(maxPeakValue != 'Nan'){ let maxPeakText = overlayLLSVGText_perYear.append('text') .attr('font-family', 'sans-serif') .attr('font-style', 'italic') .attr('font-size', 65) .attr('font-weight', 600) .attr('fill', coloralt(maxPeakValue)) .attr('opacity', 1) .attr('transform', 'translate(50, 150)') .text(`${maxPeakIntensity(selectedYearGeoJsonData[0].features)} kts`) .attr('id','ave-peak-text'); } console.log('ws',selectedYearGeoJsonData[1],maxPeakIntensity(selectedYearGeoJsonData[0].features)); addBigYearTextStatic(overlayLLSVGText_perYear,`${selectedYearGeoJsonData[1]} - ${selectedYearGeoJsonData[0].features.length} typhoons`,'black',50,90,'perYear-big-text') if(noIntensityData){ return `${selectedYearGeoJsonData[1]} - ${selectedYearGeoJsonData[0].features.length} typhoons; Note: No intensity data.`; }else{ return `${selectedYearGeoJsonData[1]} - ${selectedYearGeoJsonData[0].features.length} typhoons`; } } });33:Td1f,viewof typhoonLandfallScrubber = Scrubber(typhoonYear, { autoplay: false, // initial: sortedTyphoons.length - 1, loopDelay: 1000, delay: 300, format: typhoonYearScrubber => { let selectedYearGeoJsonData = filteredTyphoonsPerYear(sortedTyphoons,typhoonYearScrubber); geojsonLandfallLayer.clearLayers(); geojsonLandfallLayer.addData(selectedYearGeoJsonData[0]); geojsonLandfallLayer.setStyle({color: "grey", weight: 2, opacity: 0.5, }); layerGLandfall.clearLayers(); let noIntensityData = false; let landfallPointsCount = 0; let typhoonLandfallCount =0; let typhoonLandfallCheck =false; for (const feat of selectedYearGeoJsonData[0].features){ for (var i = 0; i< feat.geometry.coordinates.length; i++){ let latlng =L.latLng(feat.geometry.coordinates[i][1], feat.geometry.coordinates[i][0]); //Check intersect land mass intersect here let tPoint = turf.point([feat.geometry.coordinates[i][0],feat.geometry.coordinates[i][1]]); let landfall = turf.booleanIntersects(world, tPoint); if(landfall){ layerGLandfall.addLayer(L.circle(latlng, {stroke: false,radius: feat.properties.windspeed[i] ? feat.properties.windspeed[i]*3000 :0, opacity: 0.9, color: feat.properties.windspeed[i]?coloralt(feat.properties.windspeed[i]):'transparent'})); landfallPointsCount++; typhoonLandfallCheck =true; } noIntensityData = isNaN(feat.properties.windspeed[i]) ? true : false; } if(typhoonLandfallCheck){ typhoonLandfallCount++; } } d3.select("#overlayLLSVGText_landFall").remove(); const overlayLLSVGText_landfall = d3.select(landfallMap.getPanes().overlayPane) .append("svg") .attr('width',960) .attr('height',250) .attr('id','overlayLLSVGText_landFall'); d3.selectAll("#landfall-points").remove(); let maxPeakValue = maxPeakIntensity(selectedYearGeoJsonData[0].features); if(maxPeakValue != 'Nan'){ let avePeakText = overlayLLSVGText_landfall.append('text') .attr('font-family', 'sans-serif') .attr('font-style', 'italic') .attr('font-size', 50) .attr('font-weight', 600) .attr('fill', 'purple') .attr('opacity', 0.8) .attr('transform', 'translate(50, 150)') //.text(`${landfallPointsCount} landfall points; ${typhoonLandfallCount} typhoons`) // .text(`${(typhoonLandfallCount*100/selectedYearGeoJsonData[0].features.length)}% typhoons`) .text(`${typhoonLandfallCount} of ${selectedYearGeoJsonData[0].features.length} typhoons (${(typhoonLandfallCount*100/selectedYearGeoJsonData[0].features.length).toFixed()}%)`) .attr('id','landfall-points'); } addBigYearTextStatic(overlayLLSVGText_landfall,`${selectedYearGeoJsonData[1]} - ${selectedYearGeoJsonData[0].features.length} typhoons`,'black',50,90,'landfall-big-text') console.log(selectedYearGeoJsonData[1],(typhoonLandfallCount*100/selectedYearGeoJsonData[0].features.length).toFixed()); if(noIntensityData){ return `${selectedYearGeoJsonData[1]} - ${selectedYearGeoJsonData[0].features.length} typhoons; Note: No intensity data.`; }else{ return `${selectedYearGeoJsonData[1]} - ${selectedYearGeoJsonData[0].features.length} typhoons`; } } });34:Tfee,viewof typhoonIntensityScrubber = Scrubber(typhoonYear, { autoplay: false, // initial: sortedTyphoons.length - 1, loopDelay: 1000, delay: 300, format: typhoonYearScrubber => { let selectedYearGeoJsonData = filteredTyphoonsPerYear(sortedTyphoons,typhoonYearScrubber); geojsonIntensityLayer.clearLayers(); geojsonIntensityLayer.addData(selectedYearGeoJsonData[0]); geojsonIntensityLayer.setStyle({color: "grey", weight: 2, opacity: 0.5, }); layerGIntensity.clearLayers(); let noIntensityData = false; let landfallPointsCount = 0; let landfallPointsCountSevere = 0; let typhoonLandfallCount =0; let typhoonSevereLandfallCount =0; let typhoonSevereLandfallCheck =false; let typhoonLandfallCheck =false; for (const feat of selectedYearGeoJsonData[0].features){ for (var i = 0; i< feat.geometry.coordinates.length; i++){ let latlng =L.latLng(feat.geometry.coordinates[i][1], feat.geometry.coordinates[i][0]); //Check intersect land mass intersect here let tPoint = turf.point([feat.geometry.coordinates[i][0],feat.geometry.coordinates[i][1]]); let landfall = turf.booleanIntersects(world, tPoint); // console.log(feat.properties.grade[i]>5); if(landfall){ landfallPointsCount++; typhoonLandfallCheck =true; if(feat.properties.grade[i]==5){ console.log(feat.properties.grade[i],feat.properties.windspeed[i]) layerGIntensity.addLayer(L.circle(latlng, {stroke: false,radius: feat.properties.windspeed[i] ? feat.properties.windspeed[i]*3000 :0, opacity: 0.9, color: feat.properties.windspeed[i]?coloralt(feat.properties.windspeed[i]):'red'})); landfallPointsCountSevere++; typhoonSevereLandfallCheck = true; } } noIntensityData = isNaN(feat.properties.windspeed[i]) ? true : false; } if(typhoonLandfallCheck){ typhoonLandfallCount++; } if(typhoonSevereLandfallCheck){ typhoonSevereLandfallCount++; } } d3.select("#overlayLLSVGText_intensity").remove(); const overlayLLSVGText_intensity = d3.select(intensityMap.getPanes().overlayPane) .append("svg") .attr('width',960) .attr('height',250) .attr('id','overlayLLSVGText_intensity'); d3.selectAll("#severe-points").remove(); let maxPeakValue = maxPeakIntensity(selectedYearGeoJsonData[0].features); if(maxPeakValue != 'Nan'){ let avePeakText = overlayLLSVGText_intensity.append('text') .attr('font-family', 'sans-serif') .attr('font-style', 'italic') .attr('font-size', 65) .attr('font-weight', 600) .attr('fill', 'green') .attr('opacity', 0.8) .attr('transform', 'translate(50, 150)') .text(`${(landfallPointsCountSevere*100/landfallPointsCount).toFixed(2)}% of landfall points`) // .text(`${landfallPointsCountSevere} of ${landfallPointsCount} landfall points`) // .text(`${landfallPointsCountSevere} landfall points; ${typhoonLandfallCount} typhoons`) // .text(`${typhoonSevereLandfallCount} of ${typhoonLandfallCount} typhoons (${(typhoonSevereLandfallCount*100/typhoonLandfallCount).toFixed(2)}%)`) .attr('id','severe-points'); } addBigYearTextStatic(overlayLLSVGText_intensity,`${selectedYearGeoJsonData[1]} - ${selectedYearGeoJsonData[0].features.length} typhoons`,'black',50,90,'intensity-big-text'); // console.log(selectedYearGeoJsonData[1],typhoonSevereLandfallCount, typhoonLandfallCount,(typhoonSevereLandfallCount*100/typhoonLandfallCount).toFixed(2)); console.log(selectedYearGeoJsonData[1], (landfallPointsCountSevere*100/landfallPointsCount).toFixed(2)); if(noIntensityData){ return `${selectedYearGeoJsonData[1]} - ${selectedYearGeoJsonData[0].features.length} typhoons; Note: No intensity data.`; }else{ return `${selectedYearGeoJsonData[1]} - ${selectedYearGeoJsonData[0].features.length} typhoons`; } } });35:[{"id":"59043c111274a27ebf73fed54359203b6a76decd910308ad1233a898571445b943fe17e60c37c4d31bf3dea812aa16a901c36f774a75ab6198b62dbe69f21577","href":"https://static.observableusercontent.com/files/59043c111274a27ebf73fed54359203b6a76decd910308ad1233a898571445b943fe17e60c37c4d31bf3dea812aa16a901c36f774a75ab6198b62dbe69f21577","name":"point-data.json","type":"application/json","lastModified":1668941723129.954,"size":187027},{"id":"dd28ff2a6422a442d40bfd152809640e4a15713301907dc91fcb79e530dfa12576c610f30a1f507b54651c6e82383e1603f302d1d992518a57c3929e5ff3f07e","href":"https://static.observableusercontent.com/files/dd28ff2a6422a442d40bfd152809640e4a15713301907dc91fcb79e530dfa12576c610f30a1f507b54651c6e82383e1603f302d1d992518a57c3929e5ff3f07e","name":"world.json","type":"application/json","lastModified":1669364312879.915,"size":293781}] 2f:{"id":"40db58f3f4cb226f","slug":null,"title":"Flowers and Tracks: A visual and cartographic exploration","thumbnail":"85fb9e7c4c32230dde5bb68f626675a3ec5a31fd331ace838b28809be6f6f0d1","access_level":"public","create_time":"$D2022-11-20T10:55:23.129Z","update_time":"$D2023-10-04T00:39:06.599Z","view_time":null,"first_public_time":"$D2022-11-23T10:02:05.065Z","has_unpublished_edits":null,"fork":{"id":"9ee00c8d0c784e4d","slug":"flowers-and-tracks","title":"Flowers and Tracks","owner":{"id":"c9876ed17b18c97d","login":"chamthesleeptalker","name":"Cham Mamador"}},"stars":12,"starred":false,"owner":{"type":"team","id":"c9876ed17b18c97d","login":"chamthesleeptalker","name":"Cham Mamador","avatar_url":"https://avatars-next.observableusercontent.com/ea4472932bdeb8d8e794277a823d8c77de6eb41643e99a8231c63f5a3a6d6284","tier":"starter_2024"},"version":2924,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4b5dad2d9597a06d","login":"chamthesleeptalker","name":"Cham Mamador","avatar_url":"https://avatars-next.observableusercontent.com/ea4472932bdeb8d8e794277a823d8c77de6eb41643e99a8231c63f5a3a6d6284","tier":null}],"members":[{"type":"individual","id":"4b5dad2d9597a06d","login":"chamthesleeptalker","name":"Cham Mamador","avatar_url":"https://avatars-next.observableusercontent.com/ea4472932bdeb8d8e794277a823d8c77de6eb41643e99a8231c63f5a3a6d6284","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Flowers and Tracks: A visual and cartographic exploration","cells":[{"id":617,"value":"# Flowers and Tracks: A visual and cartographic exploration\n\nWe have a saying that, *\"Even the most dangerous things can be quite beautiful.\"*\n\nTake a few minutes and look at the piece below and tell me what you can see.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":641,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":945,"value":"svgBackground(svgMain)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1172,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"### Maybe it reminded you of the bliss of summer from your childhood?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":629,"value":"### Or maybe you were reminded of the famous cherry blossoms of Japan and South Korea that attracts millions of tourists year after year?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":639,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":649,"value":"## Let's see what's behind these flowers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1236,"value":"html` `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":"svgBackground(svgBeforeRemove)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"# These are the typhoon tracks on the northwestern Pacific area observed for 2019.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":721,"value":"> *The sizes of the circles were, just like their color, related to the intensity of the typhoon at that point in time.*\n> \n> *The data used to display this came RSMC Tokyo-Typhoon Center as indicated by [@z-richard](https://observablehq.com/@z-richard) in his work were this [notebook](https://observablehq.com/@z-richard/northwestern-pacific-typhoon-track-v3-2019) was forked from.*\n>\n> ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":781,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2045,"value":"# That was just for 2019. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2048,"value":"## Let's see how this region is with 70 years of typhoons.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1659,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1991,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1719,"value":"container = yield htl.html`

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2052,"value":"### Can you still see the Philippines? How about Japan?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2738,"value":"Over this time period, the region experienced over 1800 typhoons.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":700,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2065,"value":"# Next, let's see which year has the most typhoons and which has the least.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2092,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2071,"value":"containerForPerDecade = yield htl.html`

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2700,"value":"Over this time period, we see that actually the frequency of the typhoons is as expected for the Northwestern Pacific region which is ~20 per year. However, there are still notable points in time that challenged that expectation. For 8 separate years, we saw that at least 30 typhoon events occurred with 39 typhoons recorded on 1967. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2741,"value":"| year | Number of typhoons |\n| ------ | -------- |\n| 1967 | 39 |\n| 1971, 1994 | 36 |\n| 1989, 1974 | 32 |\n| 1972, 1992 | 31 |\n| 1978 | 30 |","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2748,"value":"With that said, frequency is indeed a parameter that can be monitored however it's not very relevant as we can see that even before the 20th century typhoon occurrences can be over 30 typhoons. In addition to this, this can also be affected by El Nino or La Nina periods.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2754,"value":"## Then, how about *wind speed*?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2758,"value":"Apart from the number of typhoons for each year, the peak wind speed for each year was also identified.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2767,"value":"| Year | Peak Wind Speed (kts) |\n| ------ | -------- |\n| 1979 | 140 |\n| 1982, 2010, 2013 | 125 |\n| 1978, 1980, 1981, 1983, 1984, 1985, 1986, 1990, 1991, 2016, 2020, 2021 | 120 |\n| 1995, 2008, 2009, 2015, 2018, 2019 | 115 |\n| 1977, 1987, 1992, 1994, 1997, 1998, 2000, 2004, 2006, 2007, 2012 | 110 |\n| 1993, 2001, 2003, 2005, 2011 | 105 |\n| 1988, 1989, 2002, 2017 | 100 |","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2775,"value":"The 20th century peak wind speed ranges from a minimum of 100 kts (2002,2017) and reaches a maximum of 125 kts (2000, 2013). Looking at the table for the last 20 years, typhoon/s reaching a max speed of at least 100 kts yearly exists. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2795,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2549,"value":"# Wind speed which often is the measure for intensity won't be as critical if peak wind values are reached in the open ocean.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2798,"value":"When are typhoons destructive? How are risks measured? How are damages measured?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2808,"value":"![Risk Triangle for Natural Hazards](https://www.nortonrosefulbright.com/-/media/images/nrf/nrfweb/knowledge/publications/au_33055_natural-hazard-risk-triangle_1.png?revision=a54c059d-564d-441c-9836-2f13daee5492&h=415&w=750&hash=FBED645642D95085BAF2299E36A38318)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2810,"value":"The three sides of this triangle remind us that for the risk to adequately assessed/thought about, Exposure, Vulnerability, and Hazard needs to be considered.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2812,"value":"In an event such as typhoons, Exposure, Vulnerability, and Hazard will be determined by its track and where it intersects on land. Information on the path that the typhoon will traverse will help us prepare and identify potential risk. Will it hit a city with a high population density? Will in traverse through floodplains or low-lying areas increasing the risks of flooding? These are some questions that can be answered by having the tracks and the landfall information.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2806,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2791,"value":"# Tracks are informative and crucial to identify landfall points.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2817,"value":"A typhoon events can occur and dissipate without making landfall. This significantly lowers the risks of that event given that it will not traverse land where a community or city might be situated. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2821,"value":"#### Let's take a look at the number of typhoons that has actually traversed land.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2552,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2556,"value":"containerForLandfall = yield htl.html`

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2839,"value":"## Unfortunately, at least 74% of the typhoons each year makes a landfall.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2843,"value":"This increases the chances of posing risks and leaving damages to the population that will be traversed by the typhoons. For 11 of the last 20 years, the typhoons made landfalls 100%.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2848,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2628,"value":"To make matters worse, a landfall event can be made much more damaging considering the *grade* of the Typhoon.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2859,"value":"| Grade | Description |\n| ------ | -------- |\n| 2 | Tropical Depression (TD) |\n| 3 | Tropical Storm (TS) |\n| 4 | Severe Tropical Storm (STS) | \n| 5 | Typhoon (TY) | ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2861,"value":"# Let's see how many of the data points signifying a landfall are categorized as Grade 5 - Typhoon (TY)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2632,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2635,"value":"containerForIntensity = yield htl.html`

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2891,"value":"For the last 20 years, a maximum of ~23% of the data points are classified as Grade 5.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2893,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2895,"value":"# One of the greatest and meanest of the past 20 years is the Typhoon Hagibis of 2019. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":738,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":744,"value":"This typhoon, in particular, was described as *the fingerprint of global warming* in an [article](https://www.scientificamerican.com/article/climate-change-caused-4-billion-of-typhoons-damage/#) published in **Scientific American**. In fact it brought the [highest rainfall observed](https://www.worldweatherattribution.org/climate-change-added-4bn-to-damage-of-japans-typhoon-hagibis/) in Japan's recorded history.\n\nIn total, Typhoon Hagibis took the lives of [121 and left 3 people missing until now](https://en.wikipedia.org/wiki/Typhoon_Hagibis). Of the estimated *10 billion* damages [*4 billion*](https://www.scientificamerican.com/article/climate-change-caused-4-billion-of-typhoons-damage/#) can be attributed to climate change. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":764,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":762,"value":"# The likely of an event like Hagibis occurring has been increased to [67% due to climate change](https://www.scientificamerican.com/article/climate-change-caused-4-billion-of-typhoons-damage/#).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":785,"value":"Year after year we are breaking record after record related to climate change such as heatwaves, sea level rise, drought, intensity of typhoons, and so on. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":792,"value":"## *Hence, there is a need more than ever to take action against climate change.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":799,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":729,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2907,"value":"Despite the challenges that comes with being the country takes on this horrible typhoon cycle year after year the Filipinos have grown to be resilient. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2914,"value":"However, with the prospect of matters getting worse because of climate change innovative solutions needs to be implemented to protect the population.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2918,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2920,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2638,"value":"intensityMap = L.map(containerForIntensity,{dragging:false,\n maxBounds:bounds,\n minZoom:3.5,\n maxZoom:3.5\n }).setView([10.580473450830212,100.49681402655466], 3.5);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2654,"value":"{\n intensityMap.addLayer(geojsonIntensityLayer);\n layerGIntensity.addTo(intensityMap);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2642,"value":"layerGIntensity = new L.LayerGroup();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2647,"value":"geojsonIntensityLayer = new L.GeoJSON();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2651,"value":"basemapTiles().addTo(intensityMap);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2626,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2560,"value":"landfallMap = L.map(containerForLandfall,{dragging:false,\n maxBounds:bounds,\n minZoom:3.5,\n maxZoom:3.5\n }).setView([10.580473450830212,100.49681402655466], 3.5);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2610,"value":"geojsonWorldLayer = new L.GeoJSON(world);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2605,"value":"{\n landfallMap.addLayer(geojsonLandfallLayer);\n layerGLandfall.addTo(landfallMap);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2603,"value":"layerGLandfall = new L.LayerGroup();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2601,"value":"geojsonLandfallLayer = new L.GeoJSON();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2564,"value":"basemapTiles().addTo(landfallMap);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2547,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2068,"value":"perYearMap = L.map(containerForPerDecade,{dragging:false,\n maxBounds:bounds,\n minZoom:3.5,\n maxZoom:3.5\n }).setView([10.580473450830212,100.49681402655466], 3.5);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2108,"value":"typhoonYear = {\n let start = 1950;\n let decade =[];\n for(var i = 1; (i+1950)<2023;i++){\n decade.push(start+i);\n }\n return decade;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2106,"value":"filteredTyphoonsPerYear = function(tyInput,year){\n \n let perDecadeFeatures =[];\n let yearId = (year.toString())[2]+(year.toString())[3];\n \n for (const typhoon of tyInput){\n let typhoonYearId = (typhoon.id[0]+typhoon.id[1])\n \n if(yearId === typhoonYearId){\n perDecadeFeatures.push(typhoon);\n }\n }\n console.log(perDecadeFeatures);\n \n let featureVersion = {\n 'type': \"FeatureCollection\",\n 'features':perDecadeFeatures\n }\n \n return [featureVersion,year]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2255,"value":"maxPeakIntensity = function(featuresForYear){\n const allMaxInstensity = featuresForYear.map(i=>{return _.max(i.properties.windspeed)})\n \n let maxMaxIntensity = _.max(allMaxInstensity);\n return isNaN(maxMaxIntensity) ? 'Nan' : maxMaxIntensity.toFixed(2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2118,"value":"sortedTyphoons","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2196,"value":"layerGPerYear.addTo(perYearMap);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2182,"value":"perYearMap.addLayer(geojsonPerYearLayer);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2194,"value":"layerGPerYear = new L.LayerGroup();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2102,"value":"geojsonPerYearLayer = new L.GeoJSON();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2080,"value":"basemapTiles().addTo(perYearMap);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2073,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1993,"value":"d3.select(\"#resetMonthlyMap\").on(\"click\", function() {\n\t\tgeojsonLayer.clearLayers();\n geojsonLayerStatic.clearLayers();\n d3.selectAll(\"#overlayLLSVGText\").remove();\n document.getElementById(\"mapScrubber\").value = 0;\n document.getElementById(\"mapScrubberText\").innerHTML = '';\n\t});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1721,"value":"initialmap = L.map(container,{dragging:false,\n maxBounds:bounds,\n minZoom:3.5,\n maxZoom:3.5\n }).setView([10.580473450830212,100.49681402655466], 3.5);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1861,"value":"sortedTyphoons = _.sortBy(typhoonFeatures.features, [function(o) { \n let year = getMonthYear(o)[0].split(\" \")[1];\n return year; }])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1806,"value":"getMonthYear = function(typhoonScrubber){\n let startMMYYY = new Date(typhoonScrubber.properties.time[0]).toLocaleDateString('en-us', { month:\"long\", year:\"numeric\"}); \n let endMMYYY = new Date(typhoonScrubber.properties.time[typhoonScrubber.properties.time.length-1]).toLocaleDateString('en-us', { month:\"long\", year:\"numeric\"}); \n return [startMMYYY,endMMYYY];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1914,"value":"initialmap.addLayer(geojsonLayer);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1937,"value":"initialmap.addLayer(geojsonLayerStatic);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2082,"value":"basemapTiles().addTo(initialmap);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1929,"value":"geojsonLayerStatic = new L.GeoJSON();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1911,"value":"geojsonLayer = new L.GeoJSON();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2077,"value":"(basemapTiles()).addTo(initialmap);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1701,"value":"basemapTiles = function () {\n return L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {\n attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ',\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1692,"value":"bounds = L.latLngBounds(L.latLng(32.78678486504772,117.87119615191318), L.latLng(20.642706730875346, 139.02082464246405));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1253,"value":"allTracks(svgBeforeRemove);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1564,"value":"typhoonFeatures = generateFeatures(typhoons)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1555,"value":"generateFeatures = function(typhoonsInput){\n console.log(typhoonsInput)\nconst typhoonFeatures = {\n 'type': \"FeatureCollection\",\n 'features': typhoonsInput.map((d,i)=>{\n return{\n 'type':'Feature', \n 'id':d.IntID, \n 'properties':{\n 'datapoints':d.datapoints,\n 'cycloneNumber': d.cycloneNumber? d.cycloneNumber.trim():\"\",\n //'cycloneNumber':d.cycloneNumber.trim(),\n \"name\":d.name ? d.name.trim() : \"\" ,\n \"time\":d.stormData.map((e,j)=>{return e.time}),\n \"pressure\":d.stormData.map((e,j)=>{return parseFloat(e.hPa.trim())}),\n \"windspeed\":d.stormData.map((e,j)=>{return parseFloat(e.windSpeed.trim())}),\n \"landfall\": d.stormData.map((e,j)=>{return e.landfall.trim()}),\n \"grade\":d.stormData.map((e,j)=>{return e.grade}),\n },\n \"geometry\":{\n type:\"LineString\",\n coordinates: d.stormData.map((e,j)=>{return [parseFloat(e.long/10),parseFloat(e.lat/10)]})\n }\n }\n })\n};\n \nreturn typhoonFeatures;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1845,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1240,"value":"d3.select(\"#removeFlowers\").on(\"click\", function() {\n\t\tremoveFlowers(svgBeforeRemove);\n changeBackgroundToMap(svgBeforeRemove);\n flashText(svgBeforeRemove,\"I think you have a good idea now of what these tracks were actually.\",'black',30,490);\n removeFlashText(svgBeforeRemove);\n \n //changeBackgroundColor\n changeMapBackgroundColor('#647C90');\n \n //Add legend\n addLegend(svgBeforeRemove);\n //Add texts\n \n for(let i = 0; i<10000; i++){\n svgBeforeRemove.selectAll('.typhoon-path').raise();\n svgBeforeRemove.selectAll('.typhoon-graticules').raise();\n svgBeforeRemove.selectAll('graticule-x-text').raise();\n }\n //Add typhoon circles\n svgBeforeRemove.selectAll('.flower-petal-center').transition().delay(2000).duration(5000).ease(d3.easeBackOut).attr('opacity',0).end();\n addTyphoonPoints(svgBeforeRemove);\n\n //Add year text\n addBigYearText(svgBeforeRemove,\"2019\",'white',710,545);\n\t});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1265,"value":"d3.select(\"#resetRemoveFlowers\").on(\"click\", function() {\n\t\tallTracks(svgBeforeRemove);\n\t});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1495,"value":"addBigYearText = function(svg, text, fillColor, x, y){\n const bigYear = svg.append('text')\n .attr('font-family', 'sans-serif')\n .attr('font-style', 'italic')\n .attr('font-size', 95)\n .attr('font-weight', 600)\n .attr('fill', fillColor)\n .attr('opacity', 0.0)\n .attr('transform', `translate(${x}, ${y})`)\n .text(text)\n .attr('class','big-year-text');\n\n bigYear.transition()\n .delay(6000)\n .duration(6000)\n .ease(d3.easeQuadIn)\n .attr('opacity', 0.5)\n .end();\n\n return svg.node()\n\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1824,"value":"addBigYearTextStatic = function(svg, text, fillColor, x, y, id){\n if(!d3.selectAll(\"#big-year-text-static\")){\n let bigYear = svg.append('text')\n .attr('font-family', 'sans-serif')\n .attr('font-style', 'italic')\n .attr('font-size', 95)\n .attr('font-weight', 600)\n .attr('fill', fillColor)\n .attr('opacity', 0.5)\n .attr('transform', `translate(${x}, ${y})`)\n .text(text)\n .attr('id',id); \n }else{\n d3.selectAll(\"#big-year-text-static\").remove(); \n let bigYear = svg.append('text')\n .attr('font-family', 'sans-serif')\n .attr('font-style', 'italic')\n .attr('font-size', 95)\n .attr('font-weight', 600)\n .attr('fill', fillColor)\n .attr('opacity', 0.5)\n .attr('transform', `translate(${x}, ${y})`)\n .text(text)\n .attr('id',id); \n }\n return svg.node()\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1407,"value":"addTyphoonPoints = function(svg){\n for(const data of trackData){ \n const typhoonCSVG = typhoonCircles(svg,data,data);\n }\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1459,"value":"typhoonCircles = function(svg, data, filteredData){\n const typhoonC = svg.append('g')\n .selectAll('.' + data.key)\n .data(filteredData.coordinates)\n .join('circle')\n .attr('transform', d => `translate(${projection(d)})`)\n .attr('r', 0)\n .attr('fill', 'white')\n .attr('opacity', 0)\n .attr('stroke', 'white')\n .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2)\n .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5)\n .attr('class','typhoon-centers');\n\n typhoonC.transition()\n .delay(2000)\n .duration(5000)\n .ease(d3.easeBackIn)\n .attr('r', (d, i) => i === 0 ? 0 : intensity(data.intensity[i])*50)\n .attr('fill', (d, i) => coloralt(data.intensity[i]))\n .attr('opacity', 0.6)\n .end();\n\n \n return typhoonC;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1399,"value":"addLegend = function(svg){\n const legendSVGG = svg.append('g')\n .attr('id','legend-g')\n .attr('transform', 'translate(20, 10)')\n .attr('opacity', 0);\n\n const legendSelf = svg.selectAll(\"#legend-g\")\n .append(() => legend({color:coloralt, \n title: 'Intensity (kts)',\n tickSize: 0,\n width: 180\n }))\n .attr('opacity', 0);\n \n legendSVGG.transition()\n .delay(7000)\n .duration(3000)\n .ease(d3.easeBackIn)\n .attr('opacity', 0.8)\n .end();\n\n legendSelf.transition()\n .delay(7000)\n .duration(3000)\n .ease(d3.easeBackIn)\n .attr('opacity', 0.8)\n .end();\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1395,"value":"changeMapBackgroundColor = function(color){\n d3.select(\"#svgBeforeRemove\").transition().delay(2000).duration(3000).style('background', '').end();\n d3.select(\"#svgBeforeRemove\").transition().delay(4000).duration(3000).style('background-color', color).end();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1375,"value":"removeFlashText = function(svg){\n svg.selectAll('.flash-text').transition()\n .delay(11000)\n .duration(2000)\n .ease(d3.easeQuadOut)\n .attr('opacity', 0)\n .end();\n\n svg.selectAll('.text-rectangle').transition()\n .delay(11000)\n .duration(2000)\n .ease(d3.easeBackOut)\n .attr('opacity',0)\n .end();\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1306,"value":"//Intermediate notice\nflashText = function(svg, text, fillColor, x, y){\n const textRectangle = svg.append('rect')\n .attr('width','500px')\n .attr('height', '33px')\n .attr('opacity', 0)\n .attr('transform', `translate(${x-20}, ${y-20})`)\n .attr('fill', 'white')\n .attr('class','text-rectangle');\n \n const bottomText = svg.append('text')\n .attr('font-family', 'sans-serif')\n .attr('font-style', 'italic')\n .attr('font-size', 14)\n .attr('font-weight', 600)\n .attr('fill', fillColor)\n .attr('opacity', 0.0)\n .attr('transform', `translate(${x}, ${y})`)\n .text(text)\n .attr('class','flash-text');\n\n bottomText.transition()\n .delay(6000)\n .duration(6000)\n .ease(d3.easeQuadIn)\n .attr('opacity', 0.8)\n .end();\n\n textRectangle.transition()\n .duration(6000)\n .ease(d3.easeBackIn)\n // .attr('width','500px')\n // .attr('height', '33px')\n .attr('opacity',1)\n .end();\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1219,"value":"// remove flowers\nremoveFlowers = function(svg){\n svg\n .selectAll('.flower-petal')\n .transition()\n .delay(function(d,i){ console.log(i); return 5*i; }) \n .duration(3000)\n .ease(d3.easeQuadInOut)\n .attr('transform', (d,i) => `translate(${projection(d)}) scale(0)`)\n .attr('opacity', 0.0)\n .end();\n\n svg\n .selectAll('flower-petal').remove();\n\n // remove background\n \n\n \n\n //change backgound\n \n\n return svg.node();\n}\n \n\n// change background\n// add graticules\n// add map\n// add typhoon circles\n// add legend","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1277,"value":"changeBackgroundToMap = function(svg){\n addBasemap(svg);\n addGraticule(svg);\n addGraticuleText(svg);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1283,"value":"addGraticuleText = function(svg){\n const xGraticuleG = svg.append('g')\n .attr('font-size', 10)\n .attr('font-family', 'sans-serif')\n .attr('fill', 'white')\n .attr('opacity', 0)\n .attr('text-anchor', 'start')\n .attr('class', 'graticule-x-text');\n\n xGraticuleG.transition()\n .duration(10000)\n .ease(d3.easeBackInOut)\n .attr('opacity', 0.6)\n .end();\n \n longitude.map(x => {\n xGraticuleG.append('text')\n .attr('transform', `translate(${projection([x, -7]) + \"\"}) rotate(-90)`)\n .text(formatLongitude(x))\n .attr('y', 11)\n })\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1280,"value":"addBasemap = function(svg){\n const basemapSVG = svg.append('path')\n .datum(basemap)\n .attr('d', path)\n .attr('fill', '#C5C5C5')\n .attr('opacity',0)\n .attr('stroke', 'white')\n .attr('stroke-width', '0px')\n .attr('stroke-linejoin', 'round');\n \n basemapSVG.transition()\n .duration(15000)\n .ease(d3.easeBackInOut)\n .attr('opacity',1)\n .attr('stroke-width', '0.2px')\n .end();\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"addGraticule = function(svg){\n const graticuleSVG = svg.append('path')\n .datum(graticule)\n .attr('d', path)\n .attr('stroke', 'grey')\n .attr('stroke-width', '0px')\n .attr('stroke-opacity', 0)\n .attr('class', 'graticules');\n \n\n graticuleSVG.transition()\n .duration(5000)\n .ease(d3.easeBackInOut)\n .attr('stroke', 'white')\n .attr('stroke-width', '0.3px')\n .attr('stroke-opacity', 0.7)\n .end();\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1124,"value":"allTracks(svgMain);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1186,"value":"d3.select(\"#allTracks\").on(\"click\", function() {\n\t\tallTracks(svgMain);\n\t});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1111,"value":"// loop through all the typhoon tracks\nallTracks = function(svg){\n svg.style(\"background\",\"url('https://i0.wp.com/pixahive.com/wp-content/uploads/2021/03/Paper-texture-background-392323-pixahive.jpg') \");\n svg.selectAll(\"*\").remove();\n let pathCount = 1;\n for (const data of trackData) {\n drawPath(svg,data,path, pathCount);\n drawFlower(svg, data, filteredTyphoons(data), petalPath, projection,intensity,color);\n pathCount++;\n }\n return \"The flowers have grown beautifully.\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1008,"value":"filteredTyphoons = function(data){\n let filteredData = {'coordinates':[],'intensity':[]};\n for(var i=0;i `translate(${projection(d)}) rotate(${rotation[rotAngle]}) scale(${intensity(filteredData.intensity[i])})`)\n .attr('opacity', 0.8)\n .end();\n const centerOfFlower = centerOfFlowerSVG(svg,data,filteredData);\n centerOfFlower.transition()\n .delay(function(d,i){ return 500*i; }) \n .duration(5000)\n .ease(d3.easeQuadInOut)\n .attr('r', (d, i) => i === 0 ? 1 : i < 0 ? 0.1 : Math.abs(intensity(filteredData.intensity[i])*20))\n .attr('opacity', 0.5)\n .end();\n }\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1091,"value":"centerOfFlowerSVG = function(svg, data, filteredData){\n const centerOfFlower = svg.append('g')\n .selectAll('.' + data.key)\n .data(filteredData.coordinates)\n .join('circle')\n .attr('class', data.key)\n .attr('transform', d => `translate(${projection(d)})`)\n .attr('r', 0 )\n .attr('fill', 'white')\n .attr('stroke', 'white')\n .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2)\n .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5)\n .attr('class','flower-petal-center');\n return centerOfFlower;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1074,"value":"flowerSVG = function(svg,data,rotAngle, filteredData){\n const flower = svg.append('g')\n .selectAll('.' + data.key)\n .data(filteredData.coordinates)\n .join('path')\n .attr('d',petalPath)\n .attr('class', data.key)\n .attr('transform', (d,i) => `translate(${projection(d)}) rotate(${rotAngle}) scale(0)`)\n .attr('fill', (d, i) => color(filteredData.intensity[i]))\n .attr('opacity', 0)\n .attr('stroke', 'white')\n .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2)\n .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5)\n .attr('class','flower-petal');\n return flower \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":987,"value":"drawPath = function(svg, data, path, pathCount){\n console.log(data);\n const typhoonTrack = svg.append('path')\n .datum(data)\n .attr('d', path)\n .attr('fill', 'none')\n .attr('stroke', '#333333')\n .attr('stroke-width', '0px')\n .attr('opacity', 0)\n .attr('class','typhoon-path');\n\n typhoonTrack.transition()\n .delay(function(d,i){ console.log(d); return 300*pathCount; }) \n .duration(3000)\n .ease(d3.easeQuadInOut)\n .attr('opacity', 0.8)\n .attr('stroke-width', '2px')\n .end();\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":931,"value":"svgBackground = function(svg){\n svg.style(\"background\",\"url('https://i0.wp.com/pixahive.com/wp-content/uploads/2021/03/Paper-texture-background-392323-pixahive.jpg') \");\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"svgMain = d3.create('svg').attr('viewBox', [0, 0, 960, 600]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1255,"value":"svgBeforeRemove = d3.create('svg').attr('viewBox', [0, 0, 960, 600]).attr('id','svgBeforeRemove');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":843,"value":"### *Data Import*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":848,"value":"import {typhoons} from \"0a91455bf713c2ab\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":833,"value":"### *Data Source*\n- Typhoon Best Track Dataset: https://www.jma.go.jp/jma/jma-eng/jma-center/rsmc-hp-pub-eg/besttrack.html\n- JSON version created by [@hellonearthis](https://observablehq.com/@hellonearthis/rsmc-tokyo-typhoon-center-dataset)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":883,"value":"### *Utils*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2016,"value":"import {Scrubber} from \"1a96b75c91b60527\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":724,"value":"### *Set up lines*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1012,"value":"typhoonNumber = 19;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"myScale = 0.1;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"formatLongitude = x => `${Math.abs(x)}°${x < 0 ? 'W' : 'E'}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"formatTime = d3.timeFormat('%B %d, %Y %H:%M')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"intensity = d3.scaleLinear()\n .domain([34, 48, 64, 85, 105])\n .range([0.06,0.12,0.18,0.24,0.3]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"coloralt = d3.scaleThreshold()\n .domain([34, 48, 64, 85, 105])\n .range(['#8299d9', '#4d63a1', '#e3ce71', '#e0ae51', '#e69035', '#e05f34'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"color = d3.scaleThreshold()\n .domain([34, 48, 64, 85, 105])\n .range(['#f6bc66','#f69c6d','#f68c70','#f57c73','#f56c77','#f55c7a']);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"/* Rotate according to the longitude offset,\n and center the graph based on the latitude offset. */\nprojection = d3.geoMercator()\n .rotate([-140, 0])\n .center([0, 25]) \n .scale([600])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"basemap = d3.json('https://unpkg.com/world-atlas@1.1.4/world/50m.json').then(data => {\n return topojson.feature(data, data.objects.countries)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"trackData = FileAttachment('point-data.json').json().then(d => {\n let result = []\n for (const key in d) {\n const rawData = d[key];\n result.push({\n 'type': \"LineString\",\n 'coordinates': rawData.map(d2 => d2.location),\n 'intensity': rawData.map(d2 => d2.intensity),\n 'time': rawData.map(d2 => formatTime(new Date(d2.time))),\n 'number': key\n });\n } \n return result;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"longitude = d3.range(100, 181, 20)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"*This petalPath is from [@sxywu's](https://observablehq.com/@sxywu/) Introduction to D3.js Workshop*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":451,"value":"petalPath = \"M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"import {legend} from '@d3/color-legend'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2585,"value":"world = FileAttachment(\"world.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2578,"value":"turf = require('https://unpkg.com/@turf/turf@6/turf.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"