⌧⌧⌧¨̈̈ŒŒŒõõõ˛̨̨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ôÜ;ÅÑ“