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

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

  関連記事

webixAndD3js141216
WebixとD3.jsを使ってレスポンシブなグラフを作成する

Webix Advent Calendar 2014 16日目の記事です。 今回 …

vectorTileMap1
ベクタータイルマップの紹介

FOSS4G Advent Calendar 2013 7日目 参加記事です。 …

leaflet clip example
戦後・復興期と現在の空中写真を重ねて比較してみた

昨日の続き。 example Facebookにて、レイヤーを重ねて比較するサン …

D3.js GoogleMap Voronoi Diagram
【D3.js】Google Map上にボロノイ図を描く

前の記事では、ガソリンスタンドの位置情報を用いて高崎市の地図上にボロノイ図を表示 …

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

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

d3leaflet2014051
【D3.js】 LeafletにSVGをオーバーレイする。

Leafletは、モバイルフレンドリーでインタラクティブな地図をWeb上に表示す …

世界風速
2013年に話題になったデータビジュアライゼーション作品

2013年はデータビジュアライゼーション作品が盛んに発表された年でした。 (海外 …

fabric8
D3.jsとFabric.jsを使ってcanvasに描画する

d3.js Advent Calendar 2013 4日目の参加記事です。 以 …

福岡可視化
福岡市 防犯危険箇所ヒートマップ

example 「ビッグデータ・オープンデータの活用アイデアコンテスト」用に福岡 …

no image
D3.jsとjQueryのセレクションメソッドの違い

本日は小ネタ。 D3.jsのセレクションは、ほぼjQueryのセレクションと似た …