Created
January 22, 2017 17:45
-
-
Save gcmsrc/66da6b7aa4c5e88d4d71bf24f6f8682f to your computer and use it in GitHub Desktop.
Version2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
year | Business | Holiday | Miscellaneous | Study | VFR | visits | |
---|---|---|---|---|---|---|---|
2002 | 0.240537416822 | 0.419084373331 | 0.0919486883813 | 0.016049084009 | 0.232380437456 | 11603.3820794 | |
2003 | 0.233770307173 | 0.422897682993 | 0.085784628018 | 0.0181440926277 | 0.239403289189 | 11695.7504415 | |
2004 | 0.215826107241 | 0.437541332975 | 0.0890771265708 | 0.0154869013269 | 0.242068531886 | 13389.3304112 | |
2005 | 0.228533909167 | 0.42173304222 | 0.087183370819 | 0.0133643225538 | 0.249185355241 | 13892.5689795 | |
2006 | 0.234664484002 | 0.419806489788 | 0.093073567256 | 0.013739721358 | 0.238715737597 | 15592.6461415 | |
2007 | 0.233333961796 | 0.42387871279 | 0.0849470608291 | 0.0165324393778 | 0.241307825207 | 15339.7714895 | |
2008 | 0.210064603451 | 0.443573192493 | 0.0827974900599 | 0.0132584581988 | 0.250306255797 | 14752.993692 | |
2009 | 0.179890520023 | 0.4964035094 | 0.0830677885476 | 0.011952853439 | 0.228685328591 | 14211.2979861 | |
2010 | 0.18873697009 | 0.498114965082 | 0.0805382743866 | 0.0137382315809 | 0.218871558861 | 14705.5413382 | |
2011 | 0.196025160757 | 0.498118487455 | 0.0712648770799 | 0.011640846875 | 0.222950627834 | 15289.4929047 | |
2012 | 0.198437950809 | 0.494743422747 | 0.0669662869851 | 0.0115857100563 | 0.228266629403 | 15460.8642467 | |
2013 | 0.193008040602 | 0.506139968784 | 0.0652531982258 | 0.0105825027692 | 0.225016289619 | 16810.7582222 | |
2014 | 0.188156322911 | 0.512160505986 | 0.058654456489 | 0.0141020379591 | 0.226926676655 | 17404.2156497 | |
2015 | 0.199749941472 | 0.495645761132 | 0.0610388286996 | 0.00971210251104 | 0.233853366185 | 18581.145357 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
market | year | value | |
---|---|---|---|
Argentina | 2002 | 14.595359056 | |
Argentina | 2003 | 21.530759141 | |
Argentina | 2004 | 23.171488881 | |
Argentina | 2005 | 20.924879968 | |
Argentina | 2006 | 28.379647088999995 | |
Argentina | 2007 | 30.49079013 | |
Argentina | 2008 | 20.118808958 | |
Argentina | 2009 | 55.37418897699999 | |
Argentina | 2010 | 52.414780794 | |
Argentina | 2011 | 61.069963991000016 | |
Argentina | 2012 | 93.74335129200003 | |
Argentina | 2013 | 93.48125041100002 | |
Argentina | 2014 | 92.49973935000003 | |
Argentina | 2015 | 113.33215731700001 | |
Australia | 2002 | 436.89172697699996 | |
Australia | 2003 | 450.7136469439999 | |
Australia | 2004 | 477.734498041 | |
Australia | 2005 | 552.6481023080001 | |
Australia | 2006 | 578.8438092760001 | |
Australia | 2007 | 595.2522444740002 | |
Australia | 2008 | 583.7169744429999 | |
Australia | 2009 | 571.190791364 | |
Australia | 2010 | 624.2764789800002 | |
Australia | 2011 | 681.266423449 | |
Australia | 2012 | 596.9382011990001 | |
Australia | 2013 | 687.3322455110003 | |
Australia | 2014 | 614.8706871279999 | |
Australia | 2015 | 628.9603035599997 | |
Austria | 2002 | 109.51329462 | |
Austria | 2003 | 128.980634988 | |
Austria | 2004 | 128.65854089299995 | |
Austria | 2005 | 122.257793143 | |
Austria | 2006 | 140.786416167 | |
Austria | 2007 | 163.69116187 | |
Austria | 2008 | 141.65906441600004 | |
Austria | 2009 | 168.772010803 | |
Austria | 2010 | 165.92553487299998 | |
Austria | 2011 | 164.87809062 | |
Austria | 2012 | 153.01341540599998 | |
Austria | 2013 | 142.83758166599998 | |
Austria | 2014 | 145.39774116800007 | |
Austria | 2015 | 152.69029878100005 | |
Bahrain | 2011 | 12.069186924 | |
Bahrain | 2012 | 21.520883024999996 | |
Bahrain | 2013 | 23.936109067000004 | |
Bahrain | 2014 | 19.202672242 | |
Bahrain | 2015 | 11.562628361 | |
Belgium | 2002 | 288.6138012900001 | |
Belgium | 2003 | 306.21036789999994 | |
Belgium | 2004 | 359.22573455699995 | |
Belgium | 2005 | 300.53348135099986 | |
Belgium | 2006 | 342.79421469599987 | |
Belgium | 2007 | 351.08822833499994 | |
Belgium | 2008 | 307.7372220229999 | |
Belgium | 2009 | 349.9166236289999 | |
Belgium | 2010 | 488.81148054200014 | |
Belgium | 2011 | 406.373370059 | |
Belgium | 2012 | 470.31799221199987 | |
Belgium | 2013 | 530.6930997000001 | |
Belgium | 2014 | 490.205149656 | |
Belgium | 2015 | 529.8111867639997 | |
Brazil | 2002 | 64.70641233000002 | |
Brazil | 2003 | 46.13551995200002 | |
Brazil | 2004 | 58.59348563699999 | |
Brazil | 2005 | 65.44075825599998 | |
Brazil | 2006 | 91.48631691800004 | |
Brazil | 2007 | 108.88517896699996 | |
Brazil | 2008 | 150.89464420500005 | |
Brazil | 2009 | 108.44268606799997 | |
Brazil | 2010 | 149.18974625 | |
Brazil | 2011 | 211.282784145 | |
Brazil | 2012 | 215.20779751499992 | |
Brazil | 2013 | 219.95547194800002 | |
Brazil | 2014 | 255.997815108 | |
Brazil | 2015 | 259.638746712 | |
Bulgaria | 2008 | 44.320264249 | |
Bulgaria | 2009 | 55.70139277 | |
Bulgaria | 2010 | 49.265095859 | |
Bulgaria | 2011 | 52.61544012599999 | |
Bulgaria | 2012 | 53.871897102 | |
Bulgaria | 2013 | 55.159902929000005 | |
Bulgaria | 2014 | 71.739023285 | |
Bulgaria | 2015 | 70.26984971799999 | |
Canada | 2002 | 358.33433616800005 | |
Canada | 2003 | 317.24028409499994 | |
Canada | 2004 | 368.86533402800006 | |
Canada | 2005 | 399.2036534009998 | |
Canada | 2006 | 439.5411430050002 | |
Canada | 2007 | 478.147525676 | |
Canada | 2008 | 499.69143672800004 | |
Canada | 2009 | 371.213649843 | |
Canada | 2010 | 389.4524776110001 | |
Canada | 2011 | 428.7708054889999 | |
Canada | 2012 | 402.8562592230001 | |
Canada | 2013 | 434.47924126500004 | |
Canada | 2014 | 359.187932734 | |
Canada | 2015 | 407.53204172400007 | |
Chile | 2011 | 18.697606742999998 | |
Chile | 2012 | 16.651711196999997 | |
Chile | 2013 | 28.986941899999998 | |
Chile | 2014 | 38.009156614 | |
Chile | 2015 | 31.626925320000005 | |
China | 2002 | 39.520290702000004 | |
China | 2003 | 42.630867945000006 | |
China | 2004 | 61.00658490999998 | |
China | 2005 | 58.081053897000025 | |
China | 2006 | 64.77106988300001 | |
China | 2007 | 79.168682084 | |
China | 2008 | 60.107489675000004 | |
China | 2009 | 46.699951595000016 | |
China | 2010 | 55.352449081 | |
China | 2011 | 80.62607251200001 | |
China | 2012 | 104.125517014 | |
China | 2013 | 96.42514362899999 | |
China | 2014 | 98.879508137 | |
China | 2015 | 167.07382965400004 | |
Czech Republic | 2002 | 63.630266074000005 | |
Czech Republic | 2003 | 79.656266543 | |
Czech Republic | 2004 | 126.10342004500002 | |
Czech Republic | 2005 | 106.91572417200003 | |
Czech Republic | 2006 | 112.03087833599996 | |
Czech Republic | 2007 | 134.118388508 | |
Czech Republic | 2008 | 169.69502594899996 | |
Czech Republic | 2009 | 144.812957886 | |
Czech Republic | 2010 | 109.73616490999999 | |
Czech Republic | 2011 | 108.74955594099998 | |
Czech Republic | 2012 | 144.62534684199994 | |
Czech Republic | 2013 | 136.47425049699999 | |
Czech Republic | 2014 | 134.691170811 | |
Czech Republic | 2015 | 166.2559162739999 | |
Denmark | 2002 | 191.42862081899997 | |
Denmark | 2003 | 209.83347041199994 | |
Denmark | 2004 | 238.12045698800006 | |
Denmark | 2005 | 286.6856983179999 | |
Denmark | 2006 | 291.33200356399993 | |
Denmark | 2007 | 312.299082285 | |
Denmark | 2008 | 298.39092804400013 | |
Denmark | 2009 | 332.161131937 | |
Denmark | 2010 | 273.7646143329999 | |
Denmark | 2011 | 340.2379000419999 | |
Denmark | 2012 | 325.727032146 | |
Denmark | 2013 | 378.45346414600004 | |
Denmark | 2014 | 339.44392232800004 | |
Denmark | 2015 | 422.7334180980001 | |
Egypt | 2002 | 19.676177787000007 | |
Egypt | 2003 | 25.033167229 | |
Egypt | 2004 | 21.556451096999997 | |
Egypt | 2005 | 19.483566181000004 | |
Egypt | 2006 | 33.632623029 | |
Egypt | 2007 | 21.840031042000003 | |
Egypt | 2008 | 31.642433169000004 | |
Egypt | 2009 | 30.472555996 | |
Egypt | 2010 | 31.046822862000006 | |
Egypt | 2011 | 29.872413916 | |
Egypt | 2012 | 35.044817822000006 | |
Egypt | 2013 | 39.11707574 | |
Egypt | 2014 | 39.88489869200001 | |
Egypt | 2015 | 38.13918298699999 | |
Finland | 2002 | 66.27873899199999 | |
Finland | 2003 | 59.29279686399999 | |
Finland | 2004 | 78.12335582399999 | |
Finland | 2005 | 97.46617019500002 | |
Finland | 2006 | 102.584148766 | |
Finland | 2007 | 99.40250362600003 | |
Finland | 2008 | 94.937135783 | |
Finland | 2009 | 94.38610871700003 | |
Finland | 2010 | 103.60001514699997 | |
Finland | 2011 | 124.47414685200003 | |
Finland | 2012 | 130.73427016499997 | |
Finland | 2013 | 134.2075737149999 | |
Finland | 2014 | 159.43935228700005 | |
Finland | 2015 | 160.692837382 | |
France | 2002 | 1102.8633108580004 | |
France | 2003 | 1190.87091954 | |
France | 2004 | 1258.1196182840001 | |
France | 2005 | 1367.347915872999 | |
France | 2006 | 1447.549875937 | |
France | 2007 | 1342.3534987340004 | |
France | 2008 | 1409.8554764379999 | |
France | 2009 | 1528.2479291619995 | |
France | 2010 | 1624.253066575001 | |
France | 2011 | 1600.4690838269996 | |
France | 2012 | 1681.2708605259995 | |
France | 2013 | 1903.9821559480004 | |
France | 2014 | 2009.9768748670008 | |
France | 2015 | 2071.3970698949993 | |
Germany | 2002 | 889.4346487779998 | |
Germany | 2003 | 891.7289075200005 | |
Germany | 2004 | 1172.9192244300004 | |
Germany | 2005 | 1280.9184800990004 | |
Germany | 2006 | 1274.7184991340002 | |
Germany | 2007 | 1196.5759770230002 | |
Germany | 2008 | 1052.3987693000001 | |
Germany | 2009 | 1068.9323414700004 | |
Germany | 2010 | 1257.3681874509998 | |
Germany | 2011 | 1214.4722536309994 | |
Germany | 2012 | 1199.0605367759997 | |
Germany | 2013 | 1295.2619027330002 | |
Germany | 2014 | 1341.073394546 | |
Germany | 2015 | 1401.2194024319995 | |
Greece | 2002 | 97.846777886 | |
Greece | 2003 | 96.63115020000002 | |
Greece | 2004 | 109.76634034599995 | |
Greece | 2005 | 111.77623444800003 | |
Greece | 2006 | 102.48796759100001 | |
Greece | 2007 | 99.55207789100001 | |
Greece | 2008 | 124.44705915300003 | |
Greece | 2009 | 116.93206042600002 | |
Greece | 2010 | 104.54719407699997 | |
Greece | 2011 | 134.37727784400002 | |
Greece | 2012 | 92.300163656 | |
Greece | 2013 | 110.83236959300002 | |
Greece | 2014 | 155.35499172800002 | |
Greece | 2015 | 147.76058228000002 | |
Hong Kong S.A.R. | 2002 | 96.09616112900001 | |
Hong Kong S.A.R. | 2003 | 78.75378606199999 | |
Hong Kong S.A.R. | 2004 | 82.86582170999996 | |
Hong Kong S.A.R. | 2005 | 88.94374181400003 | |
Hong Kong S.A.R. | 2006 | 96.55038294600003 | |
Hong Kong S.A.R. | 2007 | 85.092973074 | |
Hong Kong S.A.R. | 2008 | 84.47433289799997 | |
Hong Kong S.A.R. | 2009 | 86.69165674899997 | |
Hong Kong S.A.R. | 2010 | 84.37004225 | |
Hong Kong S.A.R. | 2011 | 97.925671338 | |
Hong Kong S.A.R. | 2012 | 92.73019874499998 | |
Hong Kong S.A.R. | 2013 | 99.48366519899999 | |
Hong Kong S.A.R. | 2014 | 107.488126599 | |
Hong Kong S.A.R. | 2015 | 134.414885638 | |
Hungary | 2002 | 43.683604775999996 | |
Hungary | 2003 | 45.148987085999984 | |
Hungary | 2004 | 83.478904787 | |
Hungary | 2005 | 120.89838106400003 | |
Hungary | 2006 | 119.511893779 | |
Hungary | 2007 | 149.11481496300001 | |
Hungary | 2008 | 108.247728972 | |
Hungary | 2009 | 102.422103076 | |
Hungary | 2010 | 75.62250823000002 | |
Hungary | 2011 | 80.74965408899999 | |
Hungary | 2012 | 104.92136956400003 | |
Hungary | 2013 | 88.179874986 | |
Hungary | 2014 | 115.56501291399998 | |
Hungary | 2015 | 95.239152401 | |
Iceland | 2002 | 20.138197987999998 | |
Iceland | 2003 | 23.700039997 | |
Iceland | 2004 | 49.79567146300001 | |
Iceland | 2005 | 42.968266815 | |
Iceland | 2006 | 46.66595318899999 | |
Iceland | 2007 | 46.103127715 | |
Iceland | 2008 | 32.328583897 | |
Iceland | 2009 | 23.710144104000005 | |
Iceland | 2010 | 19.937233922 | |
Iceland | 2011 | 24.46911308 | |
Iceland | 2012 | 25.399086513 | |
Iceland | 2013 | 28.956171185 | |
Iceland | 2014 | 28.497370123 | |
Iceland | 2015 | 26.062992604000005 | |
India | 2002 | 135.24556920000003 | |
India | 2003 | 130.36824330800002 | |
India | 2004 | 160.28338171499993 | |
India | 2005 | 166.02863210299995 | |
India | 2006 | 229.56392790099994 | |
India | 2007 | 219.69035085699997 | |
India | 2008 | 241.64290944900003 | |
India | 2009 | 177.912951888 | |
India | 2010 | 235.92660682199997 | |
India | 2011 | 235.27043844200008 | |
India | 2012 | 231.53000343799994 | |
India | 2013 | 243.57792019299998 | |
India | 2014 | 252.31917277899998 | |
India | 2015 | 275.7453048030001 | |
Indonesia | 2011 | 19.232790185 | |
Indonesia | 2012 | 18.511527147999995 | |
Indonesia | 2013 | 17.862094968999997 | |
Indonesia | 2014 | 22.100618511999997 | |
Indonesia | 2015 | 24.770477862 | |
Ireland | 2002 | 628.8731627799998 | |
Ireland | 2003 | 623.5519496440003 | |
Ireland | 2004 | 682.7932528919999 | |
Ireland | 2005 | 726.5361173530001 | |
Ireland | 2006 | 718.4119690699995 | |
Ireland | 2007 | 732.273407233 | |
Ireland | 2008 | 736.1492586729998 | |
Ireland | 2009 | 690.420430604 | |
Ireland | 2010 | 656.638842603 | |
Ireland | 2011 | 620.3188509109999 | |
Ireland | 2012 | 595.9400475330004 | |
Ireland | 2013 | 610.624598379 | |
Ireland | 2014 | 620.2920184010002 | |
Ireland | 2015 | 793.2304510920001 | |
Israel | 2002 | 152.70756545900002 | |
Israel | 2003 | 122.67384915400001 | |
Israel | 2004 | 127.445260059 | |
Israel | 2005 | 106.940677091 | |
Israel | 2006 | 138.398791702 | |
Israel | 2007 | 102.69934831400002 | |
Israel | 2008 | 125.66391813899999 | |
Israel | 2009 | 124.930476672 | |
Israel | 2010 | 122.84391088999998 | |
Israel | 2011 | 120.50557012799997 | |
Israel | 2012 | 108.20603365000001 | |
Israel | 2013 | 140.96326714900002 | |
Israel | 2014 | 147.57870230499998 | |
Israel | 2015 | 164.65256870400006 | |
Italy | 2002 | 541.5962966260001 | |
Italy | 2003 | 601.4144014649999 | |
Italy | 2004 | 765.3620940920001 | |
Italy | 2005 | 643.726423381 | |
Italy | 2006 | 851.1752784069996 | |
Italy | 2007 | 837.7434506400003 | |
Italy | 2008 | 981.0446883459999 | |
Italy | 2009 | 747.6399869050002 | |
Italy | 2010 | 932.2429438089999 | |
Italy | 2011 | 1009.290218019 | |
Italy | 2012 | 962.8072050670002 | |
Italy | 2013 | 1072.1807178389997 | |
Italy | 2014 | 1185.7482357719996 | |
Italy | 2015 | 1165.0836310529996 | |
Japan | 2002 | 294.47076965300005 | |
Japan | 2003 | 232.52912602099997 | |
Japan | 2004 | 264.9933933579999 | |
Japan | 2005 | 242.9283887919998 | |
Japan | 2006 | 245.20231034200017 | |
Japan | 2007 | 220.05665104399998 | |
Japan | 2008 | 167.83790707299997 | |
Japan | 2009 | 180.45148927600002 | |
Japan | 2010 | 168.20516651100002 | |
Japan | 2011 | 166.35645556000003 | |
Japan | 2012 | 177.854013144 | |
Japan | 2013 | 155.34927841699994 | |
Japan | 2014 | 157.478226994 | |
Japan | 2015 | 151.39913751499998 | |
Kenya | 2002 | 31.580496979999992 | |
Kenya | 2003 | 19.836604095 | |
Kenya | 2004 | 22.092889157999995 | |
Kenya | 2005 | 16.468625933000002 | |
Kenya | 2006 | 15.9477102 | |
Kenya | 2007 | 12.670248942 | |
Kenya | 2008 | 24.644500955999998 | |
Kenya | 2009 | 14.897177068000001 | |
Kenya | 2010 | 18.549059943000003 | |
Kenya | 2011 | 17.843812079000003 | |
Kenya | 2012 | 20.771585136999995 | |
Kenya | 2013 | 22.347663999000005 | |
Kenya | 2014 | 12.465435056999999 | |
Kenya | 2015 | 22.400750873 | |
Kuwait | 2002 | 31.059023976000006 | |
Kuwait | 2003 | 36.17274383100001 | |
Kuwait | 2004 | 32.452613876 | |
Kuwait | 2005 | 33.815372246999985 | |
Kuwait | 2006 | 43.64871711600002 | |
Kuwait | 2007 | 46.689408015000005 | |
Kuwait | 2008 | 35.422521858 | |
Kuwait | 2009 | 48.981363492 | |
Kuwait | 2010 | 41.93610004699998 | |
Kuwait | 2011 | 52.781241206999994 | |
Kuwait | 2012 | 50.478253753999994 | |
Kuwait | 2013 | 105.68905795200001 | |
Kuwait | 2014 | 84.27489629299997 | |
Kuwait | 2015 | 83.36739936700002 | |
Luxembourg | 2002 | 23.933049037 | |
Luxembourg | 2003 | 16.853040887000002 | |
Luxembourg | 2004 | 38.373454112000005 | |
Luxembourg | 2005 | 25.894775986000003 | |
Luxembourg | 2006 | 28.203738065 | |
Luxembourg | 2007 | 31.687745869 | |
Luxembourg | 2008 | 34.968839024000005 | |
Luxembourg | 2009 | 27.883183557 | |
Luxembourg | 2010 | 26.796334176 | |
Luxembourg | 2011 | 39.95505609799999 | |
Luxembourg | 2012 | 40.060612677 | |
Luxembourg | 2013 | 51.21206161300001 | |
Luxembourg | 2014 | 56.09707565600001 | |
Luxembourg | 2015 | 78.103773057 | |
Malaysia | 2002 | 60.489580400999984 | |
Malaysia | 2003 | 46.671644109 | |
Malaysia | 2004 | 65.029698134 | |
Malaysia | 2005 | 52.811654209 | |
Malaysia | 2006 | 52.73174015900001 | |
Malaysia | 2007 | 46.97762699499998 | |
Malaysia | 2008 | 45.606669153999995 | |
Malaysia | 2009 | 77.88868209800002 | |
Malaysia | 2010 | 89.84081590100001 | |
Malaysia | 2011 | 82.47354252700002 | |
Malaysia | 2012 | 72.02053042899996 | |
Malaysia | 2013 | 113.36988623799999 | |
Malaysia | 2014 | 109.536848217 | |
Malaysia | 2015 | 126.01923207600004 | |
Mexico | 2002 | 53.038406775 | |
Mexico | 2003 | 57.868399021999984 | |
Mexico | 2004 | 52.16182879600002 | |
Mexico | 2005 | 54.978638791 | |
Mexico | 2006 | 69.46794288000004 | |
Mexico | 2007 | 38.147950918999996 | |
Mexico | 2008 | 50.40036481400002 | |
Mexico | 2009 | 60.741047926000014 | |
Mexico | 2010 | 51.855554385000005 | |
Mexico | 2011 | 62.158638969 | |
Mexico | 2012 | 69.80439256 | |
Mexico | 2013 | 91.442435235 | |
Mexico | 2014 | 72.79023395099998 | |
Mexico | 2015 | 82.20943600200002 | |
Netherlands | 2002 | 492.361354336 | |
Netherlands | 2003 | 619.2048370560002 | |
Netherlands | 2004 | 578.316150527 | |
Netherlands | 2005 | 606.7170003150001 | |
Netherlands | 2006 | 659.7670236399999 | |
Netherlands | 2007 | 665.328416209 | |
Netherlands | 2008 | 654.148838244 | |
Netherlands | 2009 | 683.8694758600005 | |
Netherlands | 2010 | 621.1703229250002 | |
Netherlands | 2011 | 631.2341157400002 | |
Netherlands | 2012 | 637.930629298 | |
Netherlands | 2013 | 686.7109881319999 | |
Netherlands | 2014 | 705.1862861199999 | |
Netherlands | 2015 | 690.48509869 | |
New Zealand | 2002 | 82.67217579499996 | |
New Zealand | 2003 | 100.54281580199999 | |
New Zealand | 2004 | 101.89609722799999 | |
New Zealand | 2005 | 121.74206997600001 | |
New Zealand | 2006 | 124.546996139 | |
New Zealand | 2007 | 119.74246621700001 | |
New Zealand | 2008 | 103.12724301299998 | |
New Zealand | 2009 | 108.81879197000005 | |
New Zealand | 2010 | 111.30152317800001 | |
New Zealand | 2011 | 95.538711549 | |
New Zealand | 2012 | 104.54087000899997 | |
New Zealand | 2013 | 93.70729327999999 | |
New Zealand | 2014 | 106.60637670799997 | |
New Zealand | 2015 | 118.41910725 | |
Nigeria | 2002 | 93.006873726 | |
Nigeria | 2003 | 85.612025783 | |
Nigeria | 2004 | 120.64473516 | |
Nigeria | 2005 | 119.830542859 | |
Nigeria | 2006 | 118.35013170399995 | |
Nigeria | 2007 | 125.048341018 | |
Nigeria | 2008 | 113.607711358 | |
Nigeria | 2009 | 116.506480483 | |
Nigeria | 2010 | 124.566580578 | |
Nigeria | 2011 | 106.09020167599996 | |
Nigeria | 2012 | 109.89716079400004 | |
Nigeria | 2013 | 120.67499908800002 | |
Nigeria | 2014 | 95.80541807200001 | |
Nigeria | 2015 | 89.781191708 | |
Norway | 2002 | 178.391173858 | |
Norway | 2003 | 182.01539769700003 | |
Norway | 2004 | 218.04298469699995 | |
Norway | 2005 | 265.90286889 | |
Norway | 2006 | 302.1912594200001 | |
Norway | 2007 | 306.60037301599993 | |
Norway | 2008 | 337.61603778299997 | |
Norway | 2009 | 324.07993614399993 | |
Norway | 2010 | 372.106886018 | |
Norway | 2011 | 382.14464229300006 | |
Norway | 2012 | 396.79784211099997 | |
Norway | 2013 | 480.109934232 | |
Norway | 2014 | 471.9369396520001 | |
Norway | 2015 | 434.6297132019999 | |
Oman | 2011 | 8.083898005999998 | |
Oman | 2012 | 8.475467951 | |
Oman | 2013 | 12.137767048999999 | |
Oman | 2014 | 9.607254713 | |
Oman | 2015 | 14.259101365000003 | |
Pakistan | 2002 | 43.01746578399999 | |
Pakistan | 2003 | 35.563234237 | |
Pakistan | 2004 | 49.235691172 | |
Pakistan | 2005 | 58.26557506600001 | |
Pakistan | 2006 | 66.121777165 | |
Pakistan | 2007 | 55.53223288000001 | |
Pakistan | 2008 | 47.742180077 | |
Pakistan | 2009 | 38.37639894800001 | |
Pakistan | 2010 | 32.486232877999996 | |
Pakistan | 2011 | 31.407247062 | |
Pakistan | 2012 | 40.592528316 | |
Pakistan | 2013 | 39.72704714399999 | |
Pakistan | 2014 | 49.00551920800001 | |
Pakistan | 2015 | 35.145472198 | |
Poland | 2002 | 115.33006335799999 | |
Poland | 2003 | 167.22525453000003 | |
Poland | 2004 | 277.79681419700006 | |
Poland | 2005 | 425.19047109099995 | |
Poland | 2006 | 528.204189355 | |
Poland | 2007 | 432.71474399999994 | |
Poland | 2008 | 451.259513744 | |
Poland | 2009 | 359.55149619 | |
Poland | 2010 | 355.72928833799995 | |
Poland | 2011 | 353.732700054 | |
Poland | 2012 | 396.2196193720001 | |
Poland | 2013 | 419.2277231170002 | |
Poland | 2014 | 446.49400552000003 | |
Poland | 2015 | 531.353701889 | |
Portugal | 2002 | 97.80148359899998 | |
Portugal | 2003 | 97.46053817999999 | |
Portugal | 2004 | 96.98215337900001 | |
Portugal | 2005 | 113.63602124 | |
Portugal | 2006 | 120.75442385400002 | |
Portugal | 2007 | 144.05546588199996 | |
Portugal | 2008 | 133.780615654 | |
Portugal | 2009 | 136.70651247599997 | |
Portugal | 2010 | 172.387961782 | |
Portugal | 2011 | 165.59096936900005 | |
Portugal | 2012 | 152.95365451200004 | |
Portugal | 2013 | 137.99903750100003 | |
Portugal | 2014 | 191.27908957499997 | |
Portugal | 2015 | 222.978525757 | |
Qatar | 2011 | 24.602314903000003 | |
Qatar | 2012 | 31.665262997 | |
Qatar | 2013 | 43.60443186399999 | |
Qatar | 2014 | 32.847070363 | |
Qatar | 2015 | 41.836869585 | |
Republic of Serbia | 2011 | 18.796171903999998 | |
Republic of Serbia | 2012 | 17.821087 | |
Republic of Serbia | 2013 | 16.262249113000003 | |
Republic of Serbia | 2014 | 12.519155801999997 | |
Republic of Serbia | 2015 | 16.909916253 | |
Romania | 2008 | 101.05905654700003 | |
Romania | 2009 | 107.84048572199998 | |
Romania | 2010 | 121.93434050699999 | |
Romania | 2011 | 127.93483901000002 | |
Romania | 2012 | 109.833407299 | |
Romania | 2013 | 158.621421161 | |
Romania | 2014 | 170.45366854499994 | |
Romania | 2015 | 237.738125816 | |
Russia | 2002 | 143.199269516 | |
Russia | 2003 | 160.12249570900005 | |
Russia | 2004 | 193.37077346800007 | |
Russia | 2005 | 133.19067581 | |
Russia | 2006 | 159.58775847299998 | |
Russia | 2007 | 165.12277963799994 | |
Russia | 2008 | 125.00690186500007 | |
Russia | 2009 | 85.735525481 | |
Russia | 2010 | 119.07894284800003 | |
Russia | 2011 | 154.36411086199996 | |
Russia | 2012 | 155.282329175 | |
Russia | 2013 | 147.24373388799995 | |
Russia | 2014 | 164.825299916 | |
Russia | 2015 | 99.00938686899997 | |
Saudi Arabia | 2002 | 42.841656881000006 | |
Saudi Arabia | 2003 | 34.14979388100001 | |
Saudi Arabia | 2004 | 37.725659101000005 | |
Saudi Arabia | 2005 | 36.982993765 | |
Saudi Arabia | 2006 | 39.512731388000006 | |
Saudi Arabia | 2007 | 56.48027217199998 | |
Saudi Arabia | 2008 | 63.827496203 | |
Saudi Arabia | 2009 | 58.58815504599998 | |
Saudi Arabia | 2010 | 54.21153989400001 | |
Saudi Arabia | 2011 | 66.835191606 | |
Saudi Arabia | 2012 | 74.44187283300002 | |
Saudi Arabia | 2013 | 90.946555524 | |
Saudi Arabia | 2014 | 99.14712965699998 | |
Saudi Arabia | 2015 | 103.90909166899999 | |
Singapore | 2002 | 57.456061361999986 | |
Singapore | 2003 | 52.554538756 | |
Singapore | 2004 | 57.15577941100001 | |
Singapore | 2005 | 49.90519098800001 | |
Singapore | 2006 | 70.865267975 | |
Singapore | 2007 | 63.444957898000006 | |
Singapore | 2008 | 76.959014416 | |
Singapore | 2009 | 64.700659195 | |
Singapore | 2010 | 89.24954079000003 | |
Singapore | 2011 | 88.866435722 | |
Singapore | 2012 | 106.65452638099998 | |
Singapore | 2013 | 91.50625695099998 | |
Singapore | 2014 | 120.61848810400002 | |
Singapore | 2015 | 148.586448654 | |
South Africa | 2002 | 162.53059424699998 | |
South Africa | 2003 | 156.75393201699998 | |
South Africa | 2004 | 167.64389037899997 | |
South Africa | 2005 | 180.13048152399995 | |
South Africa | 2006 | 216.82457813600004 | |
South Africa | 2007 | 174.82944750699994 | |
South Africa | 2008 | 164.23228400899995 | |
South Africa | 2009 | 131.536326752 | |
South Africa | 2010 | 123.43992708600001 | |
South Africa | 2011 | 108.73481208199998 | |
South Africa | 2012 | 118.816167048 | |
South Africa | 2013 | 142.34256589199995 | |
South Africa | 2014 | 124.489544614 | |
South Africa | 2015 | 134.48145320599997 | |
South Korea | 2002 | 66.99341514799998 | |
South Korea | 2003 | 88.62836422599996 | |
South Korea | 2004 | 114.55906924099997 | |
South Korea | 2005 | 119.13064748699998 | |
South Korea | 2006 | 119.403595416 | |
South Korea | 2007 | 127.95651462700002 | |
South Korea | 2008 | 109.46713204 | |
South Korea | 2009 | 58.031894744999995 | |
South Korea | 2010 | 84.789878621 | |
South Korea | 2011 | 108.10505147100001 | |
South Korea | 2012 | 130.74695834 | |
South Korea | 2013 | 154.82306945099998 | |
South Korea | 2014 | 164.58170167000003 | |
South Korea | 2015 | 181.91495477000004 | |
Spain | 2002 | 444.35032662699984 | |
Spain | 2003 | 526.5628755910001 | |
Spain | 2004 | 691.6298150980002 | |
Spain | 2005 | 709.6882412069999 | |
Spain | 2006 | 933.5185725249999 | |
Spain | 2007 | 967.5133240500003 | |
Spain | 2008 | 895.2936935569998 | |
Spain | 2009 | 1011.262230911 | |
Spain | 2010 | 875.2385267690003 | |
Spain | 2011 | 894.8486538060002 | |
Spain | 2012 | 795.8884000999999 | |
Spain | 2013 | 865.731672618 | |
Spain | 2014 | 984.288076086 | |
Spain | 2015 | 1153.2126313230003 | |
Sweden | 2002 | 291.889962082 | |
Sweden | 2003 | 307.88287822399985 | |
Sweden | 2004 | 327.23262297599996 | |
Sweden | 2005 | 333.75659607099993 | |
Sweden | 2006 | 383.0678488109999 | |
Sweden | 2007 | 401.86255744399995 | |
Sweden | 2008 | 417.5198874970002 | |
Sweden | 2009 | 335.08804212900003 | |
Sweden | 2010 | 442.61978441799994 | |
Sweden | 2011 | 457.67308495300017 | |
Sweden | 2012 | 503.056276106 | |
Sweden | 2013 | 516.1356765140001 | |
Sweden | 2014 | 547.4053099270001 | |
Sweden | 2015 | 553.649813626 | |
Switzerland | 2002 | 310.6436904900001 | |
Switzerland | 2003 | 297.14938551000006 | |
Switzerland | 2004 | 292.6073416160002 | |
Switzerland | 2005 | 331.37878951899995 | |
Switzerland | 2006 | 389.227227379 | |
Switzerland | 2007 | 372.4189723909998 | |
Switzerland | 2008 | 348.246871795 | |
Switzerland | 2009 | 354.31432338900004 | |
Switzerland | 2010 | 314.5090652509999 | |
Switzerland | 2011 | 391.20889158700015 | |
Switzerland | 2012 | 425.0321077760002 | |
Switzerland | 2013 | 453.77063772599996 | |
Switzerland | 2014 | 503.073927285 | |
Switzerland | 2015 | 504.37247451300016 | |
Taiwan | 2002 | 18.857968017 | |
Taiwan | 2003 | 20.369664952999994 | |
Taiwan | 2004 | 23.325825051000002 | |
Taiwan | 2005 | 22.123662174 | |
Taiwan | 2006 | 18.944392949999997 | |
Taiwan | 2007 | 23.110429958000005 | |
Taiwan | 2008 | 17.792403013 | |
Taiwan | 2009 | 23.055323988000005 | |
Taiwan | 2010 | 23.329388187 | |
Taiwan | 2011 | 23.635838922 | |
Taiwan | 2012 | 27.022714092999994 | |
Taiwan | 2013 | 28.75108879800001 | |
Taiwan | 2014 | 37.919176399000015 | |
Taiwan | 2015 | 33.658773453 | |
Thailand | 2002 | 21.438677997 | |
Thailand | 2003 | 26.333806054000007 | |
Thailand | 2004 | 29.555614788999996 | |
Thailand | 2005 | 27.289642807999996 | |
Thailand | 2006 | 29.681224137000005 | |
Thailand | 2007 | 36.54388094 | |
Thailand | 2008 | 22.049665063000003 | |
Thailand | 2009 | 39.387633326999996 | |
Thailand | 2010 | 30.076497867000004 | |
Thailand | 2011 | 35.89586111799999 | |
Thailand | 2012 | 38.022603778 | |
Thailand | 2013 | 41.94417494799999 | |
Thailand | 2014 | 35.467313957 | |
Thailand | 2015 | 43.326052338 | |
Turkey | 2002 | 41.18685379499999 | |
Turkey | 2003 | 61.043753971000015 | |
Turkey | 2004 | 55.925491034999986 | |
Turkey | 2005 | 51.86198698 | |
Turkey | 2006 | 91.641897084 | |
Turkey | 2007 | 77.89266464300002 | |
Turkey | 2008 | 75.40592864100002 | |
Turkey | 2009 | 58.85791119500001 | |
Turkey | 2010 | 71.74700676 | |
Turkey | 2011 | 69.419882848 | |
Turkey | 2012 | 91.463656944 | |
Turkey | 2013 | 90.81364351799999 | |
Turkey | 2014 | 102.98828426400001 | |
Turkey | 2015 | 116.80588760799999 | |
United Arab Emirates | 2002 | 60.55888007400001 | |
United Arab Emirates | 2003 | 58.28502412599999 | |
United Arab Emirates | 2004 | 73.19576777799999 | |
United Arab Emirates | 2005 | 61.776979348999994 | |
United Arab Emirates | 2006 | 89.06955610199999 | |
United Arab Emirates | 2007 | 91.49001893399999 | |
United Arab Emirates | 2008 | 123.68644351899998 | |
United Arab Emirates | 2009 | 121.42699499899999 | |
United Arab Emirates | 2010 | 107.22309557900005 | |
United Arab Emirates | 2011 | 118.191408584 | |
United Arab Emirates | 2012 | 133.326225036 | |
United Arab Emirates | 2013 | 161.31613233799996 | |
United Arab Emirates | 2014 | 152.078279318 | |
United Arab Emirates | 2015 | 181.312990062 | |
United States of America | 2002 | 2446.330244300999 | |
United States of America | 2003 | 2233.116193237 | |
United States of America | 2004 | 2406.376630444999 | |
United States of America | 2005 | 2276.8150966149997 | |
United States of America | 2006 | 2536.896371216 | |
United States of America | 2007 | 2333.6141901279993 | |
United States of America | 2008 | 1907.8710551309998 | |
United States of America | 2009 | 1839.1486334340004 | |
United States of America | 2010 | 1765.5577235 | |
United States of America | 2011 | 1842.7915298310008 | |
United States of America | 2012 | 1862.321358502 | |
United States of America | 2013 | 1877.873296906999 | |
United States of America | 2014 | 1982.1863286459998 | |
United States of America | 2015 | 2142.3243470760012 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>DAND - Data Viz</title> | |
<script src="https://d3js.org/d3.v3.min.js"></script> | |
<script src="https://d3js.org/colorbrewer.v1.min.js"></script> | |
<!-- https://github.com/d3/d3-scale-chromatic --> | |
<script src="https://d3js.org/d3-color.v1.min.js"></script> | |
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script> | |
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
<script type="text/javascript" src='support.js'></script> | |
<script type="text/javascript" src='trends.js'></script> | |
<script type="text/javascript" src='map.js'></script> | |
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700" rel="stylesheet"> | |
<link rel="stylesheet" type="text/css" href="newstyle.css"> | |
</head> | |
<body> | |
<!--Tooltip as per Scott Murray--> | |
<div id="tooltip" class='hidden focus-bar map'> | |
<p><span id='tooltip-title'></span></p> | |
<p><span id='tooltip-value'></span></p> | |
</div> | |
<script type="text/javascript"> | |
//----------------------------------------------------------// | |
// *** CHART AND DRAWING AREA *** | |
// Add chart | |
var chart = d3.select("body") | |
.append("svg") | |
.attr("width", outerWidth) | |
.attr("height", outerHeight) | |
.append('g'); | |
// TEST: Append chart buttons | |
var buttons = ['visits', 'purpose', 'origin']; | |
chart.selectAll('text') | |
.data(buttons) | |
.enter() | |
.append('text') | |
.attr('class', 'button') | |
.attr('x', function(d, i) { | |
return 0.7 * innerWidth + i * 60; | |
}) | |
.attr('y', 1.2 * padding.top) | |
.attr('id', function(d) {return d;}) | |
.text(function(d) { | |
return d; | |
}); | |
// Add drawing area | |
var area = chart.append('g') | |
.attr('class', 'area'); | |
// Append title | |
chart.append('g') | |
.attr('id', 'title') | |
.attr('transform', 'translate(' + (3 * padding.left) + ',' + (1.3 * padding.top) + ')') | |
.append('text') | |
.style("text-anchor", "start"); | |
// Start with first visulisation | |
trends(1); | |
// Add click behaviour to buttons | |
d3.select('#visits') | |
.on('click', function() { | |
trends(1) | |
}); | |
d3.select('#purpose') | |
.on('click', function() { | |
trends(2) | |
}); | |
d3.select('#origin') | |
.on('click', function() { | |
map(); | |
}) | |
// This function draws charts for points 3 and 4 | |
/*var map = function() { | |
// Remove elements in area | |
remove_object('*', all=true) | |
// Define color function | |
var color = d3.scale.linear() | |
.range([0,1]); | |
// Change title | |
changeTitle('International Visitors to London by Country of Origin'); | |
// File downloaded from natural earth data as per Scott Murray | |
// File was simplified with mapshaper | |
// coropleth chapter from Scott Murray | |
d3.csv('dataset_geo.csv', parseMap, function(data) { | |
// Extract years | |
var years = d3.set(); | |
data.forEach(function(d) { | |
years.add(d.year) | |
}) | |
var years = years.values(); | |
// Nesting by market, i.e. by country of origin | |
// https://github.com/d3/d3-collection#nests | |
var nested = d3.nest() | |
.key(function(d) { | |
return d.market; | |
}) | |
.entries(data) | |
// Update color domain | |
color.domain([0, | |
roundUpThousand(d3.max(nested, function(d) { | |
return d3.max(d.values, function(x) { | |
return +x.visits; | |
}); | |
}))]); | |
// Transform nested from array of objects to object | |
nested.forEach(function(x) { | |
// Empty object | |
var rv = {}; | |
x.values.forEach(function(d, i) { | |
rv[d.year] = { | |
visits: d.visits, | |
spend: d.spend, | |
rel_spend: d.spend / d.visit | |
} | |
}); | |
// Replace array with object | |
x.values = rv; | |
}) | |
// Load json data (map) | |
d3.json('coord_names_only.json', function(json) { | |
// Enrich map with nested data | |
for (var i = 0; i < nested.length; i++) { | |
var dataCountry = nested[i].key; | |
var dataValues = nested[i].values; | |
for (var j = 0; j < json.features.length; j++) { | |
var jsonCountry = json.features[j].properties.name; | |
if (dataCountry == jsonCountry) { | |
json.features[j].properties.visitors = dataValues; | |
break; | |
} | |
} | |
} | |
// *** Bind data *** | |
var countries = area.selectAll('path') | |
.data(json.features) | |
.enter() | |
.append('path') | |
.attr('d', path) | |
.attr('class', 'map country') | |
.style('stroke', 'white') | |
.style('stroke-width', 0.75) | |
.style('fill', 'white'); | |
// Append year box | |
var year_box = area.append('text') | |
.attr('x', 4 * padding.right) | |
.attr('y', 0.88 * outerHeight) | |
.attr('class', 'year map') | |
.style('opacity', 0) | |
// *** TEST *** | |
// ************************* | |
var focus = area.append('g') | |
.attr('id', 'focus') | |
.attr('class', 'hidden map') | |
.attr('transform', 'translate(' + 4 * padding.right + ',' + 0.63 * outerHeight + ')') | |
var yearAxis = d3.svg.axis() | |
.orient('bottom') | |
.innerTickSize(0) | |
.tickValues([2002, 2015]) | |
.tickPadding(5) | |
focus.append('g') | |
.attr('class', 'axis focus-x'); | |
var xScale = d3.scale.ordinal() | |
.rangeRoundBands([5, 130], 0.05) | |
.domain(years) | |
yearAxis.scale(xScale); | |
area.select('.focus-x') | |
.call(yearAxis); | |
focus.append('g') | |
.attr('class', 'axis focus-y'); | |
var yScale = d3.scale.linear() | |
.range([-30,0]); | |
var valueAxis = d3.svg.axis() | |
.orient('left') | |
.ticks(0); | |
var countryData = function(state) { | |
return area.selectAll('.country') | |
.filter(function(d) { | |
return d.properties['name'] == state; | |
}).data()[0].properties.visitors; | |
};*/ | |
// ************************* | |
// *** END TEST *** | |
// Define update function | |
/*var update_map = function(year) { | |
// Update fill | |
countries.transition() | |
.duration(50) | |
.style('stroke', '#beb7b7') | |
.style('fill', function(d) { | |
// Check if visitors and year data is available | |
if(d.properties.visitors) { | |
if(d.properties.visitors[year]) { | |
var dataColor = color(+d.properties.visitors[year].visits); | |
return d3.interpolateBlues(dataColor); | |
} else { | |
return 'white' | |
} | |
} else { | |
return 'white' | |
} | |
}) | |
// Update year box | |
year_box.transition() | |
.duration(50) | |
.text(year) | |
.style('opacity', 1); | |
// Update tootltip value | |
d3.select('#tooltip-value') | |
.text(function() { | |
if (this.textContent != '') { | |
var state = d3.select('#tooltip-title').node().textContent; | |
var stateData = countryData(state); | |
if (stateData[year]) { | |
d3.select(this) | |
.transition() | |
.duration(500) | |
.text(formatMap(stateData[year].visits)) | |
} else { | |
d3.select(this) | |
.transition() | |
.duration(500) | |
.text('N/A'); | |
} | |
} | |
}); | |
// Update circle (if any) | |
if(focus.select('circle')[0][0]) { | |
focus.select('circle') | |
.transition() | |
.duration(50) | |
.attr('cx', xScale(year) + xScale.rangeBand()/2) | |
.attr('cy', function() { | |
var state = d3.select('#tooltip-title').node().textContent; | |
var stateData = countryData(state) | |
if(stateData[year]){ | |
return yScale(+stateData[year].visits); | |
} | |
}) | |
.style('fill', function() { | |
var state = d3.select('#tooltip-title').node().textContent; | |
var stateData = countryData(state) | |
if(!stateData[year]) { | |
return 'white'; | |
} else { | |
return 'red'; | |
} | |
}) | |
} | |
// Behaviour of clicking on map | |
//debugger; | |
// Update mouseover behaviour | |
countries.on('mouseover', function(d) { | |
// Check if visitors and year data is available | |
if (d.properties.visitors) { | |
if (d.properties.visitors[year]) { | |
// Change the cursor | |
d3.select(this) | |
.style('cursor', 'pointer'); | |
} | |
} | |
}) | |
.on('click', function(d) { | |
var previous = null; | |
if (d3.select('#tooltip-title')[0][0].textContent != '') { | |
previous = d3.select('#tooltip-title')[0][0].textContent; | |
} | |
var current = d.properties.name; | |
// Check if selected | |
var active = this.active? true:false; | |
console.log(previous, current, active) | |
// Check if visitors and year data is available | |
if (d.properties.visitors) { | |
if (d.properties.visitors[year]) { | |
// Change tooltip | |
d3.select("#tooltip") | |
.style("left", (4 * padding.right) + "px") | |
.style("top", (0.68 * outerHeight) + 'px') | |
.style("width", '200px') | |
.classed('map', true) | |
.classed('trend', false) | |
// Add tooltip content | |
d3.select('#tooltip-title') | |
.text(current); | |
d3.select("#tooltip-value") | |
.text(formatMap(d.properties.visitors[year].visits)); | |
// Make tooltip visible | |
//http://bl.ocks.org/d3noob/5d621a60e2d1d02086bf | |
// TESTING | |
var state = d.properties.name; | |
var stateData = countryData(state); | |
var test = Object.keys(stateData) | |
.map(function(key) { | |
return { | |
'x':key, | |
'y':stateData[key].visits | |
} | |
}) | |
yScale.domain([ | |
d3.max(test, function(d) { | |
return +d.y; | |
}), | |
d3.min(test, function(d) { | |
return +d.y; | |
})]); | |
valueAxis.scale(yScale); | |
focus.select('.focus-y') | |
.call(valueAxis); | |
var testLine = d3.svg.line() | |
.x(function(d) { return xScale(d.x) + xScale.rangeBand() / 2; }) | |
.y(function(d) { return yScale(+d.y); }); | |
if (previous!=current) { | |
focus.select('.focus-line') | |
.remove(); | |
focus.select('.focus-circle') | |
.remove(); | |
focus.append('path') | |
.attr('d', testLine(test)) | |
.attr('class', 'focus-line') | |
focus.append('circle') | |
.attr('r', 4) | |
.attr('class', 'focus-circle') | |
.attr('cx', function() { | |
return xScale(year) + xScale.rangeBand() / 2; | |
}) | |
.attr('cy', function() { | |
return yScale(stateData[year].visits) | |
}) | |
.style('fill', 'red') | |
.style('stroke', 'white') | |
.style('stroke-width', 2) | |
d3.select('#focus') | |
.classed('hidden', false); | |
d3.select('#tooltip') | |
.classed('hidden', false); | |
} else { | |
focus.select('.focus-line') | |
.remove(); | |
focus.select('.focus-circle') | |
.remove(); | |
d3.select('#focus') | |
.classed('hidden', true); | |
d3.select('#tooltip') | |
.classed('hidden', true); | |
d3.select('#tooltip-title') | |
.text(''); | |
} | |
// END TESTING | |
this.active = !active; | |
} /*else { | |
if (d3.select('#tooltip-title').textContent != '') { | |
d3.select('#tooltip') | |
.classed('hidden', active); | |
d3.select('#focus') | |
.classed('hidden', active); | |
} | |
}*/ | |
/* } | |
}); | |
}; | |
var year = '2015' | |
update_map(year); | |
year_box.on('mouseover', function() { | |
// Change cursor | |
d3.select(this) | |
.style('cursor', 'ew-resize'); | |
var box = year_box.node().getBBox(); | |
var yearScale = d3.scale.linear() | |
.domain([2002, 2015]) | |
.range([box.x + 5 , box.x + box.width - 5]); | |
year_box.on('mousemove', function() { | |
// Cancel current transition if any | |
area.transition().duration(0); | |
var value = Math.round(yearScale.invert(d3.mouse(this)[0])); | |
if(value < 2002) { | |
return 2002; | |
} else if (value > 2015) { | |
return 2015 | |
} | |
year_box.transition() | |
.duration(150) | |
.text(value); | |
update_map(value.toString()); | |
}) | |
}) | |
// Add legend | |
//http://bl.ocks.org/lucguillemot/37cc6eccbdd365556feb | |
var legend = area.append('g') | |
.attr('class', 'map legend') | |
.attr('transform', 'translate(' + (4 * padding.right) + ',' + (0.88 * outerHeight) + ')') | |
var newData = []; | |
var legend_width = 150; | |
var divisions = 100; | |
var sectionWidth = Math.floor(legend_width / divisions); | |
for (var i=0; i < legend_width; i+= sectionWidth ) { | |
newData.push(i); | |
}; | |
var legend_scale = d3.scale.linear() | |
.domain([0, newData.length - 1]) | |
.range([0, 1]); | |
legend.selectAll('rect') | |
.data(newData) | |
.enter() | |
.append('rect') | |
.attr("x", function(d) { return d; }) | |
.attr("y", 10) | |
.attr("height", 10) | |
.attr("width", sectionWidth) | |
.attr('fill', function(d, i) { | |
var dataColor = legend_scale(i); | |
return d3.interpolateBlues(dataColor); | |
}); | |
legend.append("text") | |
.attr('class', 'legend-range') | |
.text(0) | |
.attr("transform","translate(" + 2.5 +',' + 35 + ')') | |
legend.append("text") | |
.attr('class', 'legend-range') | |
.text(formatMap(color.domain()[1])) | |
.attr("transform","translate(" + 127.5 + ',' + 35 + ')') | |
}) | |
}) | |
};*/ | |
/*d3.select('#origin') | |
.on('click', function() { | |
map(); | |
});*/ | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/// UDACITY DAND - Data Visualisation - Giacomo Sarchioni | |
/*This JavaScript modules contains the code for rendering the | |
visualisation of the final chart in the project (i.e. map)*/ | |
function map() { | |
// Remove all elements in area | |
removeObjs('*'); | |
// Change tooltipWidth to 200 px | |
changeTooltipWidth(200); | |
// Change title | |
changeTitle('International Visitors to London by Country of Origin'); | |
// Append yearBox | |
var yearBox = appendYearBox(); | |
// Append legend | |
//http://bl.ocks.org/lucguillemot/37cc6eccbdd365556feb | |
var legend = appendLegend(); | |
// File downloaded from natural earth data as per Scott Murray | |
// File was simplified with mapshaper | |
// coropleth chapter from Scott Murray | |
d3.csv('dataset_geo.csv', parseMap, function(data) { | |
// Extract years | |
var years = extractYears(data); | |
// Add initial text to yearBox | |
yearBox.text(years[0]); | |
// Update yearBox scale | |
updateYearBoxScale(yearBox, years); | |
// Nesting by market, i.e. by country of origin | |
// https://github.com/d3/d3-collection#nests | |
var nested = extractNested(data); | |
/*Update mapColor domain (max is the maximum number of | |
international visitors from a country throughout history)*/ | |
mapColor.domain([0, roundUpThousand(extractMaxMax(nested))]); | |
// Format legend | |
formatLegend(legend); | |
/*Convert nested values from array of objects to a single | |
object, where keys are the years*/ | |
nested.forEach(function(obj) { | |
newObj = {}; | |
obj.values.forEach(function(d) { | |
newObj[d.year] = d.value; | |
}); | |
// Replace array with object | |
obj.values = newObj; | |
}); | |
// Load geoJSON data | |
d3.json('world_simple.json', function(json) { | |
// Source Scott Murray choropleth | |
json = addDataToMap(nested, json); | |
// Bind data | |
var countries = area.selectAll('path') | |
.data(json.features) | |
.enter() | |
.append('path') | |
.attr('d', mapPath) | |
.attr('class', 'map country'); | |
// Start with the first year | |
updateMap(countries, yearBox, years[0]); | |
// Add yearBox mousemove effect | |
yearBox.on('mousemove', function() { | |
yearBoxMove(yearBox, d3.mouse(this), countries); | |
}); | |
}) | |
}) | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*/// UDACITY DAND - Data Visualisation - Giacomo Sarchioni*/ | |
/*This is the main CSS stylesheet for the project*/ | |
.axis { | |
font-family: 'Roboto Condensed', sans-serif; | |
font-weight: 300i; | |
font-size: 14px; | |
} | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.axis path { | |
display: none; | |
} | |
.bar { | |
fill: #428bca; | |
} | |
.bar.focus { | |
fill: #ffbf00; | |
} | |
.country { | |
stroke: #beb7b7; | |
stroke-width: 0.75; | |
fill: white; | |
} | |
.hidden { | |
display: none; | |
} | |
.legend-range { | |
font-family: 'Roboto Condensed', sans-serif; | |
font-weight: 300i; | |
font-size: 12px; | |
text-anchor: end; | |
fill: #beb7b7; | |
} | |
.legend-title { | |
font-family: 'Roboto Condensed', sans-serif; | |
font-weight: 400; | |
font-size: 12px; | |
text-anchor: start; | |
fill: grey; | |
} | |
.legend-range.min{ | |
text-anchor: start; | |
} | |
.line { | |
fill: none; | |
} | |
.purpose path { | |
stroke-width: 2; | |
} | |
.purpose text { | |
font-family: 'Roboto Condensed', sans-serif; | |
font-weight: 300; | |
font-size: 16px; | |
} | |
.purpose.focused path { | |
stroke-width: 3; | |
} | |
.purpose.focused text { | |
font-weight: 400; | |
} | |
.purpose.unfocused path { | |
stroke: #d8d8d8; | |
} | |
.purpose.unfocused text { | |
fill: #d8d8d8; | |
} | |
.purpose .percentage-box { | |
text-align: left; | |
alignment-baseline: middle; | |
} | |
.purpose .purpose-box { | |
cursor: default; | |
text-anchor: start; | |
} | |
.tick line { | |
stroke-width: 0.5; | |
opacity: 0.3; | |
} | |
#title { | |
font-family: 'Roboto Condensed', sans-serif; | |
font-weight: 700; | |
font-size: 18px; | |
} | |
#tooltip { | |
position: absolute; | |
pointer-events: none; | |
height: auto; | |
} | |
#tooltip.focus-bar { | |
text-align: center; | |
padding: 10px; | |
background-color: white; | |
border-style: solid; | |
border-color: black; | |
border-width: 1px; | |
opacity: 0.9; | |
-webkit-border-radius: 10px; | |
-moz-border-radius: 10px; | |
border-radius: 10px; | |
} | |
#tooltip.focus-bar p { | |
margin: 0; | |
font-family: 'Roboto Condensed', sans-serif; | |
font-size: 16px; | |
line-height: 20px; | |
} | |
#tooltip-title { | |
font-weight: 700; | |
} | |
.year { | |
font-family: 'Roboto Condensed', sans-serif; | |
font-weight: 300; | |
font-size: 80px; | |
fill: grey; | |
cursor: ew-resize; | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/// UDACITY DAND - Data Visualisation - Giacomo Sarchioni | |
/*This JavaScript modules contains all the supporting functions for | |
the Data Analyst Nanodegree - Data Visualisation project.*/ | |
// ### MARGINS ### | |
//Margins as per convention from bl.ocks.org | |
var margin = {top: 20, right: 10, bottom: 20, left: 10}; | |
var padding = {top: 20, right: 20, bottom: 20, left:20}; | |
var outerWidth = 960, | |
outerHeight = 500, | |
width = outerWidth - margin.left - margin.right, | |
height = outerHeight - margin.top - margin.bottom, | |
innerWidth = width - padding.left - padding.right, | |
innerHeight = height - padding.top - padding.bottom | |
// ### UPDATING CHART ### | |
// Title | |
function changeTitle(newTitle) { | |
chart.select('#title') | |
.select('text') | |
.text(newTitle); | |
}; | |
// ### FORMATTING ### | |
// Formatting nymbers | |
var formatDec = d3.format('.2f'); | |
var formatInt = d3.format(',.0f'); | |
var formatPerc = d3.format(',%'); | |
function formatMillAxis(value) { | |
return formatInt(parseFloat(value) / 1e3) + ' M'; | |
} | |
function formatMill(value) { | |
return formatDec(parseFloat(value) / 1e3) + ' M'; | |
}; | |
function formatMap(value) { | |
return formatInt(parseFloat(value) * 1e3); | |
}; | |
function roundUpThousand(value) { | |
/*Round up to the next hundredth thousand for a value expressed | |
in thousands*/ | |
return Math.ceil(value / 1e2) * 1e2; | |
}; | |
/*http://bl.ocks.org/eesur/4e0a69d57d3bfc8a82c2*/ | |
//https://developer.mozilla.org/en/docs/Web/API/Node/appendChild | |
d3.selection.prototype.moveToFront = function() { | |
return this.each(function() { | |
this.parentNode.appendChild(this); | |
}); | |
}; | |
// ### DATA PARSING ### | |
// Trends | |
function parseTrends(data) { | |
for (var key in data) { | |
if (key != 'year') { | |
data[key] = +data[key]; | |
} | |
} | |
return data; | |
}; | |
// Map | |
function parseMap(data) { | |
for (var key in data) { | |
if (key == 'value') { | |
data[key] = +data[key]; | |
} | |
} | |
return data; | |
}; | |
// ### OBJECT REMOVING ### | |
// Remove objects from area | |
function removeObjs(object) { | |
area.selectAll(object).remove(); | |
}; | |
// ### TOOLTIP MANAGING ### | |
// Change tooltip title | |
function changeTooltipTitle(newTitle) { | |
d3.select('#tooltip-title') | |
.text(newTitle); | |
}; | |
// Change tooltip value | |
function changeTooltipValue(newValue) { | |
d3.select('#tooltip-value') | |
.text(newValue); | |
}; | |
// Change tooltip width | |
function changeTooltipWidth(newValue) { | |
d3.select('#tooltip') | |
.style('width', newValue + 'px'); | |
}; | |
// Change tooltip class | |
function changeTooltipClass(classed, boolean) { | |
d3.select('#tooltip') | |
.classed(classed, boolean); | |
} | |
// Change tooltip position | |
function changeTooltipPosition(left, top) { | |
d3.select('#tooltip') | |
.style('left', left + 'px') | |
.style('top', top + 'px'); | |
} | |
// ### D3 SCALES ### | |
// Axis scales | |
var xScale = d3.scale.ordinal(); | |
var yScale = d3.scale.linear(); | |
var yearBoxScale = d3.scale.linear(); | |
var legendScale = d3.scale.linear().range([0,1]); | |
// Update yearBoxScale | |
function updateYearBoxScale(yearBox, years) { | |
// Get BBox of yearBox | |
var box = yearBox.node().getBBox(); | |
// Define domain and range of yearScale | |
yearBoxScale.domain([years[0], years[years.length - 1]]) | |
.range([box.x + 5, box.x + box.width - 20]); | |
}; | |
// Color scales | |
var trendColor = d3.scale.ordinal().range(colorbrewer.Set1[5]); | |
var mapColor = d3.scale.linear().range([0,1]); | |
// ### D3 AXIS ### | |
var xAxis = d3.svg.axis().orient('bottom'); | |
var yAxis = d3.svg.axis().orient('left'); | |
// ### LINE ### | |
var line = d3.svg.line() | |
.x(function(d) { return xScale(d.year) + xScale.rangeBand() / 2; }) | |
.y(function(d) { return yScale(d.value); }); | |
// ### PROJECTIONS ### | |
var mapProjection = d3.geo.mercator() | |
.scale(105) | |
.translate([outerWidth/1.65, outerHeight/1.4]); | |
var mapPath = d3.geo.path().projection(mapProjection); | |
// ### CREATE PURPOSE OBJECT ### | |
function createPurposesData(data) { | |
/*Creates an object where for each purpose (key), there is an | |
array of values, one for every year*/ | |
var dataPurposes = Object.keys(data[0]).slice(1,6).map(function(purpose) { | |
return { | |
purpose: purpose, | |
values: data.map(function(d) { | |
return { | |
year: d.year, | |
value: d[purpose] | |
}; | |
}) | |
}; | |
}) | |
return dataPurposes; | |
}; | |
// ### EXTRACTING VALUES ### | |
// Extract max value of the max values in an object | |
function extractMaxMax(data) { | |
return d3.max(data, function(d) { | |
return d3.max(d.values, function(d) { | |
return d.value; | |
}); | |
}); | |
}; | |
// Extract properly formatted purpose name from an Object | |
function extractPurposeName(purpose, datum) { | |
if(purpose == 'VFR') { | |
return 'Visiting friends and relatives' | |
} else { | |
return datum.purpose; | |
} | |
}; | |
// Extract purpose percentage | |
function extractPurposePerc(datum, index) { | |
return formatPerc(datum.values[index].value); | |
}; | |
// Extract y of purpose-box | |
function extractPurposeBoxY(purpose, datum, index) { | |
// Ad hoc code to position labelling correctly | |
if (purpose == 'Business') { | |
return yScale(datum.values[index].value) + 25; | |
} else if (purpose == 'VFR') { | |
return yScale(datum.values[index].value) - 25; | |
} else { | |
return yScale(datum.values[index].value) - 15; | |
} | |
}; | |
// Extract nested, i.e. visits data by country as a JS object | |
function extractNested(data) { | |
return d3.nest() | |
.key(function(d) { | |
return d.market; | |
}) | |
.entries(data); | |
}; | |
// Extract years from geo dataset | |
function extractYears(data) { | |
years = d3.set(); | |
data.forEach(function(d) { | |
years.add(d.year); | |
}) | |
return years.values(); | |
} | |
// ### MERGE DATASETS *** | |
// Add visitors to data to geoJSON | |
function addDataToMap(data, map) { | |
for (var i = 0; i < data.length; i++) { | |
var dataCountry = data[i].key; | |
var dataValues = data[i].values; | |
for (var j = 0; j < map.features.length; j++) { | |
var mapCountry = map.features[j].properties.name; | |
if (dataCountry == mapCountry) { | |
map.features[j].properties.visitors = dataValues; | |
break; | |
} | |
} | |
}; | |
return map; | |
}; | |
// ### UPDATE MAP ### | |
// Interpolate mapColor in Blue continous scale | |
function countryInterpolate(value) { | |
return d3.interpolateBlues(mapColor(value)); | |
}; | |
function legendInterpolate(value) { | |
return d3.interpolateBlues(legendScale(value)); | |
} | |
// Update countries fill with transition | |
function countriesTransition(countries, year) { | |
countries.transition() | |
.duration(50) | |
.style('fill', function(d) { | |
if(d.properties.visitors) { | |
if(d.properties.visitors[year]) { | |
return countryInterpolate(d.properties.visitors[year]); | |
}; | |
}; | |
}); | |
}; | |
function yearTransition(yearBox, year) { | |
yearBox.transition() | |
.duration(50) | |
.text(year); | |
}; | |
function updateMap(countries, yearBox, year) { | |
// Update countries fill | |
countriesTransition(countries, year); | |
// Update year | |
yearTransition(yearBox, year); | |
}; | |
// ### OBJECT APPENDING ### | |
// Append map yearBox | |
function appendYearBox() { | |
return area.append('text') | |
.attr('x', 5 * padding.right) | |
.attr('y', 0.88 * outerHeight) | |
.attr('class', 'map year') | |
}; | |
function appendLegend() { | |
return area.append('g') | |
.attr('class', 'map legend') | |
.attr('transform', 'translate(' + (5.2 * padding.right) + ',' + (0.88 * outerHeight + 25) + ')'); | |
}; | |
// ### LEGEND MANAGING ### | |
function formatLegend(legend) { | |
// Define legendData | |
var legendData = []; | |
for (var i = 0; i < 150; i += 1) { | |
legendData.push(i); | |
}; | |
// Update legend scale | |
legendScale.domain([0, legendData.length - 1]); | |
// Add legend sections | |
legend.append('g') | |
.attr('class', 'legend-bar') | |
.selectAll('rect') | |
.data(legendData) | |
.enter() | |
.append('rect') | |
.attr('x', function(d) {return d}) | |
.attr('y', '5') | |
.attr('height', '10') | |
.attr('width', '1') | |
.attr('fill', function(d, i) { | |
return legendInterpolate(i); | |
}); | |
// Append title | |
legend.append('text') | |
.attr('class', 'legend-title') | |
.text('International Visitors to London'); | |
// Append min | |
legend.append('text') | |
.attr('class', 'legend-range min') | |
.text(0) | |
.attr("transform","translate(0" +',' + 30 + ')'); | |
// Append max | |
legend.append('text') | |
.attr('class', 'legend-range') | |
.text(formatMap(mapColor.domain()[1])) | |
.attr("transform","translate(" + 150 +',' + 30 + ')'); | |
}; | |
// ### MOUSE EFFECTS ### | |
// Bar mouseover | |
function barOver(d, selected, tooltipWidth) { | |
// Extract x position | |
var xPos = parseFloat(selected.attr('x')); | |
// Calculate left and top for tooltip | |
var left = xPos - (tooltipWidth - xScale.rangeBand()) / 2 | |
var top = innerHeight - 3.5 * padding.bottom; | |
// Change tooltip position | |
changeTooltipPosition(left, top); | |
// Change tooltip's title and value | |
changeTooltipTitle(d.year); | |
changeTooltipValue(formatMill(d.visits)); | |
// Change tooltip width | |
changeTooltipWidth(80); | |
// Make tooltip visible and change style | |
changeTooltipClass('hidden', false); | |
changeTooltipClass('focus-bar', true); | |
// Make bar focus | |
selected.classed('focus', true) | |
}; | |
// Bar mouseout | |
function barOut(selected) { | |
// Make tooltip invisile | |
changeTooltipClass('hidden', true); | |
// Reset bar color | |
selected.classed('focus', false); | |
}; | |
// Purpose box mouseover | |
function purposeBoxOver() { | |
// Move selection to fron | |
d3.select(this.parentElement).moveToFront(); | |
// Extract purpose | |
var selectedPurpose = this.parentElement.classList[0]; | |
// Change class based on selection | |
area.selectAll('.purpose') | |
.classed('unfocused', function() { | |
if(this.classList[0] != selectedPurpose) { | |
return true; | |
}; | |
}) | |
.classed('focused', function() { | |
if(this.classList[0] == selectedPurpose) { | |
return true; | |
}; | |
}); | |
}; | |
// Purpose box mouseout | |
function purposeBoxOut() { | |
area.selectAll('.purpose') | |
.classed('unfocused', false) | |
.classed('focused', false) | |
}; | |
// Yearbox mousemove | |
function yearBoxMove(yearBox, mouseValue, countries) { | |
// Cancel current transition if any | |
area.transition().duration(0); | |
// Extract year using yearBoxScale | |
var yearValue = Math.round(yearBoxScale.invert(mouseValue[0])); | |
// Trim yearValue | |
if(yearValue < 2002) { | |
return 2002; | |
} else if (yearValue > 2015) { | |
return 2015 | |
}; | |
// Change text of yearBox | |
yearBox.transition() | |
.duration(150) | |
.text(yearValue); | |
// Update map | |
updateMap(countries, yearBox, yearValue.toString()); | |
}; | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/// UDACITY DAND - Data Visualisation - Giacomo Sarchioni | |
/*This JavaScript modules contains the code for rendering the | |
visualisation of the first two charts in the project (i.e. Trends)*/ | |
function trends(story) { | |
// Remove any map | |
removeObjs('.map'); | |
// Define tooltip width | |
var tooltipWidth = 80; | |
// Define range for xScale | |
xScale.rangeRoundBands([ | |
5 * padding.left, | |
outerWidth - 3 * padding.right], | |
0.05); | |
// Define range for yScale | |
yScale.range([innerHeight, 6 * padding.top]); | |
// Upload data | |
var data = d3.csv('dataset.csv', parseTrends, function(data) { | |
// Append x and y axis | |
area.append('g') | |
.attr('class', 'x axis') | |
.attr('transform', 'translate(0,' + (innerHeight + padding.bottom) + ')') | |
area.append('g') | |
.attr('class', 'y axis') | |
.attr('transform', 'translate(' + 4.5 * padding.left + ',0)') | |
// Update axis | |
xAxis.innerTickSize(0); | |
yAxis.innerTickSize(0).ticks(4); | |
// Update xScale domain and call axis | |
xScale.domain(data.map(function(d) {return d.year; })); | |
xAxis.scale(xScale); | |
area.select('.x').call(xAxis) | |
// Choose story to render based on input | |
if(story==1) { | |
drawTrendOne(data); | |
} else { | |
drawTrendTwo(data); | |
}; | |
// Define function to render first trend story | |
function drawTrendOne(data) { | |
// Remove object from second trend, i.e. purpose (if any) | |
removeObjs('.purpose'); | |
// Hide tooltip | |
changeTooltipClass('hidden', true); | |
// Change tooltip width | |
changeTooltipWidth(tooltipWidth); | |
// Change title | |
changeTitle('International Visitors to London (in Millions)'); | |
// Update yScale domain and format, and call axis | |
yScale.domain([0, d3.max(data, function(d) { | |
return d.visits; | |
})]); | |
yAxis.tickFormat(function(d) {return formatMillAxis(d);}) | |
.scale(yScale); | |
area.select('.y').call(yAxis); | |
// Bind data | |
var bars = area.selectAll('rect') | |
.data(data) | |
bars.enter() | |
.append('rect') | |
.attr('class', 'bar') | |
.attr('width', xScale.rangeBand()) | |
.attr('height', 0) | |
.attr('x', function(d) { | |
return xScale(d.year); | |
}) | |
.attr('y', innerHeight) | |
// add transition | |
.transition() | |
.delay(function(d, i) { | |
return i / (data.length - 1) * 500; | |
}) | |
.duration(500) | |
.attr('y', function(d) { | |
return yScale(d.visits) | |
}) | |
.attr('height', function(d) { | |
return innerHeight - yScale(d.visits); | |
}); | |
// Add mouseover and mouseout effects | |
bars.on('mouseover', function(d) { | |
barOver(d, d3.select(this), tooltipWidth); | |
}) | |
.on('mouseout', function() { | |
barOut(d3.select(this)); | |
}) | |
}; | |
// Define function to render the second story | |
function drawTrendTwo(data) { | |
// Hide tooltip | |
changeTooltipClass('hidden', true); | |
// Remove bars with transition | |
area.selectAll('.bar') | |
.transition() | |
.duration(750) | |
.attr('y', innerHeight) | |
.attr('height', 0) | |
.remove(); | |
// Change chart title | |
changeTitle('Purpose of International Visits to London (% of visitors)') | |
// Create dataPurposes object | |
// https://bl.ocks.org/mbostock/3884955 | |
var dataPurposes = createPurposesData(data); | |
// Update trendColor scale domain | |
trendColor.domain(dataPurposes.map(function(d) {return d.purpose; })) | |
// Update yScale domain | |
yScale.domain([0, extractMaxMax(dataPurposes)]) | |
// Update yAxis formatting and call it | |
yAxis.ticks(4) | |
.tickFormat(function(d) {return formatPerc(d); }) | |
.innerTickSize(-innerWidth + 3 * padding.right) | |
.scale(yScale); | |
area.select('.y').call(yAxis); | |
// Bind data | |
var purposes = area.selectAll('.purpose') | |
.data(dataPurposes) | |
.enter() | |
.append('g') | |
.attr('class', function(d) { | |
return d.purpose + ' purpose' | |
}); | |
// Add line with animation | |
//https://css-tricks.com/svg-line-animation-works/ | |
purposes.append("path") | |
.attr("class", 'line') | |
.attr("d", function(d) { | |
return line(d.values); | |
}) | |
.attr("stroke", function(d) { return trendColor(d.purpose); }) | |
.style("stroke-dasharray", innerWidth) | |
.style('stroke-dashoffset', innerWidth) | |
.transition() | |
.duration(1500) | |
.style('stroke-dashoffset', 0); | |
// http://bl.ocks.org/d3noob/8603837 | |
// Add text at the beginning of the line | |
purposes.append('text') | |
.attr('class', 'purpose-box') | |
.attr('x', function(d) { | |
return xScale(d.values[0].year) + xScale.rangeBand() / 2; | |
}) | |
.attr('y', function(d) { | |
var purpose = this.parentElement.classList[0]; | |
return extractPurposeBoxY(purpose, d, 0); | |
}) | |
.text(function(d) { | |
var purpose = this.parentElement.classList[0]; | |
return extractPurposeName(purpose, d, 0); | |
}) | |
.attr('fill', function(d) { | |
return trendColor(d.purpose); | |
}) | |
.style('opacity', 0) | |
.transition() | |
.duration(1500) | |
.style('opacity', 1); | |
// Add text at the end of the line | |
purposes.append('text') | |
.attr('class', 'percentage-box') | |
.attr('x', function(d) { | |
return xScale(d.values[d.values.length - 1].year) + 35; | |
}) | |
.attr('y', function(d) { | |
var purpose = this.parentElement.classList[0]; | |
return yScale(d.values[d.values.length - 1].value); | |
}) | |
.text(function(d) { | |
// Extarct precentage of last value | |
return extractPurposePerc(d, d.values.length - 1); | |
}) | |
.attr('fill', function(d) { | |
return trendColor(d.purpose); | |
}) | |
.style('opacity', 0) | |
.transition() | |
.duration(1500) | |
.style('opacity', 1); | |
// Add mouseover and mouseout effects when selecting purpose-box | |
// Problem of JS taking precedence over CSS | |
// http://stackoverflow.com/questions/15709304/d3-color-change-on-mouseover-using-classedactive-true | |
area.selectAll('.purpose-box') | |
.on('mouseover', purposeBoxOver) | |
.on('mouseout', purposeBoxOut); | |
} | |
}); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment