31:T434,md` There's a necessary question of whether the waterlines should move away from or towards the shore. Throw a stone into a lake and the ripples move outwards. But waves at the coast wash inwards onto the land. For the full implementation at the bottom of this notebook, I give the option of either. But for these little demos let's look at waterlines floating outwards. In the next and final notebook, I add some reflections about which way I think they should go. What we need is for each SVG \`\`\`\` element (waterline) to transition into the next waterline up. The shape/position of a \`\`\`\` element is described by its [\`\`d\`\`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d) attribute: this is what we need to tween. While d3 can happily tween \`\`d\`\`, however, it doesn't necessarily do it in the way you might expect or want (as in, a natural, smooth morph between shapes). To demonstrate, **press the 'Naive Morph' button below 👇** to see what happens if you simply transition the d attribute from each waterline to the next :`32:T494,{ button_NaiveMorph; let animation_interval = 2000; const paths_total = d3 .select('#jumble') .selectAll('path') .nodes().length; // for every path (excluding the outermost one), transition d to the path of the next waterline up for ( let i = 0; i < paths_total - 1; // get number of paths - 1 i++ ) { d3.select('#jumble') .selectAll('path') .filter((d, j) => j == i) .transition() .duration(animation_interval) .attr('d', paths_d_array[i + 1]) .attr('opacity', opacity_scale(i)) .on('end', function() { if (i == 10) { mutable transitioning1 = false; } }); } //fade out and then remove the final waterline d3.select('#jumble') .selectAll('path') .filter((d, j) => j == paths_total - 1) .attr('opacity', 1) .transition() .attr('opacity', 0) .remove(); // create a new first waterline d3.select('#jumble') .append('path') .attr('d', paths_d_array[0]) .attr("class", "waterLines") .style('fill', 'none') .style("stroke", 'teal') .attr('opacity', opacity_scale(0)) .lower(); // make first child }33:T809,md` It's a mess. The reason for this is [the way shape/position are articulated in \`\`d\`\` as *control points* (pairs of x,y values)](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#path_commands). D3 interpolates each control point in one path to the next simply based on their order, regardless of how many control points are in each, and where exactly they are: you can have a look at the paths in \`\`paths_d_array\`\`. Mike Bostock has [written about transitioning paths in more detail](https://bost.ocks.org/mike/path/). You might notice, when the paths are transitioning above, that to the South West corner of Ireland, the paths have a strange sort of corner to them that you only see when they're moving. That's because that is the *origin* of each of the paths. (The "Move To" command at the beginning of \`\`d\`\` specifying where the drawing starts). This problem can be called SVG shape tweening or shape morphing eg. https://bl.ocks.org/mbostock/1020902. The best solution I found is [Noah Veltman](https://observablehq.com/@veltman)'s 🔥 [flubber](https://github.com/veltman/flubber) library: "*The goal of this library is to provide a best-guess interpolation for any two arbitrary shapes (or collections of shapes) that results in a reasonably smooth animation, without overthinking it*". Try it yourself: **demo below with the Flubber Morph button 👇**. Flubber does a great job. Even better, in this case, than the alternative [GreenSock MorphSVG plugin](https://greensock.com/morphsvg/) which is a paid-for plugin - thank you Noah! It's also easy to use; you specify a custom transition interpolation with [.attrTween](https://github.com/d3/d3-transition#transition_attrTween) where you use flubber.interpolate(startPath,endPath) on the waterline paths to morph between. > *N.B. These animations are demonstrated on pre-generated SVG paths, which I created using the really nice Observable ['Download SVG'](https://observablehq.com/@mbostock/saving-svg) functionality after previously drawing the graphic.*`34:T41e,{ button; d3.select('path#map0') .transition() .duration(1000) // using .attrTween instead of .attr allows defining a custom interpolation // https://github.com/d3/d3-transition#transition_attrTween .attrTween('d', function() { var startPath = d3.select('#map0').attr('d'), endPath = d3.select('#map1').attr('d'); return flubber.interpolate(startPath, endPath); }); d3.select('path#map1') .transition() .duration(1000) .attrTween('d', function() { var startPath = d3.select('#map1').attr('d'), endPath = d3.select('#map2').attr('d'); return flubber.interpolate(startPath, endPath); }) .on("end", function() { d3.select('path#map2').remove(); d3.select('path#map1').attr('id', 'map2'); d3.select('path#map0').attr('id', 'map1'); d3.select('#g_paths') .append('path') .attr('d', path0_d) .attr('fill', 'none') .attr('stroke', 'grey') .attr('id', 'map0'); mutable transitioning = false; }); }35:T2521,path0_d = "M467.4140083576594,389.491713514828L474.9202462022848,392.5463673498439L479.36661639050305,388.28019794573106L479.9881520082109,382.5018446588638L485.6775934318436,381.6337716167486L489.55023843448527,378.8536153730813L488.7374610882515,374.3863660505551L484.72138478921624,376.0699113042883L488.88089238464585,366.64856581990693L488.83308195251504,373.3407523653914L491.12798269482073,376.70815744124434L493.327262572863,368.97861729016654L490.0761531879307,359.760330485195L483.5261239859326,358.5321656444901L478.9841329334516,362.56495922659315L480.51406676165595,357.4203698940655L484.0998491715096,355.95661252215996L484.9604369498734,350.7963144498235L481.9961901577283,349.73928401277635L478.6494599085321,343.680778772105L476.16331743769956,342.3845282382981L476.73704262327703,339.0224422622439L473.82060626326427,337.36897401045326L474.5855731773653,332.3417494806986L472.6253454599787,329.91266069097173L467.8443022468416,329.97193931161655L461.00741045205643,327.95555157121544L452.40153266840935,331.80876908194523L445.99493476280566,330.8609231946725L444.2737592060754,337.54619185287174L441.73980630311326,339.19952456568785L437.19781525063263,337.6643290063116L439.87519944998945,333.22975775063287L446.6164703805131,329.55695475032053L438.7755595109678,323.0847244029901L432.9426867909407,320.4665620310225L434.71167277980135,324.68974953627L428.59193746698554,325.69970778788L428.0660227135409,330.6831557233904L430.31311302371546,333.58485879019645L430.31311302371466,339.0224422622439L425.006155057133,339.0224422622439L428.4006957384616,336.0098207032206L424.3846194394256,326.41233460641297L420.3685431403904,330.2683079809617L407.50753689705095,333.46649826744124L405.3082570190076,332.6969966329257L403.1567875730962,337.9005839375345L399.8100573239,341.6181967325017L399.5710051632437,344.5641408949821L403.82613362293523,350.0916847875869L396.7501896674917,350.67889208254246L399.6666260275053,352.49822429245L394.21623676452964,353.8470654885182L389.29176225499793,357.595954453903L393.116596825508,361.8057297236178L400.95750769505287,360.6371660133191L404.87796312982533,362.56495922659315L409.94586893575104,360.05264833014076L409.6590063429627,362.56495922659315L405.54730917966435,366.93995876310737L407.411916032789,368.10514037804023L402.10495806620537,369.85174376690406L393.6903220110838,375.3153794147572L399.37976343471735,380.0703696075009L387.4271554018744,380.7653532171671L381.4030409533214,379.37516457003926L378.63003588970224,385.91292118369597L376.19170385100176,379.8386592068714L356.8762892699278,377.28821911329874L359.3146213086279,381.1706581367978L352.33429821744716,378.7376986157949L349.80034531448473,380.4178890797125L348.1747906220184,389.03026292059826L351.7127625997401,383.13821226276946L354.91606155254203,388.39560930681455L352.33429821744716,389.1456346983923L355.2507345774619,391.7398920623366L357.88030834468714,397.72376972817847L354.6770093918853,397.09163222176176L354.82044068827884,402.08629129163796L359.55367346928466,399.90611559556805L365.4821670535753,399.90611559556805L363.7609914968462,404.2070138827462L365.4821670535749,405.3524976970466L355.2029241453295,406.8979533896311L354.48576766335896,410.84251830208063L356.5894266771395,414.60896862628283L350.6131226607185,415.63506412372385L352.955833835155,417.51499770400824L347.36201327578544,418.5397398643404L349.991587043011,423.71309761698285L346.5970463616825,425.30246076446383L354.4857676633593,426.55044330618057L358.6930856909205,426.0399903046107L355.585407602381,430.29016294135886L360.0317777905985,430.40338897075526L361.8007637794604,427.23086369813973L363.9044227932397,430.06369346945485L364.04785408963374,434.47566688902134L384.74977120251765,432.77979618188374L382.02457657103,435.43608323979333L386.23189459859043,435.2666283053841L384.9410129310428,439.1044233756684L381.5942826818477,437.6942428853497L378.1041211362572,440.9081446895748L374.56614915853504,439.04803340150033L368.2073616850645,449.68032444379674L372.03219625557296,450.0170241726787L367.8248782280126,456.6843794326685L357.49782488763566,467.3441638681759L354.05547377417747,469.29201116404147L361.1314177296198,468.0678485847575L365.91246094275715,465.06023384817104L372.7015423054124,467.1771263477701L378.4387941611771,465.8403755037782L382.980785213657,458.8651354363906L385.0844442274383,462.6623753361173L389.6264352799182,463.7222124536013L384.22385644907223,464.39132358065353L376.1917038510021,467.78953609844166L363.9044227932397,468.2348194087099L361.84857421159074,472.4050344617249L353.6251798849944,476.62292284109026L357.2109622948477,478.5072989276166L355.72883889877494,482.49251028227104L360.1752090869925,484.9244293845354L351.8083834640033,484.64820787898884L351.33027914268786,481.77348300341305L348.9397575361209,485.31108228914036L346.7404776580772,482.9348738609565L337.79992684951065,488.3467505405483L337.8477372816418,492.20439490487774L354.91606155254124,490.8274260155599L354.2467155027022,493.8006214030347L343.82404129806326,497.97846221344366L344.20652475511395,501.9840917257902L340.8597945059189,503.08028121430743L341.5291405557571,508.00654223515835L344.82806037282256,504.8878279332296L349.4656722895652,509.6462393708032L356.1591327879576,506.2562164914241L360.1752090869925,505.5994937047458L353.62517988499474,510.0832906755895L350.2306392036674,515.8662445163059L351.18684784629386,517.5546911123415L355.9678910594321,514.6127102431603L362.94821415061205,513.358479871888L366.1037026712835,511.44853053547445L368.8288973027707,513.1948332337736L359.171190012234,517.772463340174L358.7408961230517,519.7858627081546L366.10370267128235,516.8467864366451L357.2109622948473,522.9927159602926L357.64125618403,525.055744163179L366.05589223915194,521.1452537419636L370.55007285950023,520.1121910626539L371.2194189093396,523.6987002954413L387.5227762661376,517.6091361361632L392.3994403435374,518.5889224132825L392.5906820720625,515.8662445163059L397.4673461494627,516.8467864366451L398.4713652242212,513.0857288849404L404.59110053703665,509.5369633113535L403.7305127586721,504.34023968849647L400.6228346701334,503.1898708121157L408.272503811152,503.1898708121157L406.3122760937665,507.2956363211242L413.2925991849469,506.2562164914241L417.2608650518509,503.35424520809556L419.17328233710515,499.7352327013002L422.4722021541702,500.174211002678L426.58389931746774,497.8686184741621L427.9704018492786,494.6258108000077L425.29301764992096,493.41542923341694L431.36494253060516,491.1028873871576L444.27375920607574,490.44172327784963L445.7558826021485,484.9244293845354L448.00297291232266,489.7803642868396L450.8237884080738,486.69144115822405L457.8041114992546,488.45706106094485L461.4377043412387,486.96741094485833L464.3063302691203,488.3467505405483L465.8840745294558,485.31108228914036L460.3858748343479,479.3381368240184L463.9716572442004,479.39351504667184L469.27861521078364,469.8482267296447L469.0873734822577,463.7222124535999L472.0516202744024,455.28533336221403L475.82864441278093,448.4453216196366L474.1552792881838,446.1418896477853L474.824625338022,440.9081446895748L472.72096632424257,431.8747995238789L469.08737348225844,428.1377647332622L471.95599941014007,426.3235898828134L473.1512602134253,417.23026245229266L468.8483213216009,413.1830416713592L468.2267857038927,401.742197078162L464.8800554546973,400.88172529408325L464.5931928619094,393.8130855428449L470.7607386068556,395.9993285536757L472.29067243505995,394.56125644922645ZM6226.362454264475,-3179.088342010509L6226.362454264475,-2951.9153925611L6226.362454264475,-1719.7771802093757L6226.362454264475,-474.6516832853222L6226.362454264475,824.71878715753L6226.362454264475,1671.767628320085L6226.362454264475,2386.005435590275L6226.362454264475,3100.2432428604648L6226.362454264475,3947.29208402302L6226.362454264475,5246.662554465873L6226.362454264475,7951.099213191059L6226.362454264475,7951.099213191059L-4903.825100937093,7951.099213191059L-4903.825100937093,7951.099213242531L-4903.825100937093,5246.662554465873L-4903.825100937093,3947.29208402302L-4903.825100937093,3100.2432428604648L-4903.825100937093,2386.005435590275L-4903.825100937093,1671.767628320085L-4903.825100937093,824.71878715753L-4903.825100937093,-474.6516832853222L-4903.825100937093,-1719.7771802093757L-4903.825100937093,-2951.9153925611L-4903.825100937093,-3179.088342010509L-4903.825100937093,-3179.088342010509L6226.362454264475,-3179.088342010509ZM353.38612772433765,393.8130855428435L346.21456290463215,393.8130855428449L343.87185173019526,395.59676354182943L349.37005142530245,396.17183376864796L353.38612772433765,400.9391005843438ZM6226.362454264475,-3179.088342010509L6226.362454264475,-2951.9153925611L6226.362454264475,-1719.7771802093757L6226.362454264475,-474.6516832853222L6226.362454264475,824.71878715753L6226.362454264475,1671.767628320085L6226.362454264475,2386.005435590275L6226.362454264475,3100.2432428604648L6226.362454264475,3947.29208402302L6226.362454264475,5246.662554465873L6226.362454264475,7951.099213191059L6226.362454264475,7951.099213191059L-4903.825100937093,7951.099213191059L-4903.825100937093,7951.099213242531L-4903.825100937093,5246.662554465873L-4903.825100937093,3947.29208402302L-4903.825100937093,3100.2432428604648L-4903.825100937093,2386.005435590275L-4903.825100937093,1671.767628320085L-4903.825100937093,824.71878715753L-4903.825100937093,-474.6516832853222L-4903.825100937093,-1719.7771802093757L-4903.825100937093,-2951.9153925611L-4903.825100937093,-3179.088342010509L-4903.825100937093,-3179.088342010509L6226.362454264475,-3179.088342010509Z"36:T27ef,path1_d = "M344.451833356623,529.9399642570168L344.6903722430436,530.6764575721304L346.07105366935764,533.1285181968506L347.90690479319755,535.256554817458L350.1246635176211,536.9784874165039L352.63695069769597,538.2281710658012L355.345553628091,538.9576215724121L358.1449998244334,539.1386290506055L360.926332595695,538.7637396154164L363.5810041199976,537.8465870412444L365.93408436168977,536.7636000741409L368.12763984304985,537.4831526782207L370.83522062444797,537.821371635469L373.558313562962,537.635046364202L376.19700973226844,536.9302740669577L388.65403515411424,532.3306654510186L389.5775570073917,532.5174877933869L392.2315204778133,532.800663615566L394.8926805910119,532.5847699668354L397.46871160385984,531.8765757844637L399.4400441449672,530.9099365414261L399.9577617930592,530.8685034868315L402.53624112610754,530.1613143013906L404.94015689843013,528.9852719734483L407.085248404035,527.3798546744213L408.89553113517104,525.3995327442376L410.3059607756793,523.1121864404049L410.46964537905745,522.6826927133782L411.7215411726924,521.9691661204706L413.43819054691716,520.7485451581858L415.35570541161104,520.4721935852144L418.71040956859304,519.5680855112007L421.7551960788876,517.8856726826814L425.7184205767851,515.0287006420162L427.02917676874995,513.8393612350224L429.51538090826546,512.7903619525598L433.61210725826885,510.52558711064603L436.19387847852386,508.7107553695498L438.3258736969243,506.37714031940027L438.9629239260024,505.26938693962006L444.9440394407816,504.98960533372383L447.9533908961554,504.5375807513567L448.4914898259092,504.3361179183655L448.6202356549103,504.34349310166976L451.4473783743821,503.9483639782336L454.14614198101367,503.0112565242455L454.7072957106896,502.6822717016828L457.257661509272,503.0522616365713L460.3477873991251,502.8432251342101L461.23280890475894,502.5890067749608L463.36281366297356,502.93464183051606L466.1606970029709,502.85010485850535L468.8932625832532,502.235734964273L471.461675102139,501.11256021856616L473.7723808383653,499.5197144887211L475.74035714616423,497.51333274707645L477.29218726532486,495.16487294512376L478.89287626578806,492.1511036548177L480.01960488842536,489.38575463592633L480.56539215495974,486.4442914850049L480.5043647576824,483.44766041153684L479.96470223142774,481.08417433874115L482.2114892348011,477.13197587885134L483.3158735574817,474.70913203605824L483.97098189098847,472.1237537625045L484.1534391547076,469.45844585364307L484.08012279512917,466.10624218856515L485.74901556553675,461.4950158751292L488.9671327623032,455.79051553857175L490.12376756107653,453.20086151174587L490.77554473518853,450.4354286258033L490.8965864680849,447.59176667639304L490.4797837031923,444.7712580482764L489.8361539590537,442.9291557540762L489.8402724261044,442.89918623427866L489.96851885055423,440.21644704153096L489.6198521208284,437.54895680568734L487.5870932795486,428.46249273584726L487.2370457293898,427.3751041840544L488.3766268312553,419.3033016430511L488.5086501537885,416.40319213036537L488.0915076300538,413.5250537769664L487.13743521327467,410.7727270809987L485.67846498788896,408.24645530144767L483.9654428803969,406.26935652834595L483.9154693820124,405.1599595474197L485.6581703862255,403.8013640618485L490.1126797260072,399.5943501422853L491.92331145637536,397.5630796378923L493.3565680395392,395.24516217409064L493.39790525218393,395.141404544627L494.78465571951244,394.38647165683983L498.65048949333766,391.6521610309719L500.88517855484974,389.73886876944766L502.7277539664027,387.4397849486011L502.960759726791,387.0008145681643L503.5746262742837,386.3521841327372L505.17400161558476,383.8537510468707L506.2790361265818,381.09512140151764L508.55143853905116,373.3948473793173L509.1475496031903,370.20448407024355L509.08094038286106,366.9531279968526L508.35055433469466,363.77779275856506L505.16327274220777,354.48681941920245L503.7509820030008,351.462118420716L501.7363032722967,348.7939939585733L500.68735197057777,347.88441857417934L500.5979304021138,347.16677705524717L499.5817486120201,344.13530709652196L497.9808407596323,341.361720727773L495.8570711654367,338.958910856619L493.45925685800853,337.14955843866665L492.7890719316119,335.91687043424645L492.4742875310155,335.4523658594485L492.45157119737064,335.2752373809785L491.377289182307,332.1582742101382L490.69124535944627,331.00468489748573L490.2636374178494,328.1864982705797L489.081832310707,325.0343183627715L487.27002183382535,322.1903590041534L485.9250597526049,320.4999852333531L485.5935396532808,319.2268597139264L484.1943239130661,316.34379262423454L482.2533341044136,313.7878322197357L479.8447692272863,311.6608743760107L477.0622469065602,310.048207789815L474.015051399561,309.01468081915345L470.82357272020255,308.60175554722673L467.6141680414952,308.82563700788705L464.51372476738516,309.6765958473684L461.64422830464935,311.11951993942694L460.8676697223047,311.72630725987165L459.8983094887665,311.70803472346915L457.06182750906737,312.16019413345657L454.3515995430164,313.1051679935417L452.9890678351771,313.72108585249134L449.1414506629472,310.5212705546287L445.4968559191782,308.2392458952436L439.6132572329783,305.579944982966L436.5230515531583,304.5488450738244L433.2888054853943,304.155523402419L430.04207986553195,304.4158182079468L426.9147395294193,305.31821833350386L424.0331540608474,306.82451805123173L421.5127447891769,308.8717440653372L419.8364971102787,310.9088697111433L418.3754716675846,311.3363576137858L415.58061433474074,312.7897743823869L413.1238471343904,314.75490802679224L412.2427992520794,315.61334221896186L407.76083160563456,316.7471208019206L407.665121353522,316.7235895283784L404.6023594313609,316.5678164688393L401.5669770889444,316.99659905551516L398.6703814660019,317.9932043006188L396.018273878633,319.5196062937521L393.7065518968331,321.5182008988768L391.8177208955189,323.91431325526946L390.41796550665475,326.61934053474897L389.34736616263996,329.2813014817448L387.8567228630766,330.9673997849891L386.9589932136031,332.2387564240321L385.5179636400369,334.06860583962L384.09694947024906,336.86554342474574L383.25176000071906,339.8804962729175L383.0587561358511,342.3844647223741L379.63074492112753,345.03629627102146L377.2570347735432,347.308644534485L375.40777011435995,350.01789595766127L374.1599283583469,353.04457216235824L373.5635106684558,356.2567959149303L373.63999241659155,359.5163258238565L374.3820954930985,362.6845894732446L374.94616820845255,363.8932166333018L358.8220215190504,361.78777672944307L355.6065956247315,361.7201076034685L352.44760146199127,362.3151164673229L349.82808221539983,363.4015154020801L348.9383046196027,363.51723688098036L346.2079265300552,364.40387511652943L343.6898552099784,365.77654492188026L341.1490261490975,367.486301394762L338.7590783708286,369.47260920265444L336.81605859069924,371.8914534903977L335.39567862973263,374.6435291485095L334.5517245118922,377.6171211318922L333.32406613868403,384.49404217747247L332.2675414839491,385.4962272064099L330.508539758157,388.0017515135612L329.2836307392311,390.80120752027756L328.6383627957382,393.78197868066695L328.5948111735592,396.82555000509615L329.15124285237374,399.8123099460613L330.2827221083954,402.62617847159504L331.9425498678469,405.1588981144305L334.0644124352755,407.31386753990796L335.9736231387254,408.60780062754407L334.4962169907883,410.5265274649471L333.13843564591537,413.344930206958L332.390175025395,416.37619142743483L332.2796206019107,419.49024335184436L332.4054184747976,420.2192233120545L332.3994301797312,420.2320683978455L331.697750867704,423.0976105614802L331.567730981256,426.0393623575576L332.01113421769486,428.94492791989L333.00812492466054,431.70449744511757L334.51845260514614,434.21481754871184L336.4832942557745,436.3827703247673L338.8276424560832,438.12848233386285L341.4631313310817,439.38791272172466L344.2912020211143,440.1148896756383L344.35407104667706,440.1246845540629L344.710346628969,440.5819626605369L344.90152347933997,440.7466784259832L345.2034358015645,443.01205798177284L346.14361466741553,445.77347632782835L347.5995203737558,448.2960766850606L349.51414849084546,450.4858922882793L351.6454463557622,452.13148674261583L348.33990723249985,455.60550809151846L346.7572116708659,456.51506572101925L344.36428978603726,458.2331044906705L342.36577187114455,460.39130891236664L340.8404314924443,462.90049707726916L339.8470145469431,465.6581011208457L339.4222321260391,468.55266110575485L339.5174732390167,470.3126973510316L339.1864204198647,470.4728173833537L330.21736888372476,475.9796430952654L327.8345269595137,477.8194159467537L325.8870962282495,480.1088813147885L324.4572556448451,482.7466088817682L323.60376241680103,485.61704797171046L323.35987046516624,488.5959097847385L323.44307893992476,492.44566558118754L323.8075800606414,495.37385302515577L324.7582963122456,498.1618152402134L326.25293117962707,500.694718935172L326.7261679015087,501.2152461998794L326.56725430759275,502.2474394857743L326.69582257845923,505.0760917875309L327.40651606500455,509.9814438282192L328.08749003461963,512.7318371949102L329.29569920552154,515.2897892440601L330.9817627068374,517.5565361706147L333.0785029827695,519.4452071214494L335.5036470446767,520.8837984365116L337.299591707385,521.5138277115411L337.91748730806887,522.9033553926574L338.87966017568004,524.5749021586753L340.53053066647306,526.8787370993703L342.60318315779654,528.8072367842897ZM6226.362454264475,-3179.088342010509L6226.362454264475,-2951.9153925611L6226.362454264475,-1719.7771802093757L6226.362454264475,-474.6516832853222L6226.362454264475,824.71878715753L6226.362454264475,1671.767628320085L6226.362454264475,2386.005435590275L6226.362454264475,3100.2432428604648L6226.362454264475,3947.29208402302L6226.362454264475,5246.662554465873L6226.362454264475,7951.099213191059L6226.362454264475,7951.099213191059L-4903.825100937093,7951.099213191059L-4903.825100937093,7951.099213242531L-4903.825100937093,5246.662554465873L-4903.825100937093,3947.29208402302L-4903.825100937093,3100.2432428604648L-4903.825100937093,2386.005435590275L-4903.825100937093,1671.767628320085L-4903.825100937093,824.71878715753L-4903.825100937093,-474.6516832853222L-4903.825100937093,-1719.7771802093757L-4903.825100937093,-2951.9153925611L-4903.825100937093,-3179.088342010509L-4903.825100937093,-3179.088342010509L6226.362454264475,-3179.088342010509Z"37:T126b,path2_d = "M299.4742685511093,568.6443306679387L308.02900537039363,578.1135448860225L319.39350714106865,586.6361007332996L332.132019013148,592.8204231633349L345.7943505120474,596.4678315891795L359.9067361184719,597.4554118162002L370.0729261477674,596.202247703239L382.75871508728693,595.4692362727089L396.173435568515,592.1297144506871L399.2675162126088,591.0484574921406L404.7159753199483,590.6793630221819L417.81686766731696,587.3208827093829L419.3434620589709,586.6104964587264L422.8813691638088,585.7165790178765L435.2321494610943,580.0268889194069L446.4129876401329,572.1455857654178L446.61074535690534,571.9420675706729L456.1784453508319,566.9811317571525L458.0702495652374,565.6954817064477L462.03247736182806,563.6327007748891L462.6814035744213,563.1998525892836L473.37158054014753,562.9860024047948L487.23953536822705,560.0995993676477L500.3996071278522,554.6895025673259L512.403831369837,546.8961733596523L522.8231404333135,536.9375730248753L531.2605555800533,525.1101547270041L532.9530856921516,522.1909054699961L539.3523422986591,508.04882162240165L541.8100723251443,497.1780868917933L542.0733391997777,496.655480970006L546.0216977677048,483.291144696595L546.0940955884075,482.6223056631934L549.9839318111614,474.7482415958352L553.959379794645,460.4382206259015L555.1851806164054,445.4995068160174L554.5083351542145,439.26307279157254L554.5458144743772,438.8324359378016L553.6446784282227,429.00367329617984L554.7751140639444,427.8919527347832L556.1749180067595,425.86927555843886L557.1547270477134,424.736829781569L558.1538078760939,423.01423621330014L563.498344977317,415.32912614009115L569.8035465649549,401.2443909729843L572.376097583992,393.679898444366L576.17901451215,377.12553263010045L576.5238995466902,359.9668381435854L573.2888881438446,342.935425466849L570.3898302128081,333.3442139313597L563.3826642351921,316.87194815694966L562.0340048152808,314.9597394529296L554.9317647148176,301.68031937934984L554.0104689392759,300.57135928506887L552.1217205894803,294.93655565902145L547.9542579203861,287.87588749291035L544.699648236764,280.5519378156587L534.6319846522292,266.43815957709194L521.82248272175,254.58471533907414L506.78752570328777,245.5542380015013L490.1709961968317,239.78351040985626L472.7092153327971,237.55026290785963L461.49114666308265,238.42614891647963L452.2253203581393,235.28444596645613L434.52549587201554,233.16082046880592L416.797953041764,234.76901123701236L399.85440311883417,240.00680040645148L384.449346661419,248.58657507860426L383.5661706569978,249.3484162970767L368.95434200285126,254.72283679235397L354.8245987819802,263.38587220936324L342.7477399255943,274.55836069416046L333.14649909672124,287.7444139087793L330.08764467347055,294.29196682578186L327.1235128399256,298.3792264412814L326.35818066811254,300.04712223046135L318.77951595348355,302.69302661438223L305.3431117324061,310.48627777955517L302.7755646632967,312.32690506075505L290.26174293478005,323.43313625272003L280.36419665440826,336.74102008987757L273.4284836826943,351.62841348507277L271.4267185690103,359.998057350022L266.7484112927148,372.0117222364763L264.02094398881417,387.7714699577202L264.44460963311417,403.5966315182625L267.9099899258955,418.88512204464064L268.4019947604176,419.9875794222269L268.3618475340724,430.70625003570694L271.2296375092993,445.6175639700243L272.61748489853267,449.0556109667748L267.0783531157668,460.2910426609135L263.19707882308484,475.54654509613283L262.5417280771116,491.11341205559006L262.7729816454004,494.9235522894551L265.2257826276091,509.98525495433023L267.6675586562279,516.3917090167281L268.2622410748372,519.6429587428329L272.26773534373154,533.6720451242838L278.8538715259127,546.5576884201262L287.72664729664604,557.862639841444L295.5839906135922,564.6501546665966L296.80379942458,566.2719640620435ZM6226.362454264475,-3179.088342010509L6226.362454264475,-2951.9153925611L6226.362454264475,-1719.7771802093757L6226.362454264475,-474.6516832853222L6226.362454264475,824.71878715753L6226.362454264475,1671.767628320085L6226.362454264475,2386.005435590275L6226.362454264475,3100.2432428604648L6226.362454264475,3947.29208402302L6226.362454264475,5246.662554465873L6226.362454264475,7951.099213191059L6226.362454264475,7951.099213191059L-4903.825100937093,7951.099213191059L-4903.825100937093,7951.099213242531L-4903.825100937093,5246.662554465873L-4903.825100937093,3947.29208402302L-4903.825100937093,3100.2432428604648L-4903.825100937093,2386.005435590275L-4903.825100937093,1671.767628320085L-4903.825100937093,824.71878715753L-4903.825100937093,-474.6516832853222L-4903.825100937093,-1719.7771802093757L-4903.825100937093,-2951.9153925611L-4903.825100937093,-3179.088342010509L-4903.825100937093,-3179.088342010509L6226.362454264475,-3179.088342010509Z"38:T1613,async function* draw_animated_map( buffered_polygons, // waterlines geojson to be drawn in the centre polygon_orig, // original geojson to be drawn at the centre waterline_index_start = 10, // the waterline index to start animating from upwards reverse = false // waterlines direction of travel ) { ///////////////////// /// Define scales /// ///////////////////// const opacity = d3 .scalePow() .exponent(1) .domain([0, buffered_polygons.length - 1]) .range([1, 0]); const stroke_width = d3 .scalePow() .exponent(3) .domain([0, buffered_polygons.length - 1]) .range([1.4, 0.3]); // Define geo path generator and projection const geoGenerator = d3 .geoPath() .projection( d3 .geoMercator() .fitSize([width, 600], buffered_polygons[buffered_polygons.length - 1]) ); // To avoid the problems with morphing between multi-part paths (separate islands), // only keep the longest path let buffered_polygon_paths = []; for (let i = 0; i < buffered_polygons.length; i++) { let buffer_path = geoGenerator(buffered_polygons[i]); let buffer_path_array = buffer_path.split("M"); buffer_path_array.sort(function(a, b) { return b.length - a.length; }); let buffer_path_longest = "M" + buffer_path_array[0]; buffered_polygon_paths.push(buffer_path_longest); } ///////////////////////// /// Draw original map /// ///////////////////////// const svg = d3 .select(DOM.svg(width, 600)) .style("width", "100%") .style("height", "auto"); const g = svg.append("g"); g.selectAll('path.waterLines') .data(buffered_polygons) .enter() .append('g') // create g wrappers for the paths so we can apply concurrent animations (path and opacity) below .attr('class', 'waterLine_g') .attr('opacity', 1) .append('path') .attr("d", geoGenerator) .attr("class", "waterLines") .style('fill', 'none') .style("stroke", 'teal'); g.append("path") // draw the original polygon on top of the waterlines .datum(polygon_orig) .attr("d", geoGenerator) .attr("class", "land") .style("fill", 'white') .style("stroke", 'teal'); /////////////////////////// /// Define transitions /// ////////////////////////// let n = waterline_index_start; // for waterlines emitting outwards if (!reverse) { while (true) { // remove the final waterline g.selectAll('g.waterLine_g') .filter((d, i) => i == buffered_polygons.length - 1) .remove(); // create a new nth waterline let n_plus_1th_DOM_node = g .selectAll('g.waterLine_g') .filter((d, i) => i == n) .node(); g.insert('g') // make the nth child .each(function() { this.parentNode.insertBefore(this, n_plus_1th_DOM_node); }) .attr('class', 'waterLine_g') .insert('path') .datum(buffered_polygons[n]) .attr("d", geoGenerator) .attr("class", "waterLines") .attr('id', 'new') .style('fill', 'none') .style("stroke", 'teal'); // Transition the waterline paths g.selectAll('path.waterLines') .filter((d, i) => i > n) // don't include waterlines before n .transition() .duration(animation_interval) .ease(d3.easeLinear) .attrTween('d', function(d, i) { var startPath = buffered_polygon_paths[i + n], endPath = buffered_polygon_paths[i + 1 + n]; return flubber.interpolate(startPath, endPath); }); //Transition the (new) final waterline, fade it out, and remove // apply this transition to the parent g element, rather than the path element to avoid clashing animations https://bl.ocks.org/mbostock/6081914 g.selectAll('g.waterLine_g') .filter((d, i) => i == buffered_polygons.length - 1) .transition() .duration(animation_interval) .ease(d3.easeLinear) .style('opacity', 0) .remove(); await Promises.tick(animation_interval); yield svg.node(); } } // waterlines going inwards else { while (true) { // remove the n + 1th waterline g.selectAll('g.waterLine_g') .filter((d, i) => i == n + 1) .remove(); // create new final waterline g.append('g') .attr('class', 'waterLine_g') .append('path') .datum(buffered_polygons[buffered_polygons.length - 1]) .attr("d", geoGenerator) .attr("class", "waterLines") .style('fill', 'none') .style("stroke", 'teal') .style('opacity', 1); // Transition the waterline paths g.selectAll('path.waterLines') .filter((d, i) => i > n) // don't include waterlines before n .transition() .duration(animation_interval) .ease(d3.easeLinear) .attrTween('d', function(d, i) { var startPath = buffered_polygon_paths[i + n + 1], endPath = buffered_polygon_paths[i + n]; return flubber.interpolate(startPath, endPath); }); //Transition the (new) final waterline, fade it in // apply this transition to the parent g element, rather than the path element to avoid clashing animations https://bl.ocks.org/mbostock/6081914 g.selectAll('g.waterLine_g') .filter((d, i) => i == buffered_polygons.length - 1) .style('opacity', 0) .transition() .duration(animation_interval) .ease(d3.easeLinear) .style('opacity', 1); await Promises.tick(animation_interval); yield svg.node(); } } }39:[{"id":"27ec1e6caf55ce2d9b2dfaef66203c08d178fefed686bd9858a40c5646979065e0f1862976ec7724bca725ac6a6e33cdf1cba065c3fc5ba5851a821676b84fbd","href":"https://static.observableusercontent.com/files/27ec1e6caf55ce2d9b2dfaef66203c08d178fefed686bd9858a40c5646979065e0f1862976ec7724bca725ac6a6e33cdf1cba065c3fc5ba5851a821676b84fbd","name":"waterlines-animated-crop2@2.gif","type":"image/gif","lastModified":1611682614810.223,"size":522309},{"id":"270090e413104bc28b6718befd1eb0beaad07a0264e2df16c73f975023b9ef7c779be1df6e0192ac74f2654d207d963e8d6f5deb6e0dc6f9fa5df9d63b601cb2","href":"https://static.observableusercontent.com/files/270090e413104bc28b6718befd1eb0beaad07a0264e2df16c73f975023b9ef7c779be1df6e0192ac74f2654d207d963e8d6f5deb6e0dc6f9fa5df9d63b601cb2","name":"untitled (3).svg","type":"image/svg+xml","lastModified":1609970986336.766,"size":1099605},{"id":"97296162b9690fe6715c238233514d07112ba7fc8058dd3fe28c655d97cff4b1d0b1270542dd36a30b344ee904a639079c2477fd1456617289945d4ee7154e95","href":"https://static.observableusercontent.com/files/97296162b9690fe6715c238233514d07112ba7fc8058dd3fe28c655d97cff4b1d0b1270542dd36a30b344ee904a639079c2477fd1456617289945d4ee7154e95","name":"iceland.geojson","type":"application/geo+json","lastModified":1612738429557.04,"size":43529}] 2f:{"title":"III: Animating waterlines - SVG morphing","cells":[{"id":2997,"value":"md`# III: Animating waterlines - SVG morphing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3246,"value":"FileAttachment(\"waterlines-animated-crop2@2.gif\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3984,"value":"md`> \"*Waterlines make water look more like it should. Water in the real world moves\nwith the wind, whereas your average cyan lake polygon on a map just sits there,\nuncannily immune to nature. Waterlines are evocative of waves washing up\non the shore, and adding them to a map restores a bit of the dynamism that a reader would expect to see if they were out observing an actual lake. This makes water features easier to interpret by giving the reader a sense of realistic motion, letting them look through the map and perceive, in their mind’s eye,\na moving, living lake.*\"\n\n> Huffman, D.P., 2010. On waterlines: arguments for their Employment, Advice on their Generation. *Cartographic Perspectives*, (66), pp.24-5.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"md`If waterlines are a good graphic device because they give a sense of movement, we can take this further and actually make them move, as if they are ripples floating away from the shore.\n\nJust like drawing static waterlines, you can approach this with buffered paths or increasing stroke widths. This time, we'll start with buffered paths—treating it as a problem of SVG shape morphing. Then in the final notebook, we'll look at the strokes method, generating a series of image frames like a gif (which works better).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2032,"value":"md`## SVG path interpolation / shape morphing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2382,"value":"md`\nOne of the great things about the D3 library is how well it supports transitions or animations. D3 calculates the intermediate values (or frames) between two states (colours, opacities, distances, etc.) for you: ['tweening'](https://en.wikipedia.org/wiki/Inbetweening). Use [transition()](https://github.com/d3/d3-transition) on a D3 selection, stating beneath this the attribute you want it to apply to. For example, a \\`\\`\\`\\` element's \\`\\`width\\`\\` and \\`\\`fill\\`\\` attributes:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2384,"value":"viewof animate_rect = {\n const svg = d3\n .select(DOM.svg(width, 40))\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n let rect = svg\n .append('rect')\n .attr('width', 500)\n .attr('height', 40)\n .attr('x', 0)\n .attr('y', 0);\n function bigger() {\n rect\n .transition()\n .duration(1000)\n .attr('width', 700)\n .attr('fill', 'darkblue')\n .on('end', smaller);\n }\n function smaller() {\n rect\n .transition()\n .duration(1000)\n .attr('width', 500)\n .attr('fill', 'lightblue')\n .on('end', bigger);\n }\n bigger();\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2398,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2240,"value":"// 'Wait until' button from https://observablehq.com/@mbostock/wait-until-button\nviewof button_NaiveMorph = html`

${Object.assign(\n html`