Coördinator Transitions

.block

height: 800

README.md

Some sample code that demonstrates how you can transition between the dots you generate with Coördinator.

The guts of the code comes from Peter Beshai's excellent tutorial on animating dots, where I first learned how to do dot animation. Thank you Peter! https://bocoup.com/blog/smoothly-animate-thousands-of-points-with-html5-canvas-and-d3

If you generate different coordinates on Coördinator, you should just be able to replace the coordinates.json file with your coordinates and see the transitions. This example only handles examples where each of your shapes has the same number of coordinates, but could be easily altered to handle a discrepency. It also cycles through different eases.

coordinates.json

{
"thing 1": [[591.7699890136719,329.3479919433594],[586.7442474365234,320.7174530029297],[581.0932006835938,312.4783020019531],[575.1110534667969,304.4755401611328],[568.9042358398438,296.64544677734375],[562.5244293212891,288.9555892944336],[555.9980926513672,281.3896026611328],[549.3388671875,273.94029998779297],[542.5514678955078,266.6076354980469],[535.6327362060547,259.3987503051758],[528.5715942382812,252.32941436767578],[521.3451080322266,245.4292449951172],[513.9104309082031,238.75436401367188],[506.18145751953125,232.42388153076172],[497.9414367675781,226.7846450805664],[493.1193084716797,220.52841186523438],[495.62693786621094,210.85757064819336],[497.5863494873047,201.06097030639648],[498.9849548339844,191.16874313354492],[499.81565856933594,181.21273803710938],[500.07708740234375,171.22557067871094],[499.76356506347656,161.23997116088867],[498.8401641845703,151.2924461364746],[497.2659606933594,141.42719268798828],[495.00433349609375,131.69680786132812],[492.02488708496094,122.16195678710938],[488.3047332763672,112.89126968383789],[483.8296813964844,103.9607925415039],[478.5927734375,95.45506286621094],[472.5887908935547,87.47299766540527],[465.79283142089844,80.1552562713623],[458.2231140136719,77.83876609802246],[451.3427429199219,85.07632446289062],[445.2511901855469,92.99203681945801],[439.8952178955078,101.42359161376953],[435.2648468017578,110.27475547790527],[431.35618591308594,119.46773147583008],[428.16236877441406,128.9330596923828],[425.66966247558594,138.60693359375],[423.85755920410156,148.4312629699707],[422.69822692871094,158.35403442382812],[422.15879821777344,168.32991790771484],[422.2044372558594,178.32038116455078],[422.82337951660156,188.29175567626953],[424.01210021972656,198.2114143371582],[425.7634582519531,208.04734802246094],[428.0644989013672,217.76944732666016],[422.0479278564453,222.35591888427734],[415.71893310546875,220.1214828491211],[413.20338439941406,210.45261001586914],[410.1522521972656,200.9393081665039],[406.56842041015625,191.61357498168945],[402.459716796875,182.50691604614258],[397.8377685546875,173.64974975585938],[392.7187805175781,165.07015991210938],[387.1117477416992,156.80148315429688],[381.0055465698242,148.8945083618164],[374.3901062011719,141.4087791442871],[367.26318359375,134.4086570739746],[359.6320114135742,127.96231460571289],[351.5150375366211,122.14002990722656],[342.9413299560547,117.01453018188477],[333.95140075683594,112.66114044189453],[324.59356689453125,109.16953086853027],[314.9214096069336,106.68426895141602],[308.12357330322266,110.08691787719727],[306.2503356933594,119.89627838134766],[305.37957763671875,129.84659576416016],[305.39681243896484,139.8355369567871],[306.24603271484375,149.78858947753906],[307.8835906982422,159.64287948608398],[310.26636505126953,169.34421920776367],[313.3489685058594,178.8465461730957],[317.08255767822266,188.1127586364746],[321.41593170166016,197.1142349243164],[326.29752349853516,205.83086776733398],[331.67784881591797,214.24899291992188],[337.52989959716797,222.34635162353516],[343.83424377441406,230.0966567993164],[350.56890869140625,237.47603607177734],[357.7088088989258,244.46434783935547],[365.22689056396484,251.0439682006836],[373.09566497802734,257.20015716552734],[380.73006439208984,263.10107421875],[377.7938995361328,272.6471176147461],[371.8725891113281,272.5800552368164],[363.5384521484375,267.07027435302734],[354.9248733520508,262.00811767578125],[346.0599822998047,257.40040588378906],[336.9702606201172,253.2536849975586],[327.68223571777344,249.57262420654297],[318.22145080566406,246.36132049560547],[308.6130599975586,243.6227264404297],[298.88182830810547,241.35926818847656],[289.0521774291992,239.5712432861328],[279.1477737426758,238.25853729248047],[269.19210052490234,237.41961669921875],[259.20772552490234,237.05148315429688],[249.21717071533203,237.15015411376953],[239.2420883178711,237.7160186767578],[229.30513763427734,238.75337982177734],[219.42913818359375,240.2649383544922],[209.63748168945312,242.25112915039062],[199.9546012878418,244.71309661865234],[190.40468978881836,247.64868927001953],[181.01291275024414,251.0563735961914],[171.80475616455078,254.93301391601562],[162.8061294555664,259.27396392822266],[154.04390335083008,264.07386779785156],[145.54542922973633,269.32677459716797],[137.339111328125,275.0249710083008],[129.4535369873047,281.15950775146484],[121.91910171508789,287.72054290771484],[114.76655006408691,294.69569396972656],[108.0279483795166,302.07152557373047],[101.73530006408691,309.8310546875],[95.92151832580566,317.95567321777344],[90.61984252929688,326.4232711791992],[85.86211013793945,335.2079391479492],[79.2756290435791,337.34285736083984],[69.50605392456055,335.618896484375],[59.913350105285645,338.1150360107422],[52.15889930725098,344.3108444213867],[47.32365608215332,352.98523712158203],[46.15491962432861,362.84178161621094],[48.899155616760254,372.38336181640625],[55.02856254577637,380.19683837890625],[63.69694995880127,385.0200424194336],[69.83750915527344,389.09102630615234],[67.89340114593506,398.884033203125],[66.96266460418701,408.8321990966797],[66.26050090789795,418.7993621826172],[65.7549295425415,428.77838134765625],[65.44372177124023,438.76531982421875],[65.33650779724121,448.7565612792969],[65.44646549224854,458.74766540527344],[65.79753017425537,468.7333221435547],[66.41775703430176,478.7056579589844],[67.34498023986816,488.6540069580078],[68.62902450561523,498.56248474121094],[70.33610534667969,508.40655517578125],[72.55578994750977,518.1475830078125],[75.41056442260742,527.7206115722656],[79.07015609741211,537.0139923095703],[83.76596450805664,545.825439453125],[89.7840805053711,553.7838439941406],[97.35901641845703,560.2608795166016],[106.38390159606934,564.4679107666016],[116.22900772094727,565.9886016845703],[126.22101593017578,566],[136.2129898071289,566],[146.2050552368164,566],[156.19702911376953,566],[166.18900299072266,566],[176.18106842041016,566],[186.1729507446289,566],[196.1650161743164,566],[206.15689849853516,566],[216.14896392822266,566],[226.14102935791016,566],[236.1329116821289,566],[246.1249771118164,566],[256.11685943603516,566],[266.10892486572266,566],[276.10099029541016,566],[286.0928726196289,566],[296.0849380493164,566],[301.4155960083008,561.7408294677734],[297.8159713745117,552.4902496337891],[291.1748733520508,545.0780487060547],[282.8695297241211,539.5537567138672],[273.7573776245117,535.4721069335938],[264.23687744140625,532.4519653320312],[254.49463653564453,530.2419281005859],[244.62632751464844,528.6846618652344],[234.68582916259766,527.6844024658203],[224.70699310302734,527.1898803710938],[220.18106079101562,526.0540771484375],[229.2045440673828,521.7688140869141],[237.85437774658203,516.7720947265625],[246.0748062133789,511.09669494628906],[253.81371307373047,504.7804718017578],[261.0210876464844,497.8639373779297],[267.6495056152344,490.390625],[273.65465545654297,482.407958984375],[278.99478912353516,473.96592712402344],[283.63170623779297,465.11822509765625],[287.53228759765625,455.9220733642578],[290.66844940185547,446.4379425048828],[293.0189514160156,436.72900390625],[294.5714797973633,426.8614044189453],[295.3220748901367,416.90028381347656],[295.2767791748047,406.9110565185547],[294.43467712402344,396.9573059082031],[292.7920608520508,387.10394287109375],[290.3541030883789,377.4168167114258],[287.1347427368164,367.96063232421875],[283.15563201904297,358.7982406616211],[278.4457702636719,349.9890823364258],[273.0375213623047,341.5902633666992],[266.96993255615234,333.6552963256836],[260.2833786010742,326.23384857177734],[253.02194213867188,319.3740768432617],[245.2328872680664,313.11985778808594],[236.96588134765625,307.51220703125],[228.27359008789062,302.5903091430664],[219.21128845214844,298.38787841796875],[209.83802795410156,294.93444061279297],[200.21526336669922,292.25343322753906],[190.4066925048828,290.36122131347656],[181.85412216186523,289.26480865478516],[191.83935546875,288.9732360839844],[201.81648635864258,289.46114349365234],[211.72252655029297,290.7485580444336],[221.49191284179688,292.83385467529297],[231.05896759033203,295.7063446044922],[240.36095428466797,299.3478317260742],[249.33657836914062,303.7321090698242],[257.9280700683594,308.8283004760742],[266.0809097290039,314.6006088256836],[273.74332427978516,321.0093460083008],[280.86692810058594,328.01219177246094],[287.40599060058594,335.56375885009766],[293.3174819946289,343.6162338256836],[298.5613250732422,352.1184616088867],[303.1008529663086,361.01649475097656],[306.9040222167969,370.2533874511719],[309.94398498535156,379.7688293457031],[312.2004852294922,389.4998550415039],[313.66104888916016,399.3817825317383],[314.3223342895508,409.34906005859375],[314.2061309814453,419.3382873535156],[313.3496780395508,429.2908935546875],[311.71871185302734,439.1460876464844],[309.28375244140625,448.8340606689453],[306.02703857421875,458.2769012451172],[301.9468078613281,467.3940887451172],[297.05823516845703,476.1043701171875],[291.39439392089844,484.3319396972656],[285.00440216064453,492.00909423828125],[277.94969177246094,499.0803527832031],[270.3016052246094,505.5056610107422],[262.13512420654297,511.25823974609375],[253.52660369873047,516.3255462646484],[244.54901123046875,520.70703125],[244.99798583984375,522.6557312011719],[254.97618103027344,523.1535491943359],[264.90484619140625,524.2608795166016],[274.73728942871094,526.0275268554688],[284.4027633666992,528.5489349365234],[293.78245544433594,531.9786376953125],[302.6614685058594,536.5431365966797],[310.6337432861328,542.5389709472656],[316.98038482666016,550.2164459228516],[322.5601119995117,556.0634613037109],[331.94087982177734,552.6261138916016],[341.1307830810547,548.7065124511719],[350.1040725708008,544.3131256103516],[358.83538818359375,539.4574432373047],[367.29991912841797,534.1500396728516],[375.4713668823242,528.4019470214844],[383.32421112060547,522.2254333496094],[390.8313980102539,515.6330413818359],[397.96484375,508.63832092285156],[404.6946105957031,504.9378967285156],[411.2626953125,512.4676513671875],[417.83091735839844,519.9975891113281],[424.3991394042969,527.5275268554688],[430.96726989746094,535.0573272705078],[437.5354919433594,542.5872650146484],[444.10357666015625,550.1170654296875],[450.6717987060547,557.6469573974609],[457.2400207519531,565.1768951416016],[466.8576354980469,566],[476.8497009277344,566],[486.8415832519531,566],[496.8336486816406,566],[506.8257141113281,566],[516.8175964355469,566],[526.8096618652344,566],[530.3993988037109,558.8936767578125],[528.8008422851562,549.0879211425781],[523.4002838134766,540.7749328613281],[515.2272796630859,535.1046142578125],[505.83799743652344,531.7388610839844],[496.00852966308594,529.9884185791016],[486.037841796875,529.4109954833984],[478.10479736328125,527.1965179443359],[476.2844543457031,517.3718566894531],[474.4640655517578,507.54701232910156],[472.6437225341797,497.72235107421875],[478.874755859375,491.1739501953125],[486.4937744140625,484.7159118652344],[493.4033966064453,477.5046691894531],[499.4949493408203,469.590576171875],[504.6870880126953,461.05950927734375],[508.9325714111328,452.0193634033203],[512.2222442626953,442.5890197753906],[514.5783538818359,432.8826446533203],[516.0411834716797,423.0015869140625],[516.6562805175781,413.0315856933594],[516.4580230712891,403.0442123413086],[515.4397277832031,393.10728454589844],[518.6825256347656,387.38734436035156],[528.6263427734375,386.44810485839844],[538.4341125488281,384.55811309814453],[548.0250854492188,381.76831817626953],[557.317138671875,378.10433197021484],[566.2127227783203,373.56251525878906],[574.5723571777344,368.100341796875],[582.1690368652344,361.62223052978516],[588.5776824951172,353.9773483276367],[592.9320678710938,345.0261688232422],[593.6643524169922,335.1475372314453],[517.1840362548828,321.25516510009766],[510.12632751464844,314.6090087890625],[510.46278381347656,304.92002868652344],[517.9642944335938,298.7801818847656],[527.52587890625,300.3759002685547],[532.6324157714844,308.61427307128906],[529.8119964599609,317.88790130615234]]
"thing 2": [[523.1431579589844,255.1704559326172],[523.7041015625,232.36405181884766],[517.8665161132812,210.31041717529297],[506.10350036621094,190.76207733154297],[489.3970489501953,175.22335815429688],[469.0442810058594,164.9155158996582],[455.4783630371094,149.64422225952148],[432.8468933105469,148.0943832397461],[411.2436065673828,146.8093490600586],[396.22735595703125,131.8726806640625],[374.2899932861328,125.37181854248047],[351.8007049560547,121.1646499633789],[328.9915771484375,119.37966918945312],[306.1238327026367,120.08431625366211],[283.47240447998047,123.2978630065918],[261.32840728759766,129.0433692932129],[241.33116149902344,139.30223083496094],[225.27562713623047,148.0943832397461],[202.38561248779297,148.0943832397461],[187.1792984008789,161.33271408081055],[165.21354293823242,167.49338912963867],[145.8344841003418,179.53376388549805],[130.53279495239258,196.45752716064453],[120.5201530456543,216.95687103271484],[116.6390151977539,239.4380111694336],[115.07354927062988,261.8842239379883],[109.45083236694336,284.0641098022461],[105.9215259552002,306.67225646972656],[104.43574523925781,329.50662994384766],[104.90103340148926,352.38533782958984],[107.19925880432129,375.1539535522461],[111.20613288879395,397.6853332519531],[116.80696868896484,419.8747863769531],[126.19811630249023,440.4505310058594],[146.89268493652344,448.5019989013672],[166.69500350952148,438.48699951171875],[175.57177352905273,417.5204162597656],[183.04062271118164,395.88311767578125],[190.50944900512695,374.24588775634766],[197.97826385498047,352.60865783691406],[205.44709014892578,330.97142791748047],[224.03602600097656,329.54842376708984],[245.33716583251953,337.43880462646484],[259.7001419067383,354.8804702758789],[265.02054595947266,377.0938415527344],[269.4289245605469,399.5553436279297],[273.8373260498047,422.016845703125],[278.2457046508789,444.4783477783203],[282.6541290283203,466.93994140625],[287.06250762939453,489.4013977050781],[291.8211898803711,511.77757263183594],[305.7012023925781,529.4063720703125],[327.58731842041016,534.6681365966797],[348.32847595214844,525.9623870849609],[359.07521057128906,506.232177734375],[363.02996826171875,483.6863098144531],[366.9830551147461,461.14012145996094],[370.93611907958984,438.5940246582031],[374.8891830444336,416.0479736328125],[378.84224700927734,393.5018768310547],[382.7953338623047,370.9556884765625],[389.6196517944336,349.30294036865234],[406.4192810058594,334.19861602783203],[428.39752197265625,327.9863510131836],[439.24977111816406,343.4733200073242],[446.7185516357422,365.1105499267578],[454.1873779296875,386.7477798461914],[461.6562042236328,408.3851013183594],[469.1250305175781,430.0223083496094],[484.1065368652344,446.4049835205078],[506.3497314453125,446.01780700683594],[520.75537109375,429.11964416503906],[526.9994964599609,407.1024932861328],[531.6888275146484,384.70269775390625],[534.7205047607422,362.02000427246094],[535.9729919433594,339.1704559326172],[535.3223724365234,316.29673767089844],[532.6633605957031,293.56968688964844],[527.9267425537109,271.1836471557617],[446.161865234375,160.66939163208008],[423.2729034423828,160.6019172668457],[417.1374969482422,158.1732521057129],[440.0275115966797,158.1732521057129],[209.27511596679688,158.1732521057129],[232.16513061523438,158.1732521057129],[227.6877670288086,160.6019172668457],[204.7977523803711,160.6019172668457],[154.7407569885254,435.90773010253906],[133.58811569213867,433.6326446533203],[125.22350311279297,412.5844421386719],[119.97786331176758,390.30870056152344],[116.40658569335938,367.70469665527344],[114.63933753967285,344.8895263671875],[114.81255531311035,322.0075912475586],[117.04981231689453,299.2354736328125],[121.4400634765625,276.7794876098633],[131.3661651611328,288.57713317871094],[147.21706771850586,304.9786682128906],[167.01985549926758,316.31394958496094],[189.13957977294922,321.9522933959961],[192.6860580444336,337.0508728027344],[185.21725463867188,358.68810272216797],[177.74845123291016,380.32533264160156],[170.27963638305664,401.96256256103516],[162.81077575683594,423.5999755859375],[395.06321716308594,329.2167510986328],[379.83618927001953,346.04911041259766],[373.11981201171875,367.7831802368164],[369.166748046875,390.3292541503906],[365.21368408203125,412.87535095214844],[361.2606201171875,435.42144775390625],[357.30751037597656,457.9677276611328],[353.3544464111328,480.51377868652344],[349.40138244628906,503.05987548828125],[337.32781982421875,521.5015258789062],[315.1898651123047,522.9440307617188],[300.7215805053711,506.3844299316406],[296.26195526123047,483.9342346191406],[291.8531188964844,461.4728240966797],[287.4442596435547,439.01123046875],[283.0354232788086,416.54981994628906],[278.6265869140625,394.0884094238281],[274.2177505493164,371.6269989013672],[268.360595703125,349.5744400024414],[254.41228485107422,331.66585540771484],[234.083984375,321.5702896118164],[211.81016540527344,316.2945861816406],[189.38196563720703,311.7955017089844],[167.45513153076172,305.53478240966797],[148.5033721923828,292.87061309814453],[134.68987274169922,274.7594451904297],[127.56534194946289,253.11040496826172],[127.62385559082031,230.31803131103516],[134.89751434326172,208.71972274780273],[148.62914276123047,190.52747344970703],[167.3753890991211,177.5633888244629],[189.26025772094727,171.2033576965332],[212.12940979003906,170.6807861328125],[235.01942443847656,170.6807861328125],[243.44715118408203,186.97527313232422],[246.16475677490234,209.70338821411133],[256.6718978881836,212.6862335205078],[253.95431518554688,189.9581184387207],[251.23673248291016,167.2299919128418],[249.81787109375,144.68911361694336],[271.1291046142578,136.7074203491211],[293.50475311279297,131.94171142578125],[316.27794647216797,129.7541389465332],[339.15271759033203,130.13629150390625],[361.84090423583984,133.0756950378418],[384.0663146972656,138.50432586669922],[400.96427154541016,149.9165802001953],[398.24694061279297,172.6447410583496],[395.5296096801758,195.3728904724121],[394.61932373046875,217.79501342773438],[404.6911315917969,203.6620979309082],[407.40773010253906,180.93385696411133],[421.1973571777344,170.6807861328125],[444.08750915527344,170.69006729125977],[466.5243835449219,174.68923950195312],[486.5322265625,185.6039276123047],[502.0968322753906,202.25593948364258],[511.6234893798828,222.96005249023438],[514.0876312255859,245.61834716796875],[509.2937469482422,267.89930725097656],[497.63963317871094,287.4783401489258],[480.18153381347656,302.12506103515625],[459.0373840332031,310.6572036743164],[436.7022705078125,315.66175079345703],[414.4283142089844,320.9366989135742],[495.2645721435547,438.4465789794922],[478.31898498535156,425.7679443359375],[470.85015869140625,404.1307373046875],[463.38133239746094,382.4934844970703],[455.9125518798828,360.8562774658203],[448.4437255859375,339.2190475463867],[450.4187927246094,322.806640625],[472.52960205078125,317.01043701171875],[492.5065002441406,305.9822006225586],[508.62449645996094,289.84415435791016],[518.9103088378906,276.64550018310547],[523.3133087158203,299.09908294677734],[525.5625305175781,321.86973571777344],[525.7470092773438,344.75167083740234],[523.9912567138672,367.56764221191406],[520.4299468994141,390.1734313964844],[515.1940002441406,412.4513244628906],[315.5784149169922,295.29479217529297],[294.6698989868164,304.0836715698242],[279.9243927001953,321.3234176635742],[274.52088165283203,343.35086822509766],[279.6136169433594,365.45213317871094],[294.1170120239258,382.896728515625],[314.8994598388672,391.9805450439453],[337.54793548583984,390.71949768066406],[357.1927947998047,379.3795928955078],[369.67749786376953,360.4402847290039],[372.28157806396484,337.9074401855469],[364.4551010131836,316.62044525146484],[347.8978805541992,301.1123046875],[326.14014434814453,294.7105026245117],[304.1638946533203,377.4845657348633],[288.6859893798828,361.0624084472656],[284.9018859863281,338.82086181640625],[294.09947967529297,318.2209014892578],[313.1539611816406,306.13614654541016],[335.7109069824219,306.65868377685547],[354.1887893676758,319.60980224609375],[362.4215545654297,340.6133499145508],[357.6123352050781,362.65494537353516],[341.3957824707031,378.3481140136719],[336.77014923095703,318.0814666748047],[315.13548278808594,316.1050033569336],[298.2394485473633,329.8057098388672],[295.69288635253906,351.4425964355469],[308.9920425415039,368.74402618408203],[330.6310119628906,371.86187744140625],[348.33751678466797,358.96466064453125],[352.0248489379883,337.3242721557617],[342.87625885009766,345.7211685180664],[328.827880859375,361.6893844604492],[308.58467864990234,356.1465759277344],[307.0361785888672,334.92066955566406],[325.1325378417969,324.19629669189453],[341.3712463378906,337.9757614135742],[318.92420959472656,342.66756439208984],[355.1884765625,160.54653930664062],[332.2984619140625,160.54653930664062],[309.408447265625,160.54655075073242],[286.5184326171875,160.54655075073242],[269.31658935546875,172.38853073120117],[280.0097427368164,190.18640518188477],[302.8499526977539,190.73762130737305],[325.7399673461914,190.73762130737305],[348.6299819946289,190.73762130737305],[371.2308044433594,188.97821807861328],[377.86329650878906,169.3071174621582],[358.443359375,180.65874099731445],[335.5533447265625,180.65874099731445],[312.663330078125,180.65875244140625],[289.7733154296875,180.65875244140625],[285.4747085571289,170.62541961669922],[308.3647232055664,170.62541961669922],[331.2547378540039,170.62541961669922],[354.1447525024414,170.62541961669922],[366.8918685913086,179.8500213623047],[334.12560272216797,242.13158416748047],[312.494873046875,242.47154235839844],[304.05224609375,262.39664459228516],[318.8731918334961,278.17118072509766],[339.28338623046875,270.9844970703125],[318.4358444213867,250.62625885009766],[333.0769348144531,261.06219482421875],[315.36621856689453,264.1645050048828],[209.65908813476562,221.74356842041016],[192.17140579223633,213.62297821044922],[178.5993995666504,225.65921020507812],[162.72365188598633,235.37451171875],[163.94112014770508,257.99806213378906],[178.5993995666504,267.9786376953125],[195.7161102294922,276.470703125],[209.65908813476562,264.8050765991211],[225.49645233154297,255.08789825439453],[224.52855682373047,232.3998260498047],[200.23862075805664,254.01803588867188],[189.1660614013672,266.3918228149414],[179.45246505737305,250.4971923828125],[178.10662841796875,239.59648895263672],[188.6782684326172,224.5591583251953],[199.7729034423828,234.81700134277344],[215.47362518310547,244.5484619140625],[177.48309707641602,195.52554321289062],[158.0604705810547,207.29021835327148],[145.42191314697266,226.1562728881836],[142.00896453857422,248.6053924560547],[148.45060348510742,270.3766555786133],[163.52565383911133,287.3613815307617],[184.36713027954102,296.3720016479492],[207.06392288208008,295.66587829589844],[227.30340576171875,285.3721466064453],[241.2986831665039,267.4883041381836],[246.3674545288086,245.3552017211914],[241.56175994873047,223.1647186279297],[227.77719116210938,205.1167106628418],[207.66172790527344,194.58440399169922],[184.99980545043945,286.2122802734375],[165.0594711303711,275.556640625],[153.45191192626953,256.1521301269531],[153.56311416625977,233.54212951660156],[165.3605079650879,214.25306701660156],[185.40452575683594,203.79363632202148],[207.9702262878418,205.21986770629883],[226.5440902709961,218.11691284179688],[235.81792449951172,238.73497772216797],[233.08139038085938,261.1787414550781],[219.1308822631836,278.9747619628906],[198.0078239440918,287.03064727783203],[472.93495178222656,274.792724609375],[486.95501708984375,258.9166564941406],[499.50653076171875,241.8791961669922],[485.4131317138672,226.09026336669922],[471.8371887207031,208.57322692871094],[451.73179626464844,201.99261093139648],[436.92236328125,218.22109985351562],[419.6781311035156,232.13331604003906],[419.7433166503906,253.28085327148438],[437.8335876464844,266.0182876586914],[451.19635009765625,283.1273422241211],[449.57582092285156,242.68275451660156],[444.7611541748047,228.34790802001953],[465.47605895996094,232.61060333251953],[467.2559814453125,236.06566619873047],[473.05406188964844,256.41065216064453],[453.33168029785156,251.4156951904297],[451.18650817871094,269.20565032958984],[464.47080993652344,267.7985076904297],[480.84437561035156,249.13882446289062],[486.16725158691406,236.88996124267578],[462.44232177734375,222.5081024169922],[454.41648864746094,211.83798599243164],[439.27503967285156,240.9496612548828]]
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <meta charset='UTF-8'>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <title>Coördinator Transition</title>
    <style>
    html, body {
      padding: 0;
      margin: 0;
    }

    body {
      background-color: #191414;
    }
    </style>
  </head>
  <body>
  </body>
</html>

<script>

// canvas settings
const width = 1400;
const height = 800;

// animation settings
const duration = 5000;

//different ease options
const eases = [ d3.easeCubic, d3.easeElasticIn, d3.easeLinear, d3.easeElasticOut, d3.easePolyIn, d3.easeBackInOut, d3.easeBounce ];
let timer;
let currLayout = 1;
let currEase = 0;

//draw each point to the canvas as a circle
function draw( t, points ) {

  ctx.save();
  ctx.clearRect( 0, 0, width, height );
  for (let i = 0; i < points.length; ++i) {
    const point = points[i];
    const radius = 3;
    ctx.beginPath();
    ctx.arc( point.x, point.y, radius, 0, 2*Math.PI, false );
    ctx.closePath();
    ctx.fillStyle = "#F037A5";
    ctx.fill()
  }

  ctx.restore();
}


function animate( oldPoints, newPoints, layouts, eases ) {
  // store the source position
  const points = [];
  const shuffledNewPoints = d3.shuffle( newPoints );
  oldPoints.forEach(( point, i ) => {
    newPoint = {};
    newPoint.sx = point.x;
    newPoint.sy = point.y;
    newPoint.x = newPoint.tx = shuffledNewPoints[i].x;
    newPoint.y = newPoint.ty = shuffledNewPoints[i].y;
    points.push( newPoint );
  });

  ease = eases[ currEase ];
  timer = d3.timer(( elapsed ) => {
    // compute how far through the animation we are (0 to 1)
    const t = Math.min(1, ease( elapsed / duration ));
    // update point positions (interpolate between source and target)
    points.forEach(point => {
      point.x = point.sx * (1 - t) + point.tx * t;
      point.y = point.sy * (1 - t) + point.ty * t;
    });

    // update what is drawn on screen
    draw( t, points );

    // if this animation is over
    if (t === 1) {
      // stop this timer for this layout and start a new one
      timer.stop();

      // update to use next layout
      currLayout = (currLayout + 1) % layouts.length;
      currEase = ( currEase + 1) % eases.length;

      // start animation for next layout
      setTimeout(animate, 1500, points, layouts[currLayout], layouts, eases );
    }
  });
}

const screenScale = window.devicePixelRatio || 1;
const canvas = d3.select('body').append('canvas')
  .attr( 'width', width * screenScale)
  .attr( 'height', height * screenScale )
  .style( 'width', `${width}px` )
  .style( 'height', `${height}px` )

canvas.node().getContext( '2d' ).scale( screenScale, screenScale );

const ctx = canvas.node().getContext( '2d' );

d3.json( "./coordinates.json", data => {
  const layouts = [];
  Object.keys( data ).forEach( key => {
    let layout = [];
    data[ key ].forEach( point => {
      layout.push({
        x: point[0],
        y: point[1]
      });
    });
    layouts.push( layout );
  });

  animate( layouts[0], layouts[1], layouts, eases );
});
</script>