チュートリアル8
提供: svg2wiki
(版間での差分)
(→ArrayMesh.html) |
(→ArrayMesh.html) |
||
286行: | 286行: | ||
**<code>setMesh(...)</code> : 一個一個のメッシュを可視化している関数 | **<code>setMesh(...)</code> : 一個一個のメッシュを可視化している関数 | ||
***<code>rect</code>要素としてメッシュを可視化 | ***<code>rect</code>要素としてメッシュを可視化 | ||
− | ***<code>getColor(val, minVal, maxVal)</code>: | + | ***<code>getColor(val, minVal, maxVal)</code>: 可視化する値を色コードに変換 |
****<code>HSVtoRGB(h, s, v)</code>: HSV値をRGB値(SVGなどで設定できる色情報)に変換する関数。 | ****<code>HSVtoRGB(h, s, v)</code>: HSV値をRGB値(SVGなどで設定できる色情報)に変換する関数。 | ||
****このチュートリアルでは、[https://ja.wikipedia.org/wiki/HSV%E8%89%B2%E7%A9%BA%E9%96%93 HSV(Hue(色相), Satulation(彩度), Value(明度))色空間]の色相(H値)に、値を関連付けて、[https://ja.wikipedia.org/wiki/%E3%83%92%E3%83%BC%E3%83%88%E3%83%9E%E3%83%83%E3%83%97 ヒートマップ]的な可視化を行っています。(S,Vは最大値に設定) | ****このチュートリアルでは、[https://ja.wikipedia.org/wiki/HSV%E8%89%B2%E7%A9%BA%E9%96%93 HSV(Hue(色相), Satulation(彩度), Value(明度))色空間]の色相(H値)に、値を関連付けて、[https://ja.wikipedia.org/wiki/%E3%83%92%E3%83%BC%E3%83%88%E3%83%9E%E3%83%83%E3%83%97 ヒートマップ]的な可視化を行っています。(S,Vは最大値に設定) |
2022年2月4日 (金) 06:54時点における版
目次 |
メッシュデータとは
メッシュデータは、等間隔のグリッド上にデータが並んだデータの構造を持っており、グリッドデータとも呼ばれます。 プログラム上では、二次元配列データとそのメタデータ(原点とグリッド間隔の情報など)として扱えます。
日本では、メッシュ間隔と原点、および各メッシュへの附番規則として、地域基準メッシュがよく用いられています。参考1、参考2、参考3(なお、地域基準メッシュはメッシュデータのデータ形式ではない)
0,0 | 1,0 | 2,0 | 3,0 | 4,0 | 5,0 | 6,0 | 7,0 | 8,0 | 9,0 |
0,1 | 1,1 | 2,1 | 3,1 | 4,1 | 5,1 | 6,1 | 7,1 | 8,1 | 9,1 |
0,2 | 1,2 | 2,2 | 3,2 | 4,2 | 5,2 | 6,2 | 7,2 | 8,2 | 9,2 |
0,3 | 1,3 | 2,3 | 3,3 | 4,3 | 5,3 | 6,3 | 7,3 | 8,3 | 9,3 |
0,4 | 1,4 | 2,4 | 3,4 | 4,4 | 5,4 | 6,4 | 7,4 | 8,4 | 9,4 |
0,5 | 1,5 | 2,5 | 3,5 | 4,5 | 5,5 | 6,5 | 7,5 | 8,5 | 9,5 |
0,6 | 1,6 | 2,6 | 3,6 | 4,6 | 5,6 | 6,6 | 7,6 | 8,6 | 9,6 |
0,7 | 1,7 | 2,7 | 3,7 | 4,7 | 5,7 | 6,7 | 7,7 | 8,7 | 9,7 |
上の図で、個々の升目が一個のメッシュ、升目の中の数字はメッシュの番号(二次元配列の番号)、それぞれの升目の中に値が入ります。
データ形式の構造としては、主に以下の二種類が知られています。
- Raster
- Gridded XYZ
- Pointフィーチャの形式を用いてデータを符号化します。ただしPointの座標が必ずグリッド上にしか存在しないように制約をかけます。
データ形式構造間の変換ツールの例: https://gdal.org/programs/gdal_grid.html
本チュートリアルのデータ形式
テキスト符号化したRaster形式を用いることにします。
- ヘッダ行(最初の1行)
- カンマ区切り、2次元配列データ(2行目以降)
- 一個のメッシュに対して一個の値が入る[実数](温度と湿度など複数の値は許容されない)
- カラム(桁)方向:X方向
- 桁が増える方向が、Xのグリッド座標も増える方向
- ロー(行)方向:Y方向
- 行が増える方向は、Yのグリッド座標が減る方向
ヘッダ行
- [属性名]:[属性値]の組をカンマ区切りで並べる。
- 属性名
- minX : メッシュ領域のX(経度)の最小値[実数](上の図の全体を囲む四角形の左端の座標)
- maxX : メッシュ領域のX(経度)の最大値[実数](同、右端の座標)
- minY : メッシュ領域のY(緯度)の最小値[実数](同、下端の座標)
- maxY : メッシュ領域のY(緯度)の最大値[実数](同、上端の座標)
- partX : メッシュ領域X(経度)方向のメッシュ個数[自然数]
- partY : メッシュ領域Y(緯度)方向のメッシュ個数[自然数]
- valName : メッシュの値の単位[文字列]
- minVal : メッシュの値の最小値[実数]
- maxVal : メッシュの値の最大値[実数]
実際に使うサンプルデータ
使用するサンプルデータはこちら(日本の神社仏閣の密度)
minX:124.1539312,maxX:145.7870748,minY:24.33444293,maxY:45.51431213,partX:100,partY:98,valName:count/km2,minVal:1.95645299200927E-03,maxVal:2.86870067881484 ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.97412404320488E-02,2.4676550540061E-03,2.4676550540061E-03,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,7.37480244978236E-03,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.89797155921526E-03,,4.89797155921526E-03,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.43980848573941E-03,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,7.29220251762907E-03,,,1.21536708627151E-02,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,9.68704575374383E-03,9.68704575374383E-03,,,2.17958529459236E-02,4.84352287687192E-03,,,2.17958529459236E-02,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.41288890872148E-03,2.65417779959363E-02,,,1.44773334523289E-02,,7.23866672616444E-03,,,1.68902223610504E-02,9.65155563488592E-03,,,,4.82577781744296E-03,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.40411523496203E-02,4.80823046992406E-03,1.44246914097722E-02,2.40411523496203E-03,9.37604941635191E-02,1.92329218796962E-02,1.20205761748101E-02,,,1.20205761748101E-02,7.21234570488609E-03,3.12534980545064E-02,1.20205761748101E-02,4.80823046992406E-03,1.68288066447342E-02,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.39543909437019E-03,,2.39543909437019E-03,5.74905382648847E-02,0.011977195471851,0.150912662945322,4.79087818874039E-03,2.39543909437019E-03,,,7.18631728311058E-03,7.18631728311058E-03,4.79087818874039E-03,2.39543909437019E-03,,,,4.79087818874039E-03,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.38685918921668E-03,,,,2.38685918921668E-03,,9.54743675686673E-03,7.87663532441505E-02,4.05766062166836E-02,1.67080143245168E-02,,,,,,,,,9.54743675686673E-03,,7.16057756765004E-03,7.16057756765004E-03,2.38685918921668E-03,,2.38685918921668E-03 ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.37837424625475E-03,2.37837424625475E-03,4.28107364325854E-02,0.152215951760304,0.019026993970038,3.56756136938212E-02,1.66486197237832E-02,7.84863501264066E-02,3.32972394475665E-02,,1.66486197237832E-02,,,4.75674849250949E-03,2.37837424625475E-03,2.37837424625475E-03,,,,2.37837424625475E-03,2.37837424625475E-03,,,2.37837424625475E-03,,2.61621167088022E-02 ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.021329847145445,4.7399660323211E-03,4.7399660323211E-03,2.36998301616055E-02,0.350757486391762,8.76893715979404E-02,7.10994904848165E-02,5.68795923878532E-02,,,,1.65898811131239E-02,1.42198980969633E-02,3.79197282585688E-02,2.84397961939266E-02,,,1.18499150808028E-02,8.53193885817798E-02,,0.021329847145445,1.42198980969633E-02,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.59785270028783E-02,9.44673709195576E-03,4.25103169138009E-02,1.88934741839115E-02,,,3.54252640948341E-02,2.36168427298894E-02,2.36168427298894E-03,7.08505281896682E-03,,,,2.83402112758673E-02,4.25103169138009E-02,7.08505281896682E-03,4.72336854597788E-03,2.36168427298894E-03,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.64743376955089E-02,2.35347681364414E-03,2.82417217637296E-02,7.06043044093241E-03,9.41390725457654E-03,7.06043044093241E-03,0.035302152204662,,2.11812913227972E-02,4.70695362728827E-03,,,,4.70695362728827E-03,1.17673840682207E-02,,4.70695362728827E-03,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.40721567441894E-02,4.69071891472979E-03,2.34535945736489E-03,,,9.85050972093256E-02,3.98711107752032E-02,,,,2.34535945736489E-03,9.38143782945958E-03,4.69071891472979E-03,,,,4.69071891472979E-03,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.33733104522365E-03,2.33733104522365E-03,1.40239862713419E-02,1.16866552261183E-02,2.10359794070129E-02,2.57106414974602E-02,4.6746620904473E-03,,,,,,,,,1.16866552261183E-02,2.10359794070129E-02,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.56232948360314E-02,1.16469521981961E-02,,5.12465896720628E-02,1.39763426378353E-02,,,,,,,,,,1.16469521981961E-02,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.64307304780522E-03,,6.96460957170783E-03,0.176436775816598,1.62507556673183E-02,1.85722921912209E-02,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.85101456137249E-02,9.25507280686246E-03,4.62753640343123E-03,,2.08239138154405E-02,2.31376820171562E-03,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.30608439674165E-03,,1.15304219837082E-02,3.68973503478663E-02,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.60893883651801E-02,6.89545215650575E-03,1.14924202608429E-02,2.29848405216858E-03,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,3.20735258239644E-02,0.107675408123309,8.70567129507605E-02,1.83277290422654E-02,6.87289839084951E-03,4.58193226056634E-03,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,9.13411844822654E-03,2.28352961205663E-03,6.8505888361699E-03,0.2580388461624,3.19694145687929E-02,,4.11035330170194E-02,4.11035330170194E-02,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.27617349674119E-03,,9.10469398696478E-03,4.55234699348239E-03,,0.011380867483706,6.14566844120122E-02,0.106980154346836,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,6.80669040443137E-02,3.85712456251111E-02,7.94113880516994E-02,6.57980072428366E-02,2.26889680147712E-03,2.26889680147712E-03,5.89913168384052E-02,4.53779360295425E-03,4.08401424265882E-02,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,3.84488755354706E-02,8.36828467536713E-02,4.52339712182007E-03,9.04679424364014E-03,2.26169856091003E-03,,1.35701913654602E-02,2.26169856091003E-03,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.80366226145447E-02,0.24800356094999,1.12728891340905E-02,2.25457782681809E-03,,,0.137529247435904,,,4.50915565363619E-03,2.25457782681809E-03,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.04556060194795E-02,5.16932743582237E-02,8.31587457067078E-02,6.74260100324658E-03,,7.64161447034612E-02,6.74260100324658E-03,,2.24753366774886E-03,0.047198207022726,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8.96226067466189E-03,0.116509388770605,6.72169550599642E-03,0.255424429227864,6.72169550599642E-03,6.72169550599642E-03,0.177004648324572,1.79245213493238E-02,5.37735640479714E-02,3.58490426986476E-02,1.79245213493238E-02,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,3.35050714590285E-02,1.78693714448152E-02,4.46734286120379E-03,0.125085600113706,2.2336714306019E-03,,0.154123328711531,0.022336714306019,0.022336714306019,3.35050714590285E-02,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.273902743150215,3.11759219845773E-02,1.33611094219617E-02,,,2.00416641329426E-02,0.104662023805367,4.45370314065391E-02,8.46203596724242E-02,8.90740628130781E-03,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,5.32825132804057E-02,0.419599792083195,3.10814660802366E-02,9.54645029607268E-02,3.55216755202704E-02,1.11005236000845E-02,9.32443982407099E-02,0.104344921840794,5.55026180004226E-02,1.77608377601352E-02,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.4268600538726E-03,3.32014504040445E-02,6.64029008080891E-03,4.4268600538726E-03,0.159366961939414,9.96043512121336E-02,1.10671501346815E-02,0.150513241831669,0.11952522145456,0.152726671858605,8.85372010774521E-03,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.41365330625383E-03,4.41365330625383E-03,,,,0.139030079146996,0.024275093184396,,5.51706663281728E-02,0.518604263484825,5.51706663281728E-02,7.50321062063151E-02,0.470054077116033,0.024275093184396,4.41365330625383E-03,8.82730661250765E-03,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.171622914458144,4.62061692771927E-02,,,2.42032315261486E-02,9.24123385543855E-02,1.32017626506265E-02,1.32017626506265E-02,0.215628789960233,0.132017626506265,6.60088132531325E-03,0.134217920281369,0.101213513654803,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.38766116712541E-03,2.19383058356271E-03,,,,,,3.29074587534406E-02,8.77532233425083E-03,1.75506446685017E-02,0.482642728383795,0.361982046287847,0.118466851512386,,2.19383058356271E-03,0.23473987244121,8.77532233425083E-03,0.263259670027525,6.58149175068812E-02,6.36210869233185E-02,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.209993883176214,0.441862129183284,0.120308995569706,1.74994902646845E-02,3.06241079631979E-02,0.109371814154278,1.53120539815989E-02,4.37487256617113E-03,0.201244138043872,2.84366716801123E-02,5.46859070771391E-02,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8.07010733990224E-02,8.07010733990224E-02,0.148315486246852,,,,,,0.185394357808565,0.377332045892726,0.170126587165507,,6.54333027559641E-03,1.52677706430583E-02,0.174488807349238,1.30866605511928E-02,8.72444036746188E-02,0.141772155971256,0.037078871561713,3.92599816535785E-02,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.52239586900056E-02,0.154414438141486,0.121791669520045,,,,8.6994049657175E-03,3.69724711042994E-02,0.45019420697588,8.91689008986043E-02,7.17700909671694E-02,8.26443471743162E-02,,2.17485124142937E-03,1.30491074485762E-02,0.017398809931435,8.6994049657175E-03,0.143540181934339,7.39449422085987E-02,2.17485124142937E-02,8.48191984157456E-02,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.279757007951887,0.201685284802523,,0.134456856535016,2.38552487400834E-02,0.117107584724046,2.16865897637122E-02,0.17783003606244,3.68672025983107E-02,3.90358615746819E-02,1.30119538582273E-02,,,2.16865897637122E-03,6.50597692911366E-03,8.24090411021063E-02,2.16865897637122E-02,3.68672025983107E-02,4.77104974801668E-02,0.210359920708008,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.37878580950012E-02,0.363305469087291,0.899613542501863,0.635784570902759,0.183815267097736,,1.08126627704551E-02,0.155702343894553,0.348167741208654,2.16253255409102E-03,,5.62258464063664E-02,1.73002604327281E-02,2.16253255409102E-03,0.116776757920915,5.40633138522754E-02,0.118939290475006,2.81129232031832E-02,1.29751953245461E-02,5.19007812981844E-02,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.37211836899434E-02,1.02216736991211,0.295436560502023,0.204864768231329,0.183300055785926,2.15647124454031E-03,,4.52858961353465E-02,0.338565985392829,0.090571792270693,1.29388274672419E-02,0.028034126179024,0.174674170807765,3.01905974235643E-02,0.034503539912645,5.39117811135078E-02,0.232898894410354,0.116449447205177,4.31294248908062E-02,9.91976772488543E-02,0.034503539912645,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.15047432997382E-03,,,,,,,,,,,,,7.74170758790576E-02,0.217197907327356,2.79561662896597E-02,1.29028459798429E-02,2.15047432997382E-02,6.66647042291885E-02,2.15047432997382E-03,,0.154834151758115,4.08590122695026E-02,0.217197907327356,0.103222767838743,9.03199218589006E-02,0.462351980944372,0.408590122695026,0.550521428473299,0.339774944135864,0.249455022276963,0.165586523407984,0.111824665158639,0.133329408458377,4.30094865994765E-03,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.28908220941427E-03,6.4336233141214E-03,4.28908220941427E-03,,,,,,,,,,,,0.032168116570607,0.604760591527412,0.177996911690692,9.00707263976997E-02,,4.28908220941427E-03,0.137250630701257,6.4336233141214E-03,2.14454110470713E-03,9.22152675024068E-02,0.111516137444771,1.07227055235357E-02,3.64571987800213E-02,0.032168116570607,7.07698564553354E-02,0.300235754658999,0.482521748559105,0.529701652862662,0.216598651575421,0.195153240528349,0.167274206167156,8.57816441882854E-02,4.28908220941427E-03,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,3.84960757478439E-02,0.650155945963586,0.10265620199425,0.115488227243532,5.77441136217658E-02,3.84960757478439E-02,2.56640504985626E-02,,2.13867087488022E-02,9.19628476198493E-02,8.55468349952087E-02,8.12694932454482E-02,1.92480378739219E-02,2.13867087488022E-03,3.63574048729637E-02,0.160400315616016,0.530390376970294,0.780614869331279,0.970956577195618,0.303691264232991,0.134736265117454,0.160400315616016,6.62987971212867E-02,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8.5314518329066E-03,2.13286295822665E-03,,,,2.13286295822665E-03,4.47901221227596E-02,3.83915332480797E-02,7.25173405797061E-02,0.138636092284732,6.18530257885728E-02,,,6.61187517050261E-02,0.191957666240398,1.49300407075865E-02,8.5314518329066E-03,0.042657259164533,7.46502035379327E-02,2.13286295822665E-02,1.49300407075865E-02,2.13286295822665E-02,6.18530257885728E-02,2.13286295822665E-03,1.91957666240398E-02,0.531082876598436,0.279405047527691,9.81116960784258E-02,0.296467951193504,0.897935305413419,2.26296759867847,2.86870067881484,0.499089932225036,0.245279240196065,0.219684884697345,7.03844776214794E-02,4.47901221227596E-02,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.189313384862506,0.176550684759416,0.295669219054925,0.176550684759416,4.89236837285128E-02,0.136135467766297,7.65762006185418E-02,0.195694734914051,4.25423336769677E-02,0.082957550670087,0.246745535326413,0.110610067560116,0.229728601855626,0.104228717508571,0.242491301958716,0.163787984656326,0.336084436048045,0.323321735944954,0.431804686821222,0.60622825489679,0.357355602886529,0.102101600824722,0.125499884347055,1.48898167869387E-02,0.112737184243964,2.12711668384838E-03,0.027652516890029,0.14464393450169,0.114864300927813,0.104228717508571,0.193567618230203,0.687058688883028,1.2528717267867,0.146771051185539,0.238237068591019,0.2637624687972,5.10508004123612E-02,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.152743060223704,0.120921589343766,0.146378766047716,4.03071964479218E-02,5.51572161918931E-02,1.69714511359671E-02,1.27285883519753E-02,2.33357453119548E-02,3.60643336639301E-02,3.60643336639301E-02,4.24286278399177E-02,0.171835942751667,0.273664649567469,0.163350217183683,9.12215498558231E-02,3.18214708799383E-02,0.112435863775782,0.642793711774754,0.286393237919445,0.352157611071317,1.77139521231657,0.948279832222161,0.116678726559774,5.30357847998972E-02,1.06071569599794E-02,0.019092882527963,,1.48500197439712E-02,0.239721747295535,0.214264570591585,0.1548644916157,0.473079200415083,0.267300355391482,0.56217931887891,0.163350217183683,8.27358242878396E-02,0.201535982239609,0.038185765055926,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8.46322573541403E-03,0.131179998898918,0.118485160295796,7.40532251848728E-02,1.90422579046816E-02,2.32738707723886E-02,4.65477415447772E-02,0.112137740994236,8.88638702218474E-02,0.184075159745255,6.98216123171658E-02,8.88638702218474E-02,9.09796766557009E-02,0.192538385480669,0.139643224634332,0.190422579046816,0.296212900739491,2.13273288532434,0.768037735488824,0.693984510303951,9.94429023911149E-02,0.389308383829046,0.421045480336848,0.738416445414875,0.44643515754309,6.55899994494588E-02,5.28951608463377E-02,4.02003222432167E-02,1.69264514708281E-02,0.39777160956446,0.32583419081344,0.141759031068185,0.514140963426403,8.04006444864333E-02,,6.34741930156053E-03,0.181959353311402,0.148106450369746,2.53896772062421E-02,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.11024117132996E-03,,,2.95433763986194E-02,0.168819293706397,4.43150645979291E-02,6.75277174825587E-02,4.43150645979291E-02,0.149827123164427,5.90867527972389E-02,8.01891645105385E-02,0.111842782080488,6.11969939685688E-02,6.75277174825587E-02,6.75277174825587E-02,0.253228940559595,0.316536175699494,0.314425934528164,0.179370499563047,0.576095839773079,1.51937364335757,0.835655503846664,8.22994056818684E-02,0.293323522814864,0.208913875961666,0.225795805332306,0.151937364335757,0.51278860463318,0.183590981905706,0.346079552098113,0.215244599475656,0.379843410839393,0.240567493531615,0.346079552098113,,6.33072351398988E-02,7.38584409965486E-02,2.32126528846296E-02,6.33072351398988E-03,,1.89921705419696E-02,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,2.10473497685373E-03,1.26284098611224E-02,,,,,,,,,4.20946995370746E-03,3.36757596296596E-02,0.092608338981564,1.89426147916836E-02,5.47231093981969E-02,7.99799291204417E-02,0.069456254236173,7.99799291204417E-02,0.134703038518639,0.311500776574352,0.23152084745391,0.328338656389182,0.319919716481767,5.05136394444895E-02,4.20946995370746E-03,,8.62941340510028E-02,0.420946995370746,0.092608338981564,2.23943801537237,1.03763434358889,0.250463462245594,0.151540918333468,0.229416112477056,0.383061765787378,3.36757596296596E-02,1.89426147916836E-02,4.41994345139283E-02,1.26284098611224E-02,8.20846640972954E-02,0.113655688750101,0.105236748842686,,,2.10473497685373E-02,4.84089044676357E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,4.19857446634665E-03,6.29786169951998E-03,,,,,,2.09928723317333E-03,5.87800425288531E-02,8.18722020937597E-02,0.151148680788479,3.35885957307732E-02,3.56878829639465E-02,3.98864574302932E-02,0.104964361658666,0.371573840271679,0.140652244622613,0.117560085057706,0.304396648810132,0.172141553120213,2.51914467980799E-02,0.163744404187519,0.327488808375039,0.138552957389439,6.29786169951998E-03,2.30921595649066E-02,0.201531574384639,2.30921595649066E-02,0.354779542406292,0.272907340312532,0.329588095608212,0.188935850985599,3.35885957307732E-02,4.40850318966398E-02,0.224623733949546,0.083971489326933,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,3.14084599974333E-02,,,,,,,,0.123539942656571,6.90986119943532E-02,0.213577527982546,0.096319277325462,8.79436879928131E-02,8.16619959933265E-02,0.140291121321869,0.127727737322895,0.048159638662731,0.13191553198922,0.048159638662731,,9.21314826591376E-02,0.364338135970226,0.161230094653491,0.11307045599076,0.274300550644251,0.22614091198152,1.46572813321355E-02,0.303615113308522,0.280582242643737,0.077474201327002,1.25633839989733E-02,8.37558933264887E-03,3.97840493300821E-02,3.35023573305955E-02,1.25633839989733E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,4.17712935925664E-03,,,,2.71513408351681E-02,0.304930443225735,0.486635570353398,0.142022398214726,4.80369876314513E-02,8.56311518647611E-02,0.139933833535097,0.240184938157257,7.72768931462478E-02,3.13284701944248E-02,0.18588225648692,8.14540225055044E-02,0.162908045011009,0.104428233981416,7.10111991073629E-02,2.29742114759115E-02,0.045948422951823,4.38598582721947E-02,0.100251104622159,0.169173739049894,,0.167085174370266,6.89226344277345E-02,8.35425871851328E-03,6.26569403888496E-03,3.55055995536814E-02,6.89226344277345E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,3.33326189620469E-02,2.08328868512793E-03,,4.37490623876865E-02,0.329159612250213,0.564571233669669,0.324993034879957,,4.16657737025586E-03,5.62487944984541E-02,,2.08328868512793E-02,,2.08328868512793E-03,0.177079538235874,7.29151039794776E-02,,,4.16657737025586E-03,8.33315474051172E-03,,8.33315474051172E-03,2.70827529066631E-02,2.08328868512793E-02,,2.08328868512793E-03,0.127080609792804,4.99989284430703E-02,6.24986605538379E-03,0.108331011626652,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,8.31227508713599E-03,0.004156137543568,0.132996401394176,0.147542882796664,0.583937324871303,0.536141743120271,0.274305077875488,0.039483306663896,0.243134046298728,0.253524390157648,0.16624550174272,0.004156137543568,,6.23420631535199E-03,0.147542882796664,6.44201319253039E-02,0.012468412630704,0.002078068771784,4.36394442074639E-02,0.14546481402488,0.02078068771784,5.19517192945999E-02,0.012468412630704,0.014546481402488,,,,0.002078068771784,0.014546481402488,0.027014894033192,0.01039034385892,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,1.45103305977601E-02,4.14580874221717E-03,0.049749704906606,9.74265054421035E-02,0.122301357895406,0.27776918572855,0.737953956114656,0.493351240323843,0.124374262266515,0.114009740410972,7.66974617310176E-02,0.153394923462035,0.223873672079727,2.69477568244116E-02,2.07290437110858E-03,2.07290437110858E-03,0.140957497235384,4.56038961643889E-02,8.29161748443434E-03,6.21871311332575E-03,1.86561393399773E-02,,,8.29161748443434E-03,3.31664699377374E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,2.27457441621238E-02,4.13558984765887E-03,,0.113728720810619,6.61694375625418E-02,0.248135390859532,0.163355798982525,0.479728422328428,0.128203285277425,2.27457441621238E-02,1.24067695429766E-02,7.44406172578596E-02,7.85762071055184E-02,0.10752533603913,1.03389746191472E-02,,2.48135390859532E-02,4.13558984765887E-03,3.10169238574415E-02,2.06779492382943E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.03389746191472E-02,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,2.06273987972052E-03,2.06273987972052E-03,1.23764392783231E-02,,,1.03136993986026E-02,8.25095951888208E-02,0.109325213625188,6.60076761510567E-02,0.136140832061554,0.360979478951091,3.30038380755283E-02,4.33175374741309E-02,7.83841154293798E-02,2.06273987972052E-02,4.95057571132925E-02,1.03136993986026E-02,,2.06273987972052E-02,4.53802773538515E-02,1.85646589174847E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,6.17321609230951E-03,4.11547739487301E-02,,,,8.23095478974602E-03,0.160503618400047,2.88083417641111E-02,3.90970352512936E-02,4.52702513436031E-02,0.228408995415452,2.67506030666746E-02,2.26351256718015E-02,6.17321609230951E-03,8.84827639897697E-02,8.23095478974602E-03,,,,,2.0577386974365E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,0.100586751373196,2.66862809765621E-02,0.166276058392426,1.64223267548075E-02,,,2.05279084435093E-03,5.74781436418262E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,3.27663327423708E-02,3.07184369459726E-02,2.86705411495744E-02,6.34847696883434E-02,4.30058117243616E-02,,2.04789579639817E-02,3.27663327423708E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,2.45166364550266E-02,2.45166364550266E-02,3.06457955687832E-02,1.63444243033511E-02,2.45166364550266E-02,1.22583182275133E-02,0.116454023161376,2.04305303791888E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,4.07652412301805E-03,2.03826206150903E-03,5.29948135992347E-02,2.03826206150903E-02,2.85356688611264E-02,3.87269791686715E-02,1.83443585535812E-02,3.05739309226354E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,4.06704473574453E-03,,,0.030502835518084,8.33744170827628E-02,1.62681789429781E-02,1.62681789429781E-02,1.83017013108504E-02,4.06704473574453E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,4.05766693135136E-03,0.056807337038919,2.23171681224325E-02,2.63748350537838E-02,8.11533386270271E-03,8.11533386270271E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.61935589712698E-02,1.61935589712698E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.014105466976364,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,6.03172864662474E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,3.93652918053998E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,1.95645299200927E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,7.75050212040696E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,1.93398562085494E-02,5.80195686256481E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,4.43988958422274E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,9.54818937423838E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, 1.14182140267032E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
Container.svg
- GeoJsonを表示する主題レイヤと、背景地図(OpenStreetMap)をanimation要素で読み込んでいます。
- チュートリアル6同様にクリッカブルなレイヤーを指定しています。
- 後述のように、メッシュデータをベクトルデータとして可視化し対話性を実現するため、class属性でclickableを指定しています。
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="122.9800817, -45.398095, 21.97626, 21.0533039" > <globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(1,0,0,-1,0,0)" /> <!-- OpenStretMap背景地図を表示状態として読み込む --> <animation xlink:href="../tutorial5/dynamicOSM_r11.svg" x="-3000" y="-3000" width="6000" height="6000" title="Japan Coastline" class="basemap" visibility="visible"/> <!-- CSVのメッシュデータレイヤーを表示状態として読み込む --> <animation xlink:href="ArrayMesh.svg" x="-3000" y="-3000" width="6000" height="6000" title="ArrayMesh" class="Mesh clickable" visibility="visible" opacity="0.6"/> </svg>
ArrayMesh.svg
- ドキュメントルート要素(svg要素)の、data-controller属性で、このレイヤーを操作するwebAppを指定しています。
data-controller="ArrayMesh.html#exec=appearOnLayerLoad
exec=appearOnLayerLoad
は、レイヤが表示状態になるとwebAppのウィンドが出現する設定です。(詳しくはこちら)
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-42.8202042942663, -49.9999999999999, 513.842451531196, 600" data-controller="ArrayMesh.html#exec=appearOnLayerLoad" > <globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(100,0,0,-100,0,0)" /> </svg>
ArrayMesh.html
メッシュデータを読み込み、一個一個のメッシュをsvgのrect要素として可視化します。
addEventListener("load",async function(){..
: webAppロード後 fetchAPIでメッシュデータを読み込み- メッシュデータは1行ごとに切り分けられた文字列として、csvLines[]に格納
getCsvProps(headerLine)
: ヘッダ行を読み込みgetRange()
: (ヒートマップの色分けのための)可視化値の最大最小値を算出drawMesh()
: メッシュデータを1行ずつ読み込み、さらにカラムで分割し、メッシュデータを一個づつ可視化しているsetMesh(...)
: 一個一個のメッシュを可視化している関数rect
要素としてメッシュを可視化getColor(val, minVal, maxVal)
: 可視化する値を色コードに変換HSVtoRGB(h, s, v)
: HSV値をRGB値(SVGなどで設定できる色情報)に変換する関数。- このチュートリアルでは、HSV(Hue(色相), Satulation(彩度), Value(明度))色空間の色相(H値)に、値を関連付けて、ヒートマップ的な可視化を行っています。(S,Vは最大値に設定)
<!DOCTYPE html> <html> <head> <title>CSV Mesh Data Visualizer Controller</title> <meta charset="UTF-8"> </head> <script> var csvPath = "mesh.csv"; var csvLines, csvProps; addEventListener("load",async function(){ csvLines = await getText(csvPath); csvLines = csvLines.split("\n"); csvProps=getCsvProps(csvLines[0]); vminI.value=csvProps.minVal; vmaxI.value=csvProps.maxVal; getRange(); drawMesh(csvLines, csvProps); }); function drawMesh(csvLines, csvProps, minVal, maxVal){ if (!minVal){ minVal = csvProps.minVal; } if (!maxVal){ maxVal = csvProps.maxVal; } for ( var i = 1 ; i < csvProps.partY + 1 ; i++ ){ var strTxt = csvLines[i].split(","); for ( var j = 0 ; j < csvProps.partX ; j++ ){ if ( strTxt[j].replace(/\s+/g, "") !=""){ var val = Number(strTxt[j]); setMesh( j , i-1 , val, csvProps, minVal, maxVal ); } } } svgMap.refreshScreen(); } function setMesh( xp , yp , value, csvProps, minVal, maxVal ){ // console.log("call getMesh:"); var color = getColor(value, minVal, maxVal); var cl = svgImage.getElementById(xp+":"+yp); if ( cl ){ cl.setAttribute("fill" , color); } else { var xd = csvProps.minX + xp * csvProps.twd; // rectの西 var yd = csvProps.maxY - yp * csvProps.thd; // rectの北 cl = document.createElement("rect"); // Should be used NS ( for Firefox!!) cl.setAttribute("x" , 100 * xd ); cl.setAttribute("y" , -100 * yd ); cl.setAttribute("width" , 100 * csvProps.twd ); cl.setAttribute("height" , 100 * csvProps.thd ); cl.setAttribute("content" , value); cl.setAttribute("fill" , color); cl.setAttribute("id", xp+":"+yp); svgImage.getElementsByTagName("svg")[0].appendChild(cl); } } function getCsvProps(headerLine){ var hp = getHeaderParams( headerLine ); console.log("sc_param:",hp); svgImage.documentElement.setAttribute("property", hp.valName); csvProps={ minX: Number(hp.minX), maxX: Number(hp.maxX), minY: Number(hp.minY), maxY: Number(hp.maxY), minVal: Number(hp.minVal), maxVal: Number(hp.maxVal), partX: Number(hp.partX), partY: Number(hp.partY), } csvProps.twd = ( csvProps.maxX - csvProps.minX ) / csvProps.partX; csvProps.thd = ( csvProps.maxY - csvProps.minY ) / csvProps.partY; return ( csvProps ); updateTile(); } function getHeaderParams( hash ){ hash = hash.split(","); for ( var i = 0 ; i < hash.length ; i++ ){ hash[i] = hash[i].split(":"); if ( hash[i][1] ){ hash[hash[i][0]] = hash[i][1]; } else { hash[hash[i][0]] = true; } } return ( hash ); } async function getText(path){ var response = await fetch(path); var txt = await response.text(); return ( txt ); } function getColor( val, minVal, maxVal ){ // value clip if ( val > maxVal ){ val = maxVal; } if ( val < minVal ){ val = minVal; } // Hue値の算出(最大値:H=0(赤) , 最小値:H=270(青紫) 逆周り) var h = 270 - 270 * (val - minVal) / (maxVal - minVal); var ans = HSVtoRGB (h, 255, 255); return ("#"+ pad16(ans.r) + pad16(ans.g) + pad16(ans.b)); } function pad16( val ){ var bv = "00" + val.toString(16); bv = bv.substr(bv.length - 2, 2); return ( bv ); } function HSVtoRGB (h, s, v) { // from http://d.hatena.ne.jp/ja9/20100903/1283504341 var r, g, b; // 0..255 while (h < 0) { h += 360; } h = h % 360; // 特別な場合 saturation = 0 if (s == 0) { // → RGB は V に等しい v = Math.round(v); return {'r': v, 'g': v, 'b': v}; } s = s / 255; var i = Math.floor(h / 60) % 6, f = (h / 60) - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s); switch (i) { case 0 : r = v; g = t; b = p; break; case 1 : r = q; g = v; b = p; break; case 2 : r = p; g = v; b = t; break; case 3 : r = p; g = q; b = v; break; case 4 : r = t; g = p; b = v; break; case 5 : r = v; g = p; b = q; break; } return {'r': Math.round(r), 'g': Math.round(g), 'b': Math.round(b)}; } function getRange(){ if ( isNaN(vminI.value) || isNaN(vmaxI.value) ){return} var minVal = Number(vminI.value); var maxVal = Number(vmaxI.value); if ( minVal > maxVal){[minVal, maxVal] = [maxVal, minVal]} document.getElementById("scalemin").innerHTML = minVal.toPrecision(5); document.getElementById("scalemax").innerHTML = maxVal.toPrecision(5); document.getElementById("scalemid").innerHTML = ((maxVal + minVal)/2.0).toPrecision(5); return{minVal,maxVal} } function setRange(){ var range=getRange(); drawMesh(csvLines, csvProps, range.minVal, range.maxVal); } </script> <body> <h3>Mesh Data Controller</h3> <div id="gui"> <form> <span >min</span> <input id="vminI" type="text" name="min" style="width :80px;font-size:80%"> <span >max</span> <input id="vmaxI" type="text" name="max" style="width :80px;font-size:80%"> <input id="vset" type="button" onclick="setRange( )" value="setRange"/> </form> <table border="0"> <tr><td colspan="3"> <img src="hsvBar.png" width="200" height="10"/> </td></tr> <tr style="font-size:60%"><td> <span id="scalemin">min</span> </td><td align="center"> <span id="scalemid">mid</span> </td><td align="right"> <span id="scalemax">max</span> </td><tr> </table> </body> </html>