記事一覧

テーブルタグで都道府県地図を作ってみた

以前の記事で「都道府県別の動物の殺処分数」をまとめたものがあったが、筆者はこの記事に、htmlのテーブルタグを用いて自作した日本地図の雛形を使用している。


岐阜が奈良の隣にあるなど位置関係にかなり怪しいところもあるが、せっかく作った雛形である。
こんなものでも一応公開しておけば誰かが何かに役立ててくれるかも知れない。
そういう理由で今回のエントリーでは自作のテーブルタグのソースを公開してみることにした。

12×12の都道府県地図

▲PAGE TOP
と、いうわけで下図がその都道府県地図である。
北海道
青森
秋田岩手
石川新潟山形宮城
福井富山群馬栃木福島
山口島根鳥取兵庫京都滋賀長野山梨埼玉茨城
広島岡山大阪奈良岐阜愛知静岡東京千葉
長崎佐賀福岡和歌山三重神奈川
熊本大分愛媛香川
鹿児島宮崎高知徳島
沖縄

ちなみに、この図は正方形だけで構成されていることが特色である。全体の升目数も12×12であり、やはり正方形である。もっとも図が縦に伸びすぎると見にくくなるので、横幅に比べて縦幅は短く設定したほうが見やすくなるかも知れない。

この図のhtmlソースは以下のようになっている。JavaScriptを使って制御するときのため、各td要素には属性として都道府県名(name)と地方名(region)を設定した。山梨が中部とされていないのに違和感を感じる方がおられるかも知れないが、同県はどちらかといえば関東との結びつきが強い傾向があるので関東に含めている。


なお、この図は以下のようなスタイルシートと併用することを前提としている。
そのため、テーブル側では最小限の設定しかしていない。


スタイルシートの設定法

▲PAGE TOP
1. マス目の幅・高さを変えたいとき
上記ソース4行目のwidth:45px; height:45pxの部分を任意の値に変えればよい。

2. マス目の背景色を変えたいとき
背景色は地域ごとに設定されている。上記ソース6~15行目のhsl(240, 50, 70%)のように書かれた部分が色を指定している部分なので、そこをwhiteのような任意の色名や、#ffffffのような色指定に変えればよい。

3. 表自体の外枠線を指定したいとき
ソース3行目のborder:1px black solidの部分を、太さ、色、線種の順に変えればよい。

4. 各都道府県の外枠線を指定したいとき
同様にソース5行目のborder:1px black solidの部分を、太さ、色、線種の順に変える。

なお、同じ行の[name]の部分は(値はなんでもよいから)name属性値が設定されている要素のみを対象とするという意味の指定である。そのためデフォルトではname属性に都道府県名が指定されているマスの周囲にのみ枠線が引かれているが、この[name]の部分のみを消去するとテーブル全体に格子状に枠線が引かれるようになる。

なお、スタイルシートのその他の部分については、変更の必要性は薄いと思われるので説明は割愛する。

Javascriptによる制御

▲PAGE TOP
表に値を記入する際に、ちまちま該当する場所を探すのは面倒くさい。
そこで、ページの読み込み時に値を変更するスクリプトも用意した。


上記スクリプトの37~83行目の""内にデータを書き込めば、その都道府県の欄にデータが書き込まれる。

たとえば47行目を埼玉 += "100点";のようにすれば、埼玉県の表示は左図のようになる。
ダブルコーテーションを使用しなければhtmlタグの記入も当然可能である。
※シングルコーテーションは使用可能。

なお、+=の部分を=に変更すれば、県名の部分から書き換えることができる。
埼玉ではなく「埼玉県」と書きたい場合などには、この方法を利用するといいだろう。

10×10の都道府県地図

▲PAGE TOP
日本地図を無理やり10×10に押し込んだバージョンも一応作成した。

北海道
青森
石川秋田岩手
福井富山新潟山形宮城
佐賀山口島根鳥取兵庫京都滋賀群馬栃木福島
長崎福岡広島岡山大阪奈良長野山梨埼玉茨城
熊本大分愛媛香川和歌山岐阜静岡東京千葉
鹿児島宮崎高知徳島三重愛知神奈川
沖縄

縦幅も横幅も1マスの長さの10倍という分かりやすさが利点ではあるが、反面群馬が滋賀の隣にあるなど位置関係はさらに滅茶苦茶なものになっている。ただしマス目が減った分だけスペースは小さくすむので用途によってはこちらのほうが使いやすいかもしれない。

この表のhtml文は以下の通りである。

彩度を変更するスクリプト

▲PAGE TOP
以前の記事で使用した日本地図には、あらかじめ指定された数値に応じてマス目の彩度を自動的に変更するスクリプトが組み込まれていた。参考のため同種のスクリプトについてもソースを紹介しておこうと思う。

このスクリプトはデータが最大値に近いマスほど背景色の彩度を高く設定し、最小値に近いマスほど彩度を低く設定するものである。たとえば、2015年度地域別最低賃金のデータで実行結果をテストすると以下のような感じの表示になる。

北海道
青森
秋田岩手
石川新潟山形宮城
福井富山群馬栃木福島
山口島根鳥取兵庫京都滋賀長野山梨埼玉茨城
広島岡山大阪奈良岐阜愛知静岡東京千葉
長崎佐賀福岡和歌山三重神奈川
熊本大分愛媛香川
鹿児島宮崎高知徳島
沖縄

このような表示をすれば、地域間の差異を視覚的に把握することが可能になる。
多少なりともデータの説得力が増すかも知れない。
スポンサーサイト

コメント

コメントの投稿

非公開コメント

Profile

ZOA

Author:ZOA
実験記者。

全記事表示リンク