GUNMA GIS GEEK

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

*

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

     - d3.js ver.3, 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 ver.3, datavis, leaflet.js

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

  関連記事

d3_Before_After_Image
【D3.js】Before After Image Slider

example スライダーで2枚の画像を切り替えて比較できる、いわゆる「Befo …

インタラクティブ・データビジュアライゼーション ―D3.jsによるデータの可視化
【D3.js】デザイナーにお勧め「インタラクティブ・データビジュアライゼーション」感想

インタラクティブ・データビジュアライゼーション ―D3.jsによるデータの可視化 …

前橋市 平成22年男女別・年齢別人口構成
前橋市には、男子より女子の方が多く住んでいる。

example 男子の人口を、女子の人口が上回る地域が多数。 概要 前橋市オープ …

d3_Legend
チャートの凡例を簡単に作成できるD3プラグイン「d3 Legend」

凡例とは? 主題図やチャートには欠かせない凡例ですが、D3.jsではこの判例も自 …

1936年の日本国立鉄道地図
1936年の日本国立鉄道地図

Fullscreen 1936年に作成された日本のカラフルな鉄道地図が、海外のサ …

3.11earthquake
過去の震災データを並べて視覚化してみた。

もうすぐ3月11日。震災から5年経ったわけですが、時が経つのは早いものですね。 …

Pie Chart Btn
D3.jsで円グラフになるボタン作った。

円グラフ祭り!

WS000000
D3.js(主に地図)の勉強会を行います。

会場は例によって群馬です。 10/26(土曜日)にD3.jsの地図表示機能をテー …

エンジニアのための データ可視化[実践]入門 ~D3.jsによるWebの可視化
「エンジニアのための データ可視化[実践]入門 ~D3.jsによるWebの可視化」感想

エンジニアのための データ可視化[実践]入門 ~D3.jsによるWebの可視化 …

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

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