日本の各種統計データの可視化 (人口・国土)
1.概要
「Google Chartsを使ってデータの可視化」で各種グラフパターン
のテンプレートを作成しましたが、実際のデータでないとピンとこないので、今回は、その第一弾として、日本の人口や国土(面積など)のデータを
利用してグラフパータンに当て嵌めて見ました。グラフによる可視化で全体の把握や相互の比較ができて分かりやすくなったと思います。
文字や表だけのデータでは味気ないですね。グラフは作っている途中で眺めていても楽しいものです。
2.利用方法 グラフは下記の14種類を作成しました。下記のデモ(DEMO)日本の各種統計データの可視化 (人口・国土)をクリックすると実際のグラフが確認できます。
DEMO 日本の各種統計データの可視化 (人口・国土)
3.ソースコード ソースコードは少し長いので、グラフ本体部分のJavaScriptのみ掲載します。詳細が必要であれば、ブラウザのソースコードの表示などで確認して下さい。
4.ソースコードについて 掲載ソースコードのライセンスは、CC0 (クレジット表示不要、改変可、商用可) とします。自由に利用して頂いてかまいません。 尚、データの取得やプログラム実行において損害等が生じた場合は、筆者は一切の責任も負いません。全て自己責任でお願いします。
■関連記事
・Google Chartsを使ってデータの可視化
・日本の各種統計データの可視化 (河川・山・湖沼・温泉)
・日本の各種統計データの可視化 (漁業・農業)
・日本の各種統計データの可視化 (気候)
2.利用方法 グラフは下記の14種類を作成しました。下記のデモ(DEMO)日本の各種統計データの可視化 (人口・国土)をクリックすると実際のグラフが確認できます。
-
・ 1. 全国人口の推移－総人口
・ 2. 全国人口の推移－日本人人口
・ 3. 総人口男女別割合
・ 4. 日本人人口男女別割合
・ 5. 年齢階級別(総人口－男)
・ 6. 年齢階級別(総人口－女)
・ 7. 年齢階級別(日本人人口－男)
・ 8. 年齢階級別(日本人人口－女)
・ 9. 地域別の面積 (2020年)
・10.地域別の面積割合（2020年)
・11.都道府県別の面積（2020年)
・12.面積の広い島（2020年) ※本島を除く
・13.面積の広い島（2020年) ※本島とその他
・14.面積の広い島（2020年) (割合)
DEMO 日本の各種統計データの可視化 (人口・国土)
3.ソースコード ソースコードは少し長いので、グラフ本体部分のJavaScriptのみ掲載します。詳細が必要であれば、ブラウザのソースコードの表示などで確認して下さい。
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="./css/graphdemo.css">
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart1);
google.charts.setOnLoadCallback(drawChart2);
google.charts.setOnLoadCallback(drawChart3);
google.charts.setOnLoadCallback(drawChart4);
google.charts.setOnLoadCallback(drawChart5);
google.charts.setOnLoadCallback(drawChart6);
google.charts.setOnLoadCallback(drawChart7);
google.charts.setOnLoadCallback(drawChart8);
google.charts.setOnLoadCallback(drawChart9);
google.charts.setOnLoadCallback(drawChart10);
google.charts.setOnLoadCallback(drawChart11);
google.charts.setOnLoadCallback(drawChart12);
google.charts.setOnLoadCallback(drawChart13);
google.charts.setOnLoadCallback(drawChart14);
//***** 1.縦棒グラフ(総人口) *****
function drawChart1() {
var data = google.visualization.arrayToDataTable([
["年", "人口", { role: "style" } ],
["2015年", 127094745, "color: #3366cc"],
["2016年", 126932772, "color: #dc3912"],
["2017年", 126706210, "color: #ff9900"],
["2018年", 126443180, "color: #109618"],
["2019年", 126166948, "color: #990099"],
["2020年", 125708382, "color: #0099c6"]
]);
var view = new google.visualization.DataView(data);
var options = {
'title': "1.全国人口の推移－総人口 単位:(人)",
'width': 400,
'height': 300,
'titleTextStyle': {fontSize:16,color:'#0000dd'},
'bar': {groupWidth: "80%"},
'legend': {position: "none"},
'chartArea':{left:80,top:60,width:'95%',height:'75%'},
};
var chart = new google.visualization.ColumnChart(document.getElementById("chart_div1"));
chart.draw(view, options);
}
//***** 2.縦棒グラフ(日本人人口) *****
function drawChart2() {
var data = google.visualization.arrayToDataTable([
["年", "人口", { role: "style" } ],
["2015年", 125319299, "color: #3366cc"],
["2016年", 125020252, "color: #dc3912"],
["2017年", 124648471, "color: #ff9900"],
["2018年", 124218285, "color: #109618"],
["2019年", 123731176, "color: #990099"],
["2020年", 123250274, "color: #0099c6"]
]);
var view = new google.visualization.DataView(data);
var options = {
'title': "2.全国人口の推移－日本人人口 単位:(人)",
'width': 400,
'height': 300,
'titleTextStyle': {fontSize:16,color:'#0000dd'},
'bar': {groupWidth: "80%"},
'legend': {position: "none"},
'chartArea':{left:80,top:60,width:'95%',height:'75%'},
};
var chart = new google.visualization.ColumnChart(document.getElementById("chart_div2"));
chart.draw(view, options);
}
//***** 3.ドーナツグラフ(総人口男女別割合) *****
function drawChart3() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['男 (61,155)', 61155],
['女 (64,554)', 64554]
]);
var view = new google.visualization.DataView(data);
var options = {'title':'3.総人口男女別割合 単位:(％)',
'width': 400,
'height':300,
'titleTextStyle': {fontSize:16,color:'#0000dd'},
'chartArea':{left:110,top:60,width:'100%',height:'80%'},
'pieHole': 0.3
};
var chart= new google.visualization.PieChart(document.getElementById('chart_div3'));
chart.draw(data, options);
}
//***** 4.ドーナツグラフ(日本人人口男女別割合) *****
function drawChart4() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['男 (59,936)', 59936],
['女 (63,315)', 63315]
]);
var view = new google.visualization.DataView(data);
var options = {'title':'4.日本人人口男女別割合 単位:(％)',
'width': 400,
'height':300,
'titleTextStyle': {fontSize:16,color:'#0000dd'},
'chartArea':{left:110,top:60,width:'100%',height:'80%'},
'pieHole': 0.3
};
var chart= new google.visualization.PieChart(document.getElementById('chart_div4'));
chart.draw(data, options);
}
//***** 5.横棒グラフ (男) *****
function drawChart5() {
var data = google.visualization.arrayToDataTable([
["Item", "男", { role: "style" } ],
["", 2394, "color: #3366cc"],
["", 2567, "color: #3366cc"],
["", 2734, "color: #3366cc"],
["", 2899, "color: #3366cc"],
["", 3292, "color: #3366cc"],
["", 3242, "color: #3366cc"],
["", 3361, "color: #3366cc"],
["", 3748, "color: #3366cc"],
["", 4250, "color: #3366cc"],
["", 4951, "color: #3366cc"],
["", 4366, "color: #3366cc"],
["", 3947, "color: #3366cc"],
["", 3665, "color: #3366cc"],
["", 3998, "color: #3366cc"],
["", 4353, "color: #3366cc"],
["", 3175, "color: #3366cc"],
["", 2252, "color: #3366cc"],
["", 1339, "color: #3366cc"],
["", 513, "color: #3366cc"],
["", 100, "color: #3366cc"],
["", 10, "color: #3366cc"]
]);
var view = new google.visualization.DataView(data);
var options = {
'hAxis': {direction:-1},
'title': "5.年齢階級別(総人口－男) 単位:(千人)",
'width': 400,
'height': 550,
'titleTextStyle': {fontSize:16,color:'#0000dd'},
'bar': {groupWidth: "90%"},
'legend': {position: "none"},
'chartArea':{left:100,top:60,width:'75%',height:'80%'},
};
var chart = new google.visualization.BarChart(document.getElementById("chart_div5"));
chart.draw(view, options);
}
//***** 6.横棒グラフ (女) *****
function drawChart6() {
var data = google.visualization.arrayToDataTable([
["Item", "女", { role: "style" } ],
["０ ～ ４", 2275, "color: #dc3912"],
["５ ～ ９", 2451, "color: #dc3912"],
["10 ～ 14", 2603, "color: #dc3912"],
["15 ～ 19", 2763, "color: #dc3912"],
["20 ～ 24", 3084, "color: #dc3912"],
["25 ～ 29", 3036, "color: #dc3912"],
["30 ～ 34 ",3215, "color: #dc3912"],
["35 ～ 39", 3648, "color: #dc3912"],
["40 ～ 44", 4147, "color: #dc3912"],
["45 ～ 49", 4846, "color: #dc3912"],
["50 ～ 54", 4317, "color: #dc3912"],
["55 ～ 59", 3955, "color: #dc3912"],
["60 ～ 64", 3761, "color: #dc3912"],
["65 ～ 69", 4249, "color: #dc3912"],
["70 ～ 74", 4869, "color: #dc3912"],
["75 ～ 79", 3930, "color: #dc3912"],
["80 ～ 84", 3171, "color: #dc3912"],
["85 ～ 89", 2412, "color: #dc3912"],
["90 ～ 94", 1328, "color: #dc3912"],
["95 ～ 99", 427, "color: #dc3912"],
["100歳以上", 67, "color: #dc3912"]
]);
var view = new google.visualization.DataView(data);
var options = {
'title': "6.年齢階級別(総人口－女) 単位:(千人)",
'width': 400,
'height': 550,
'titleTextStyle': {fontSize:16,color:'#0000dd'},
'bar': {groupWidth: "90%"},
'legend': {position: "none"},
'chartArea':{left:70,top:60,width:'75%',height:'80%'},
};
var chart = new google.visualization.BarChart(document.getElementById("chart_div6"));
chart.draw(view, options);
}
//***** 7.横棒グラフ (男) *****
function drawChart7() {
var data = google.visualization.arrayToDataTable([
["Item", "男", { role: "style" } ],
["", 2351, "color: #3366cc"],
["", 2529, "color: #3366cc"],
["", 2704, "color: #3366cc"],
["", 2860, "color: #3366cc"],
["", 3071, "color: #3366cc"],
["", 3014, "color: #3366cc"],
["", 3201, "color: #3366cc"],
["", 3640, "color: #3366cc"],
["", 4171, "color: #3366cc"],
["", 4885, "color: #3366cc"],
["", 4310, "color: #3366cc"],
["", 3901, "color: #3366cc"],
["", 3632, "color: #3366cc"],
["", 3972, "color: #3366cc"],
["", 4332, "color: #3366cc"],
["", 3162, "color: #3366cc"],
["", 2244, "color: #3366cc"],
["", 1336, "color: #3366cc"],
["", 512, "color: #3366cc"],
["", 99, "color: #3366cc"],
["", 10, "color: #3366cc"]
]);
var view = new google.visualization.DataView(data);
var options = {
'hAxis': {direction:-1},
'title': "7.年齢階級別(日本人人口－男) 単位:(千人)",
'width': 400,
'height': 550,
'titleTextStyle': {fontSize:16,color:'#0000dd'},
'bar': {groupWidth: "90%"},
'legend': {position: "none"},
'chartArea':{left:100,top:60,width:'75%',height:'80%'},
};
var chart = new google.visualization.BarChart(document.getElementById("chart_div7"));
chart.draw(view, options);
}
//***** 8.横棒グラフ (女) *****
function drawChart8() {
var data = google.visualization.arrayToDataTable([
["Item", "女", { role: "style" } ],
["０ ～ ４", 2234, "color: #dc3912"],
["５ ～ ９", 2416, "color: #dc3912"],
["10 ～ 14", 2575, "color: #dc3912"],
["15 ～ 19", 2725, "color: #dc3912"],
["20 ～ 24", 2906, "color: #dc3912"],
["25 ～ 29", 2870, "color: #dc3912"],
["30 ～ 34 ",3079, "color: #dc3912"],
["35 ～ 39", 3529, "color: #dc3912"],
["40 ～ 44", 4041, "color: #dc3912"],
["45 ～ 49", 4749, "color: #dc3912"],
["50 ～ 54", 4227, "color: #dc3912"],
["55 ～ 59", 3887, "color: #dc3912"],
["60 ～ 64", 3716, "color: #dc3912"],
["65 ～ 69", 4216, "color: #dc3912"],
["70 ～ 74", 4846, "color: #dc3912"],
["75 ～ 79", 3913, "color: #dc3912"],
["80 ～ 84", 3160, "color: #dc3912"],
["85 ～ 89", 2406, "color: #dc3912"],
["90 ～ 94", 1326, "color: #dc3912"],
["95 ～ 99", 427, "color: #dc3912"],
["100歳以上", 67, "color: #dc3912"]
]);
var view = new google.visualization.DataView(data);
var options = {
'title': "8.年齢階級別(日本人人口－女) 単位:(千人)",
'width': 400,
'height': 550,
'titleTextStyle': {fontSize:16,color:'#0000dd'},
'bar': {groupWidth: "90%"},
'legend': {position: "none"},
'chartArea':{left:70,top:60,width:'75%',height:'80%'},
};
var chart = new google.visualization.BarChart(document.getElementById("chart_div8"));
chart.draw(view, options);
}
//***** 9.縦棒グラフ(地域別の面積（2020年）) *****
function drawChart9() {
var data = google.visualization.arrayToDataTable([
["地域", "面積", { role: "style" } ],
["北海道",83424.5, "color: #3366cc"],
["東北", 66947.5, "color: #dc3912"],
["中部", 64050.2, "color: #ff9900"],
["九州", 49334.4, "color: #109618"],
["関東", 39441.7, "color: #990099"],
["近畿", 30858.5, "color: #0099c6"],
["中国", 25745.3, "color: #dd4477"],
["四国", 20615.7, "color: #66aa00"]
]);
var view = new google.visualization.DataView(data);
var options = {
'title': "9.地域別の面積 (2020年) 単位:(km2)",
'width': 400,
'height': 400,
'titleTextStyle': {fontSize:16,color:'#0000dd'},
'bar': {groupWidth: "80%"},
'legend': {position: "none"},
'hAxis': {'textStyle':{fontSize: 10,color:'#000000'}},
'chartArea':{left:60,top:60,width:'95%',height:'75%'},
};
var chart = new google.visualization.ColumnChart(document.getElementById("chart_div9"));
chart.draw(view, options);
}
//***** 10.ドーナツグラフ(地域別の面積割合（2020年) *****
function drawChart10() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['北海道', 83424.5],
['東北', 66947.5],
['中部', 64050.2],
['九州', 49334.4],
['関東', 39441.7],
['近畿', 30858.5],
['中国', 25745.3],
['四国', 20615.7]
]);
var view = new google.visualization.DataView(data);
var options = {'title':'10.地域別の面積割合（2020年) 単位:(％)',
'width': 400,
'height':300,
'titleTextStyle': {fontSize:16,color:'#0000dd'},
'chartArea':{left:60,top:60,width:'100%',height:'80%'},
'pieHole': 0.3
};
var chart= new google.visualization.PieChart(document.getElementById('chart_div10'));
chart.draw(data, options);
}
//***** 11.縦棒グラフ(都道府県の面積（2020年）) *****
function drawChart11() {
var data = google.visualization.arrayToDataTable([
["都道府県", "面積", { role: "style" } ],
["北海道", 83424, "color: #009933"],
["岩手県", 15275, "color: #009933"],
["福島県", 13784, "color: #009933"],
["長野県", 13562, "color: #009933"],
["新潟県", 12584, "color: #009933"],
["秋田県", 11638, "color: #009933"],
["岐阜県", 10621, "color: #009933"],
["青森県", 9646, "color: #009933"],
["山形県", 9323, "color: #009933"],
["鹿児島県", 9187, "color: #009933"],
["広島県", 8480, "color: #009933"],
["兵庫県", 8401, "color: #009933"],
["静岡県", 7777, "color: #009933"],
["宮崎県", 7735, "color: #009933"],
["熊本県", 7410, "color: #009933"],
["宮城県", 7282, "color: #009933"],
["岡山県", 7114, "color: #009933"],
["高知県", 7104, "color: #009933"],
["島根県", 6708, "color: #009933"],
["栃木県", 6408, "color: #009933"],
["群馬県", 6362, "color: #009933"],
["大分県", 6341, "color: #009933"],
["山口県", 6113, "color: #009933"],
["茨城県", 6097, "color: #009933"],
["三重県", 5775, "color: #009933"],
["愛媛県", 5676, "color: #009933"],
["愛知県", 5173, "color: #009933"],
["千葉県", 5158, "color: #009933"],
["福岡県", 4987, "color: #009933"],
["和歌山県", 4725, "color: #009933"],
["京都府", 4612, "color: #009933"],
["山梨県", 4465, "color: #009933"],
["富山県", 4248, "color: #009933"],
["福井県", 4191, "color: #009933"],
["石川県", 4186, "color: #009933"],
["徳島県", 4147, "color: #009933"],
["長崎県", 4131, "color: #009933"],
["滋賀県", 4017, "color: #009933"],
["埼玉県", 3798, "color: #009933"],
["奈良県", 3691, "color: #009933"],
["鳥取県", 3507, "color: #009933"],
["佐賀県", 2441, "color: #009933"],
["神奈川県", 2416, "color: #009933"],
["沖縄県", 2281, "color: #009933"],
["東京都", 2194, "color: #009933"],
["大阪府", 1905, "color: #009933"],
["香川県", 1877, "color: #009933"]
]);
var view = new google.visualization.DataView(data);
var options = {
'title': "11.都道府県別の面積（2020年) 単位:(km2) ※小数点以下は四捨五入",
'width': 800,
'height': 400,
'titleTextStyle': {fontSize:16,color:'#0000dd'},
'bar': {groupWidth: "75%"},
'legend': {position: "none"},
'chartArea':{left:60,top:60,width:'100%',height:'65%'},
'vAxis': {'textStyle':{fontSize: 11,color:'#000000'}},
'hAxis': {'slantedText':true,'slantedTextAngle':90,'textStyle': {fontSize: 12,color:'#000000'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById("chart_div11"));
chart.draw(view, options);
}
//***** 12.縦棒グラフ(面積の広い島（2020年)) *****
function drawChart12() {
var data = google.visualization.arrayToDataTable([
["島名", "面積", { role: "style" }],
["択捉島", 3167, "color: #990099"],
["国後島", 1489, "color: #990099"],
["沖縄島", 1207, "color: #990099"],
["佐渡島", 855, "color: #990099"],
["奄美大島", 712, "color: #990099"],
["対馬", 696, "color: #990099"],
["淡路島", 593, "color: #990099"],
["天草下島", 575, "color: #990099"],
["屋久島", 504, "color: #990099"],
["種子島", 444, "color: #990099"],
["福江島", 326, "color: #990099"],
["西表島", 290, "color: #990099"],
["徳之島", 248, "color: #990099"],
["色丹島", 248, "color: #990099"],
["道後", 242, "color: #990099"],
["天草上島", 226, "color: #990099"]
]);
var view = new google.visualization.DataView(data);
var options = {
'title': "12.面積の広い島（2020年) 単位:(km2) ※小数点以下は四捨五入",
'width': 800,
'height': 400,
'titleTextStyle': {fontSize: 16,color:'#0000dd'},
'bar': {groupWidth: "75%"},
'legend': { position: "none" },
'chartArea':{left:60,top:60,width:'100%',height:'65%'},
'vAxis': { 'textStyle':{fontSize: 11,color:'#000000'}},
'hAxis':{'slantedText':true,'slantedTextAngle':90,'textStyle': {fontSize: 12,color:'#000000'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById("chart_div12"));
chart.draw(view, options);
}
//***** 13.縦棒グラフ(面積の広い島（2020年）) *****
function drawChart13() {
var data = google.visualization.arrayToDataTable([
["地域", "面積", { role: "style" }],
["本州", 227941,"color: #3366cc"],
["北海道",77984, "color: #dc3912"],
["九州", 36783, "color: #ff9900"],
["四国", 18297, "color: #109618"],
["その他",11822, "color: #990099"]
]);
var view = new google.visualization.DataView(data);
var options = {
'title': "13.面積の広い島（2020年) 単位:(km2)",
'width': 400,
'height': 300,
'titleTextStyle': {fontSize:16,color:'#0000dd'},
'bar': {groupWidth: "80%"},
'legend': {position: "none"},
'hAxis': {'textStyle':{fontSize: 11,color:'#000000'}},
'chartArea':{left:60,top:60,width:'95%',height:'75%'},
};
var chart = new google.visualization.ColumnChart(document.getElementById("chart_div13"));
chart.draw(view, options);
}
//***** 14.積み上げ(100%)横棒グラフ(面積の広い島（2020年）割合) *****
function drawChart14() {
var data = google.visualization.arrayToDataTable([
['', '本州', '北海道', '九州', '四国',
'その他', { role: 'annotation' } ],
['2020年', 227941, 77984, 36783, 18297, 11822, '']
]);
var view = new google.visualization.DataView(data);
var options_fullStacked = {
'title': '14.面積の広い島（2020年）割合 単位:(％)',
'isStacked': 'percent',
'width': 400,
'height': 300,
'titleTextStyle': {fontSize: 16,color:'#0000dd'},
'legend': {position:'top', maxLines: 3},
'chartArea':{left:60,top:60,width:'85%',height:'55%'},
'hAxis': {
minValue: 0,
ticks: [0, .3, .6, .9, 1]
}
};
var chart = new google.visualization.BarChart(document.getElementById("chart_div14"));
chart.draw(view, options_fullStacked);
}
</script>
4.ソースコードについて 掲載ソースコードのライセンスは、CC0 (クレジット表示不要、改変可、商用可) とします。自由に利用して頂いてかまいません。 尚、データの取得やプログラム実行において損害等が生じた場合は、筆者は一切の責任も負いません。全て自己責任でお願いします。
■関連記事
・Google Chartsを使ってデータの可視化
・日本の各種統計データの可視化 (河川・山・湖沼・温泉)
・日本の各種統計データの可視化 (漁業・農業)
・日本の各種統計データの可視化 (気候)
コメント
コメントを投稿