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

  関連記事

What_skills_is_required_for_2014
Code for Americaに学ぶ、2014年に必要とされるスキル

「Code for America」については、以下の記事を参照してください。 …

webix + D3 Responsive Map
WebixとD3.jsを使ってレスポンシブな地図を作成する

Webix Advent Calendar 2014 17日目の記事です。 グラ …

重み付けボロノイ図
【D3.js】重み付けボロノイ図

example 重み付けボロノイ図のサンプルを作った。 通常のボロノイ図は母点間 …

dailyd3
D3.jsの最新情報と解説記事を配信「Daily D3」

Daily D3 D3公式サイトや多数の海外ドキュメントなどの翻訳を手掛けていら …

no image
svg要素でもinnerHTMLを使えるようにするpolyfill

主にIE対応に必要。 [crayon-57d6295a95d7481707766 …

geoline
【D3.js】地図上に都市と都市を結ぶ線を引く

example 都市と都市を結ぶ線を引くサンプルです。 地図をY軸方向に回転など …

textPahtJapan
【D3.js】文字で日本地図書いてみた。

example またもや小ネタです。 文字を使って日本地図を描いてみました。 北 …

D3 living code
d3.js Living Code

週末にちょっと作ってみました。 昔懐かしいコンソール画面風のcanvasにD3. …

Data-Driven Documents ?
グラフを一切書かないD3.js勉強会を開催しました。

先週、土曜日に「グラフを一切書かないD3.js勉強会」を行いました。 第一部の内 …

Leaflet.Zoomify
Leaflet.jsを使って、巨大な画像を地図のように表示するプラグイン「Leaflet.Zoomify」

下記は画像なので動きません。 「Leaflet.Zoomify」は、地図ライブラ …