GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ。

*

年収300万未満都市マップ、作ってみた。

     - d3.js ver.3, datavis, leaflet.js

はてなブックマーク - 年収300万未満都市マップ、作ってみた。
Pocket

むかし、「未満都市」というドラマがありましたね。まぁ、関係ないですけど。

世帯の年間収入マップ

ネットをさまよっていたら下記のような記事をみつけました。

年収300万円世帯と1000万円世帯では、子どもの学力がはるかに違う~広がる「教育格差」。施設支援から厳しい現実が見えた

件の記事の是非はともかく、以前、整形した「平成25年住宅・土地統計調査」データの中に「世帯の年間収入階級(5区分)」というデータがあったので、地図上にマッピングしてみました。だた、すべての市区町村のデータがあるわけではないので一部の分布のみとなります。

世帯の年間収入マップ

「300万円未満、300万円〜500万円、500万円〜700万円、700万円〜1000万円、1000万円以上」という区分からひとつを選択し、その地域の世帯に対する割合をスライドで選択すると該当する地域が赤く塗られます。

mimanCity

灰色になっているところはデータがない地域です。
マウスオーバーすると詳細データがツールチップで表示されます。
スマートフォン、タブレットではたぶん動きません。
(leafletのカスタムコントロール上で、input要素がちゃんと動かせるようにする方法をご存知の方がいらっしゃいましたら、ご教授ください)

fix:20151128: ツールチップで「700万円〜1000万円」世帯のデータが表示されていなかったのを修正。
fix:20160204:政令指定都市で区名しか表示されていなかったのを修正

サンプル

・年収300万未満世帯が50%を超える地域
年収300万未満世帯が50%以上の地域

・年収300万未満世帯が40%を超える地域
年収300万未満世帯が40%以上の地域

・年収300万未満世帯が30%を超える地域
年収300万未満世帯が30%以上の地域

データセット

Githubに上げてあるのでご自由にお使いください。

shimizu/H25_yearly_income

年収は「住むところ」で決まる ─ 雇用とイノベーションの都市経済学
プレジデント社 (2014-04-23)
売り上げランキング: 1,355
はてなブックマーク - 年収300万未満都市マップ、作ってみた。
Pocket

 - d3.js ver.3, datavis, leaflet.js

  関連記事

戦後復興期/現在 比較地図
戦後・復興期と現在の空中写真を並べて比較してみた

【趣味のインターネット地図ウォッチ】 国土地理院、戦後・復興期の航空写真をウェブ …

D3.js 教材まとめ

D3.jsについては以下を。 データビジュアライゼーション「d3.js」 Tri …

Google Map上に棒グラフを表示する
【D3.js】Google Map上に棒グラフを表示する

example 円グラフに引き続き、棒グラフを地図上に表示してみました。 棒グラ …

raindrop-japan
夏バテぎみなのでD3.jsで、なんだかよくわからないもの作った。

なんだこれ? example 雨だれ見たいなものが日本の地形に変形するというよく …

JavaScriptでヘッドトラッキング

ヘッドトラッキングで地球儀をぐるぐる回すよ! example Gunma.web …

【D3.js】NHKの参議院選挙サイトで使用されていた謎グラフ(Chord graph)的なものを作ってみる。

example 上記のような図を「Chord graph(コードグラフ)」という …

【D3.js】トランジション終了時にコールバックを呼ぶ
【D3.js】トランジション終了時にコールバックを呼ぶ

D3を使って要素を移動したりスタイルを変化させる際、変更(Transition) …

【D3.js + node.js】 ブログのデータをGithub風のカレンダーに表示する

example WordPressもくもく勉強会@群馬 #1で作成したものです。 …

【D3.js】SVGで作成した都道府県の地形を並べて表示する

example 見たまんまです。 D3.jsでGeoJSONデータを読み込み、s …

Path Transition
Pathトランジション入門

example 先日からPathのアニメーションをいろいろ試しているわけですが、 …