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

  関連記事

Data-Driven Documents ?
9月6日に大宮でD3.js勉強会をやります。

Code for SAITAMAさんに声をかけていただき、D3.jsの勉強会を開 …

topojson マージ
GeoJSONを軽くするだけじゃない! TopoJSONクライアント TIPS

単純に、GeoJSON形式のデータを効率よく圧縮してファイルサイズを軽くするもの …

1798年〜1891年におけるロンドンまでの情報伝達速度
18世紀〜19世紀の情報伝達速度を視覚化してみた。

ファンタジー国税庁と勇者の申告、女騎士の会計処理 – Togette …

party-mode
D3.jsとWeb Audio APIを使ったオーディオビジュアライゼーション

Demo ※Chrome推奨 D3.jsとWeb Audio APIを用いて作ら …

leaflet and Google custom style
Leaflet.jsでGoogle Maps を表示する

「Leafletでグーグルマップって使えないんですか?」という質問が多かったので …

Octocat
【D3.js】今まで作成したexampleをGitHubに公開しました。

shimizu/d3example 「せっかく、勉強会にも行ったことだし積極的に …

Data_Visualization_with_d3.js
D3.js本の出版が止まらない(最近出版されたD3参考書)

参考書が増えてくると「定番のライブラリ」感が出てきて、なんか安心感があるよね。 …

gender_schemer
データビジュアライゼーションにおける「わかりやすい」という偏見。あるいは、ベジータ ピンクシャツ問題。

データビュジュアライゼーションでは「分かりやすく伝える」ということが重要になりま …

turf Aggregation example
ブラウザおよびnode.jsのための高度な地理空間データ分析ライブラリ「turf.js」

選択した範囲内の家賃相場を求めるとかいろんなことに使えます。 example T …

filelisttreemap
【D3.js】サイズの大きなファイルを可視化する(ツリーマップ)

example 以前、アクセス流入元をツリーマップで表示してみたことがあるのです …