GUNMA GIS GEEK

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

*

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

     - d3.js, datavis, leaflet.js

  • このエントリーをはてなブックマークに追加

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

世帯の年間収入マップ

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

年収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

 - d3.js, datavis, leaflet.js

  • このエントリーをはてなブックマークに追加

  関連記事

volonoilabel000003
ボロノイ図を使ってラベルの重なり合いを解消する

画像をクリックすると、デモページに飛びます。 見出し1 見づらいラベル2 母点か …

d3
D3.jsの勉強会を(群馬で)やります。

人に教えることで、自分自身の理解も進むかなと。 詳細はAtndにて。 D3勉強会 …

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

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

d3.js
D3.jsの歴史。元になったデータビジュアライゼーションライブラリ一覧

D3.jsの歴史は意外と古く、前身となったライブラリがいくつかありますのでここで …

d3barchart000006
【D3.js】おさらい1回目 棒グラフ

昨年末、ブログレイアウトのリニューアルのために去年書いた記事を見直していたのです …

FlashAir
FlashAirを使って、ネットに繋がっていなくてもつかえる地図アプリを作る

Gunma.web#23 のLTで知ってからずっと気になっていたFlashAir …

data.gov VS data.go.jp
日米のオープンデータを比較してみた

【2014/04/03 追記】 data.go.jpが急死(休止)しているので、 …

presimplify example
D3.jsとTopoJsonライブラリを使って地理情報を動的に簡素化する。

クライアントサイドのtopojsonには読み込んだ地理データを簡素化するpres …

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

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

d3.js map hexbin
【D3.js】地図上にHexbin(六角形)を表示する

地図上に表示するポイントが多くなるとゴチャゴチャして見難くなります。 「そんな時 …