tokyo wind mapxumaoran.com/projects/reports/visual.pdf6 ((( 777kkkååå vût*qu ¿hy+Å...
TRANSCRIPT
-
⌧⌧⌧¨̈̈ŒŒŒõõõ˛̨̨Tokyo Wind Map
MAORAN XU, HAO FU1
October 24, 2017
1Students from DATA130012.01, Visualization Class
-
ii
-
For Visualization Class, 2017 Spring.
-
iv
-
Contents
1 èèè��� 1
2 pppnnn∆∆∆⌥⌥⌥ 3
2.1 pn∑÷⇢⌘Ï:¿H È⌧¨ . . . . . . . . . . . . . . . . . 32.2 pn⌅⌃⇢˙À⇥�Ô∆�Ñpn . . . . . . . . . . . . . . . 42.3 0˛pn⇢˙À0˛�⌥∞¿KŸπ . . . . . . . . . . . . . . 5
3 ⌘⌘⌘œœœ::: 7
3.1 ⇢Ù“
-
vi CONTENTS
6.4 „�”Ñ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
-
1
èèè���
\:pnÔ∆�˛↵Ñ�+'\⇢�⌘ÏÛ�’(�õ∞û-ÑpnZ˙
�˝˝��∫§í� é� ✏IÑ\¡⇥Hint.FM1åEarthNullschool21⌃+ZÜŸ7Ñ$*yÓ�÷Ï)(é˝˝∂)pnQ3Ñpn�˘é˝
⇢Û�L⇤ÙÖÑz(œ�↵A�)¶Ipn(0˛⌦ZÜàæéÑÔ
∆��vÔÂû∞0˛Ñ÷®�✏ˆß+ÑÙ∞‚⇥v-�Œõpn
ÑÔ∆�y+8�⌘⇥AøãÑ®;⇥8⇠é�1ó�/˙é‚ŒõÑ
ÓÑ_⇢ó0∆…Ñ´◊⇥
Figure 1.1: Hint.FMÑ⇣ú˛
1http://hint.fm/wind/gallery/mar-14.js.html2https://earth.nullschool.net/3http://ndfd.weather.gov/technical.htm
1
-
2 1. è�
ÂÂÂ\\\ÇÇÇ»»»
Â\ÑA↵;Å⇧Ïpn∆Ñ∑÷�pnÑ⌅⌃å°ó�˘0˛�⇣Ô∆
��˘ŒõpnåÙ⇢pnÑÔ∆��§íü˝å�õMÔæ°⇥⌘ÏÑ
•J_⇢ Ÿ7ÑzèU�⇥
t*yÓŒÔ∆�π’Ñ˙À�0§íQuÑ6\˝/(Javascriptå⇣Ñ��©Üd3.js, node.jsIÂw�ì⇥�pnÑ,÷�t⌃ålb(python2€L⌅⌃⇥
-
2
pppnnn∆∆∆⌥⌥⌥
2.1 pppnnn∑∑∑÷÷÷⇢⇢⇢⌘⌘⌘ÏÏÏ:::¿¿¿HHH ÈÈÈ⌧⌧⌧¨̈̈
pnÑ∑÷ÔÂÙ/,�eÑ⌘⇠⇥Hint.FM«(Ñ/NDFSé˝˝∂pn1�Ê�⌘Ï˝∂_ apn�°ÑAPI——-˝apnQ2�F/IËå1àªÊ��pnјBàb�åjÛa”Ñpn�⌅⌃˘V˝/�>Ñ��„
ó^8Ê∆⇥pnÑ
-
4 2. pn∆⌥
⌘Ï�ÅHäÉÏ�0⇢⌧⌧WŒ112.5¶�⌧WŒ135¶Ÿ7ÑpW�·o�6��Œ�”��ó0�*(x,y)P⌥Ñsb⌘œ⇥
Ê��dÜŒ⌘Â�ÿ AaÇå'�.�PM2.5K{Ñza”íPS¶� )�¶pn⇥)(Ÿ7Ñ�*pn∆�⌘Ï1ÔÂÿ6Â
–*za”⌥⌥�Â):˝p
-
2.3. 0˛pn⇢˙À0˛�⌥∞¿KŸπ 5
{"stationId":131,"so2":0.006,"ox":0.061,"no":0.004,"no2":0.03,"nox":0.034,"spm":46,"pm25":35,"wd":90,"wv":0.9,"temp":33.2,"hum":60.9}v-“wd”å“wv”⌃+„hŒ⌘(direction)åŒ�(velocity)�1œ⌦�
Ç@ÙÑ�⌘ÏÂc⌫π⌘:0¶�zˆàû†�‡Œ:360¶�⇢«WÕŒ⌘åv„hÑ“¶˙ÀÜ��˘îs˚��Ÿ‘ÉœÅP⌥-Ñh:⇢
π⌘“�JÑ⇥:Ü(sb⌦Ù}0h:⌘œ�ÅZ�elb⇢
(fl, ◊) æf
(x, y)
lbl✏:⇢
fl = wv, ◊ = wd ◊ 2fi360
x = ≠fl sin ◊, y = fl cos ◊
ŸÃ �*✏ÄÁ⇢1éŒ⌘Ñ✏�/Œ9eÑπ⌘�⌧WŒ✏s@9
⌘⌫ÑŒ�@Âó0Ñπ⌘Å÷¯Õp⇥»1éœ Œ⌦0↵/✓ûz
è�ppåP⌥t¯Õ�yπ⌘»Å÷�!¯Õp�ó0Ÿ*”ú⇥
2.3 000˛̨̨pppnnn⇢⇢⇢˙̇̇ÀÀÀ000˛̨̨���⌥⌥⌥∞∞∞¿¿¿KKKŸŸŸπππ
0˛Ô∆�-Ñï˛�Å0˛‡UpnÑU:��Å~0⌧¨0˛πLÑ
‡Upn⇥pneê:˝�p
-
6 2. pn∆⌥
-
3
⌘⌘⌘œœœ:::
↵bÅ€LŒ⌘˛Ñÿ6Ü⇥'ÙÑ�Ô/ª6\Ô∆�ÑíP�particles �íP��c=(0˛⌦Ñ⌅*Mn��œ*Mn �*Œ⌘œv�t/àÌш;�vt1⌥⌘Ü0↵�ˆ;íP–®ÑÔÑ⇥1Ÿ7�'�'0ÿ6íP�Ÿœ�'KÙ†ˆÙÙî�1ÔÂ↵0ŒÑbaÜ⇥
£↵bÑ˚°1Å(0˛⌦˙À⌘œ:�©œ�*=0⌘œ:⌦Ñí
P˝Ô“®we”⇥
3.1 ⇢⇢⇢ÙÙÙ“““
-
8 3. ⌘œ:
v-v:Åó0Ñ
-
4
®®®;;;666\\\
∞(⌘Ï ÜŒíP�Óò/�H©ÉÏ®we�⇠é0®we⇥⌘Ï�
Å�aˆÙt�œ�*íP ÉÑ�}h��(�}h�Ö;˙�ah
˘⇥
4.1 ���⇢⇢⇢©©©íííPPP®®®wwweee
�*íP@:&Ñ·o⇢íPMnP⌥(x,y)��¶Œ⌘(dx,dy,v),Úœœ«Ñ'p⇥íP€e↵�'KMÅ⇤flÉ/&Úœæ0Ü�'h��}⌫
=��⇧/&Úœ˙L⇥(*„�h1œŸ7⇢
óóó’’’⇢íP�for each particle do∑óMn(x,y)��¶(dx,dy,v)å�}
-
10 4. ®;6\
(canvas⌦Zc.beginPath(); c.moveTo(x,y); c.lineTo(xt,yt); c.stroke(); Ÿ7‡eÕ\1ÔÂû∞Ü⇥
ÙÕÅÑÓò/Å©«ªÑíP⇣⇣à1�&⇡Ÿ7Ñ✏øµ⇢(0
˛⌦äÔä⇢��˝↵0à}Ñ�aaAÃÑÚøÜ⇥
�*à ✏�ÑÄÁ⇢(œ�'ÿ6øµ«��(canvas⌦†�*�✏�¶:–Ñ˛B�ŸÔÂ(fillRectπ’ªk�BcanvasÑÈb⇥⌘ÏäglobalCompositeOperation^'æ:"destination-in"�ÔÂ(0˛->:J✏�Èb�Í 0˛ÖÑÈb⇢´>:��⇢Ü÷0v÷:fl⇥Ÿ
7Ñ›�œ�aÌøµÑ�}1:1/–'⇥Ÿ*«↵1œ/;�17�↵
�Õ�✏�úô�é/⇣ÿãÑøa1;Ü˙e⇥ãû¡��– = 0.05ˆ⇡
ŸÕπ’˝æ0à�⇡ÑHú⇥
4.3 ⇠⇠⇠���⇢⇢⇢ZZZ˙̇̇ÙÙÙéé鬬¬ÑÑÑ®®®;;;
4.3.1 ¬¬¬ppp⇤⇤⇤ttt
ñHÅnöÑ⇣®;Ñ�õ¬p�Â↵/⌘Ï�’�…óHú�⇡Ѭ
p⇢
• íP;p⇢ParticleCount = 500
• íP�'�}h�⇢40'
• 'ëá⇢œ“7∞Ñ'p�÷�,flash®;Ñ24'/“
• Œ�˘î0œ ⌦Ñ˚®�¶lb⇢1:1Ñ‘ã1ÔÂÜ�Hú�⇡⇥
• œ�'«�˛BÑ✏�¶⇢– = 0.05�úr:—r
• —ª“
-
5
üüü˝̋̋æææ°°°
ŒõpnÚœ˝�(Aø®;Ñπ✏U∞˙e�⌘Ï�ÅäÉLe0�*
ü˝'ÑQuÃU∞˙e⇥Ÿ*QuÔ–õà⇢Ñü˝�⇧Ï∫�0˛
ѧí�ûˆÑapnU:åÜÚpn‚�t⌫‡Œ�˜ËŒIy
ä)ÑU:⇥
Ê��1épn∆ÿ⇧Ïà⇢Ñza”⌥p )�¶I⌥
⌥�⌘Ï�7ÔÂ(“
-
12 5. ü˝æ°
5.1 ˆ̂̂ÙÙÙttt⇢⇢⇢ûûûˆ̂̂���ÜÜÜÚÚÚpppnnnÑÑÑUUU:::
⌧¨)pn/œ✏ˆÙ∞Ñ�⇢«ûˆ,÷˝©pnÍ®›X0,0Ñ
pnì�ç÷˙eZÔ∆�⇥(Qu⌦�⌘Ï–õÜD—�hÑ‚�Ô
Â⇢«✏ˆåÂP€LM�⁄®⇥
œ�✏ˆÑpn(⌅⌃å�˝ gSˆÂ�X®�Ç⇢2017-05-20-15.json.Çú ⌥∑ó“�✏ˆ�”Ñpn˜B}‰�1⇢⇢«navigateToHour˝p∑ó2017-05-20-16Ñáˆ���)�1/24✏ˆ�⇥⌘Ï⇢«c⇡hæ✏ª9Må⌃rÂ��Œ�~0X>(/dataÓU↵Ñáˆ�⇥
5.2 aaattt⇢⇢⇢yyyäää)))ÑÑÑHHH⌫⌫⌫§§§
Í↵�)ÑŒõ˛àæÂSS)wSÑ)/¿H�@Â⌘Ï6\Ü�*
)t�ÔÂ⇤˙‡ŒÑ)�↵¥ËÑ)�⇢ÛŒeˆÑ)⇥Ÿ
*)t\:¬⇤�˝⇤fl⌅Õ)↵⌘ÏÔ∆�Ñh∞�_ÔÂ∑âS
MÑ)'Ç/�7Ñ⇥⇢«)Q1Â~ÜÚ)≈µ�⌘Ï ÈÑpn
Ç↵⇢
ÂÂÂ��� ))) yyyπππ
2017t7�1Â10π 4Ë�‡Œ ŒA�à◆b�⇥-√.'�iS¶�>‘ :ÿ�°˝ic˙ª
2017t5�20Â15π t⌫�WŒ3ß c8Œ��⇥-√ÌõHîà�>Œ�ÉN�a”iS¶Éÿ
2017t6�2Â15π t⌫�WOWŒ 5ß ŒA�^8Î�¶à✏�⌅a”i⌥⌥˝ÉNsG
2017t6�2Â18π ˜Ë �>Ñ:˘A�a”i⌥⌥N
2016t8�22Â15π Œ“≤lÒ” Œõ^8:�æ030lÃœ✏ˆ�4èMË&e90%ÊÛѶ
Â↵ŸE˛U:Ü2016t,9˜:Ì&Œ¥≤lÒ≠˚⌧¨ˆÑŒõ˛⇥
1http://www.tenki.jp/past/
-
5.3. Ãot⇢U:��Ñz⌥⌥ 13
Figure 5.2: Œ“≤lÒ”
5.3 ÃÃÃooottt⇢⇢⇢UUU:::������ÑÑÑzzz⌥⌥⌥⌥⌥⌥
(Ãot⌦ �˚⌫Ñ ÆÔõ È–Õz⌥⌥ÑS¶e\:U:�⇧
Ï)¶�¶�Œ��Âgœ�.'�i�I�f'�B�å'�k��
'�≥�2˜�^2˜√�¨nóíiåPM2.5⇥
Ÿõpn˝ÔÂœŒ⌘pn�7€L“
-
14 5. ü˝æ°
5.4 vvv÷÷÷üüü˝̋̋
• ⌥π˚Õà⇢S ⌥>(0˛⌦–�πш⇡⇢∑óÕà�>:SMÑœ¨¶åSMŒ��SMÃo˛Ñ^'
-
6
(((777KKKååå
vût*Qu° ¿Hy+�Å⌥¸ÑÕ\�‘É⇧påÄU�(7Kå
Ã⌃⇢ÀÕ�↵(⌥W�„�”Ñ�ü˝åË⌃∆Ç⇥
Ê≈ÔÂ↵Dˆ⇢Õ\∆ë⇥1é?���Å�∆ëZÜÿ�åÿÛ
⌅⌃⇥
6.1 ���———ØØØÉÉÉ
python 2.7, javascript
6.2 (((⌥⌥⌥WWW
�Åâ≈node.js1�€enode-moduleáˆ9�ìe}‰�(-g€Lh@â≈)⇢
npm install http-server
â≈http-servereS�Qu�http-server/�*ÄUшMn}‰LHTTP�°h,˙é node.js⇥
S�QuÑÕ\⇢€ecodeáˆ9�ìe}‰
http-server
�6Q@Ç http://127.0.0.1:8080/index.html�1ÔÂS�QuÜ⇥
1https://nodejs.org
15
-
16 6. (7Kå
6.3 üüü˝̋̋ÊÊÊ„„„
S�Q@�⇢↵0Ÿ7Ñub⇥
• ⇢⇢⇢«««ˆ̂̂ÙÙÙttteee ÷÷÷ÛÛÛ↵↵↵ÑÑш̂̂ÙÙÙ⇥⇥⇥ÔÂ↵0SMˆ;ÄM⇤)ÑÖπ�° £)Ñpn⇡⇢>:No data⇥Qu �L>:SM;b@˘îшÙ⇥ÛÅ‘fi∞(ш⇡�ÔÂπ˚"SMˆÙ" Æ⇥
• (((ÃÃÃooottteee ÷÷÷ïïïBBBÑÑÑÌÌÌõõõ˛̨̨úúúrrrùùùnnn⇥⇥⇥(>:ˆÙD— �*≠4@⌥Ñø/SMU:Ña”⌥⌥Ü⇥( ⌥π˚0˛Ñ˚✏M
n�ÔÂü0>:œ¨¶�Œ⌘åa”⌥p⇥Û↵‡Ìõ˛Ñ—rï
˛�˜ È“none” y⇥
• (((aaattt⌦⌦⌦~~~000yyyäää)))ÑÑÑ˛̨̨777⇥⇥⇥π˚“‡Œ”I Æø⇢>:7�1Â⌦H10πÑ�o®;�(⌥öÑa”⌥pÌõ˛⌦_ÔÂ>:Œõ⇥Åfi0S↵;b�˜π˚ˆÙtÑ“SMˆÙ" Æ⇥
6.4 „„„���”””ÑÑÑ
code„�⇧ÃÑcss�fonts�src�˝/(éé�Quæ°åíHÑ„��˛GåWS⇥;Å„�®X(jsáˆ9-⇥
jsÓU↵�ÕÅÑ�*áˆ/map.js�ÃbôÜ;ÅÑ“