日本の各種統計データの可視化 (河川・山・湖沼・温泉)
1.概要
「Google Chartsを使ってデータの可視化」で各種グラフパターン
のテンプレートを作成しましたが、実際のデータでないとピンとこないので、今回は、その第二弾として、日本の河川、山、湖沼、温泉のデータを
利用してグラフパータンに当て嵌めて見ました。グラフによる可視化で全体の把握や相互の比較ができて分かりやすくなったと思います。
日本は自然に恵まれ、温泉も豊富ですが、地震や台風による災害の多い国です。美しく豊かな自然と共存して生きていくしかないですね。
2.利用方法 グラフは下記の18種類を作成しました。下記のデモ(DEMO)日本の各種統計データの可視化 (河川・山・湖沼・温泉)をクリックすると実際のグラフが確認できます。
DEMO 日本の各種統計データの可視化 (河川・山・湖沼・温泉)
3.ソースコード ソースコードは少し長いので、グラフ本体部分のJavaScriptのみ掲載します。詳細が必要であれば、ブラウザのソースコードの表示などで確認して下さい。
4.ソースコードについて 掲載ソースコードのライセンスは、CC0 (クレジット表示不要、改変可、商用可) とします。自由に利用して頂いてかまいません。 尚、データの取得やプログラム実行において損害等が生じた場合は、筆者は一切の責任も負いません。全て自己責任でお願いします。
■関連記事
・Google Chartsを使ってデータの可視化
・日本の各種統計データの可視化 (人口・国土)
・日本の各種統計データの可視化 (漁業・農業)
・日本の各種統計データの可視化 (気候)
2.利用方法 グラフは下記の18種類を作成しました。下記のデモ(DEMO)日本の各種統計データの可視化 (河川・山・湖沼・温泉)をクリックすると実際のグラフが確認できます。
-
・ 1. 一級河川の流域面積
・ 2. 一級河川の流路延長
・ 3. 日本の山 (標高順)
・ 4. 日本の湖沼 (面積順)
・ 5. 日本の湖沼 (貯水量順)
・ 6. 日本の湖沼 (最大水深順)
・ 7. 都道府県別温泉地数
・ 8. 都道府県別温泉地数 (割合)
・ 9. 都道府県別源泉総数
・10.都道府県別源泉総数 (割合)
・11.都道府県別高温源泉数
・12.都道府県別高温源泉数 (割合)
・13.都道府県別総湧出量
・14.都道府県別総湧出量 (割合)
・15.都道府県別自噴湧出量
・16.都道府県別自噴湧出量 (割合)
・17.道府県別動力湧出量
・18.都道府県別動力湧出量 (割合)
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);
google.charts.setOnLoadCallback(drawChart15);
google.charts.setOnLoadCallback(drawChart16);
google.charts.setOnLoadCallback(drawChart17);
google.charts.setOnLoadCallback(drawChart18);
//***** 1.縦棒グラフ(一級河川の流域面積) *****
function drawChart1() {
var data = google.visualization.arrayToDataTable([
["水系名", "水系流域面積(km2)", { role: "style" }],
["利根川", 16840, "color: #0088cc"],
["石狩川", 14330, "color: #0088cc"],
["信濃川", 11900, "color: #0088cc"],
["北上川", 10150, "color: #0088cc"],
["木曽川", 9100, "color: #0088cc"],
["十勝川", 9010, "color: #0088cc"],
["淀川", 8240, "color: #0088cc"],
["阿賀野川", 7710, "color: #0088cc"],
["最上川", 7040, "color: #0088cc"],
["天塩川", 5590, "color: #0088cc"],
["阿武隈川", 5400, "color: #0088cc"],
["天竜川", 5090, "color: #0088cc"],
["雄物川", 4710, "color: #0088cc"],
["米代川", 4100, "color: #0088cc"],
["富士川", 3990, "color: #0088cc"],
["江の川", 3900, "color: #0088cc"],
["吉野川", 3750, "color: #0088cc"],
["那珂川", 3270, "color: #0088cc"],
["荒川", 2940, "color: #0088cc"],
["九頭竜川", 2930, "color: #0088cc"]
]);
var view = new google.visualization.DataView(data);
var options = {
'title': "1.一級河川の流域面積 単位:(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_div1"));
chart.draw(view, options);
}
//***** 2.縦棒グラフ(一級河川の流路延長) *****
function drawChart2() {
var data = google.visualization.arrayToDataTable([
["水系名", "水系本川延長(km)", { role: "style" }],
["信濃川", 367, "color: #0088ff"],
["利根川", 322, "color: #0088ff"],
["石狩川", 268, "color: #0088ff"],
["天塩川", 256, "color: #0088ff"],
["北上川", 249, "color: #0088ff"],
["阿武隈川", 239, "color: #0088ff"],
["木曽川", 229, "color: #0088ff"],
["最上川", 229, "color: #0088ff"],
["天竜川", 213, "color: #0088ff"],
["阿賀野川", 210, "color: #0088ff"],
["渡川", 196, "color: #0088ff"],
["江の川", 194, "color: #0088ff"],
["吉野川", 194, "color: #0088ff"],
["新宮川", 183, "color: #0088ff"],
["荒川", 173, "color: #0088ff"],
["大井川", 168, "color: #0088ff"],
["十勝川", 156, "color: #0088ff"],
["釧路川", 154, "color: #0088ff"],
["斐伊川", 153, "color: #0088ff"],
["那珂川", 150, "color: #0088ff"]
]);
var view = new google.visualization.DataView(data);
var options = {
'title': "2.一級河川の流路延長 単位:(km)",
'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_div2"));
chart.draw(view, options);
}
//***** 3.縦棒グラフ(日本の山 (標高順)) *****
function drawChart3() {
var data = google.visualization.arrayToDataTable([
["山名", "標高(km)", { role: "style" }],
["富士山", 3776.24, "color: #008833"],
["北岳", 3193.20, "color: #008833"],
["奥穂高岳", 3190.0, "color: #008833"],
["間ノ岳", 3190.0, "color: #008833"],
["槍ヶ岳", 3180.0, "color: #008833"],
["悪沢岳", 3141.0, "color: #008833"],
["赤石岳", 3120.53, "color: #008833"],
["涸沢岳", 3110.0, "color: #008833"],
["北穂高岳", 3106.0, "color: #008833"],
["大喰岳", 3101.0, "color: #008833"],
["前穂高岳", 3090.20, "color: #008833"],
["中岳", 3084.0, "color: #008833"],
["荒川中岳", 3083.68, "color: #008833"],
["御嶽山", 3067.0, "color: #008833"],
["農鳥岳", 3051.0, "color: #008833"],
["塩見岳", 3046.90, "color: #008833"],
["南岳", 3032.70, "color: #008833"],
["仙丈ヶ岳", 3032.60, "color: #008833"],
["乗鞍岳", 3026.0, "color: #008833"],
["立山", 3015.0, "color: #008833"]
]);
var view = new google.visualization.DataView(data);
var options = {
'title': "3.日本の山 (標高順) 単位:(km)",
'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_div3"));
chart.draw(view, options);
}
//***** 4.縦棒グラフ(日本の湖沼(面積順) *****
function drawChart4() {
var data = google.visualization.arrayToDataTable([
["名前", "面積(km2)", { role: "style" }],
["琵琶湖", 669.26, "color: #000066"],
["霞ヶ浦", 168.1, "color: #000066"],
["サロマ湖", 151.59, "color: #000066"],
["猪苗代湖", 103.24, "color: #000066"],
["中海", 85.74, "color: #000066"],
["屈斜路湖", 79.54, "color: #000066"],
["宍道湖", 79.25, "color: #000066"],
["支笏湖", 78.48, "color: #000066"],
["洞爺湖", 70.72, "color: #000066"],
["浜名湖", 64.92, "color: #000066"],
["小川原湖", 61.98, "color: #000066"],
["十和田湖", 61.1, "color: #000066"],
["風蓮湖", 59.01, "color: #000066"],
["能取湖", 58.2, "color: #000066"],
["北浦", 35.03, "color: #000066"],
["厚岸湖", 32.31, "color: #000066"],
["網走湖", 32.28, "color: #000066"],
["八郎潟調整池",31.5, "color: #000066"],
["田沢湖", 25.75, "color: #000066"],
["朱鞠内湖", 23.73, "color: #000066"]
]);
var view = new google.visualization.DataView(data);
var options = {
'title': "4.日本の湖沼 (面積順) 単位:(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_div4"));
chart.draw(view, options);
}
//***** 5.縦棒グラフ(日本の湖沼(貯水量順) *****
function drawChart5() {
var data = google.visualization.arrayToDataTable([
["名前", "貯水量(km3)", { role: "style" }],
["琵琶湖", 27.5, "color: #dd6688"],
["支笏湖", 20.9, "color: #dd6688"],
["洞爺湖", 8.19, "color: #dd6688"],
["田沢湖", 7.2, "color: #dd6688"],
["猪苗代湖", 5.4, "color: #dd6688"],
["十和田湖", 4.19, "color: #dd6688"],
["摩周湖", 2.75, "color: #dd6688"],
["屈斜路湖", 2.2, "color: #dd6688"],
["池田湖", 1.38, "color: #dd6688"],
["サロマ湖", 1.3, "color: #dd6688"],
["中禅寺湖", 1.1, "color: #dd6688"],
["小川原湖", 0.68, "color: #dd6688"],
["徳山湖", 0.66, "color: #dd6688"],
["霞ヶ浦", 0.6, "color: #dd6688"],
["銀山湖", 0.6, "color: #dd6688"],
["能取湖", 0.5, "color: #dd6688"],
["田子倉湖", 0.49, "color: #dd6688"],
["中海", 0.47, "color: #dd6688"],
["シューパロ湖",0.43, "color: #dd6688"],
["御母衣湖", 0.37, "color: #dd6688"]
]);
var view = new google.visualization.DataView(data);
var options = {
'title': "5.日本の湖沼 (貯水量順) 単位:(km3)",
'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_div5"));
chart.draw(view, options);
}
//***** 6.縦棒グラフ(日本の湖沼(最大水深順) *****
function drawChart6() {
var data = google.visualization.arrayToDataTable([
["名前", "最大水深(m)", { role: "style" }],
["田沢湖", 423, "color: #ff9900"],
["支笏湖", 363, "color: #ff9900"],
["十和田湖", 327, "color: #ff9900"],
["池田湖", 233, "color: #ff9900"],
["摩周湖", 211.5, "color: #ff9900"],
["洞爺湖", 180, "color: #ff9900"],
["中禅寺湖", 163, "color: #ff9900"],
["屈斜路湖", 117, "color: #ff9900"],
["琵琶湖", 103.6, "color: #ff9900"],
["猪苗代湖", 94.6, "color: #ff9900"],
["阿寒湖", 45, "color: #ff9900"],
["桧原湖", 31, "color: #ff9900"],
["小川原湖", 24, "color: #ff9900"],
["能取湖", 21.2, "color: #ff9900"],
["サロマ湖", 20, "color: #ff9900"],
["網走湖", 16.8, "color: #ff9900"],
["浜名湖", 16.6, "color: #ff9900"],
["八郎潟調整池", 12, "color: #ff9900"],
["風蓮湖", 11, "color: #ff9900"],
["厚岸湖", 11, "color: #ff9900"]
]);
var view = new google.visualization.DataView(data);
var options = {
'title': "6.日本の湖沼 (最大水深順) 単位:(m)",
'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_div6"));
chart.draw(view, options);
}
//***** 7.横棒グラフ (都道府県別源泉総数 (箇所)) *****
function drawChart7() {
var data = google.visualization.arrayToDataTable([
["都道府県", "温泉地数", { role: "style" } ],
["北海道", 245, "color: #3366cc"],
["長野県", 215, "color: #dc3912"],
["新潟県", 147, "color: #ff9900"],
["青森県", 132, "color: #109618"],
["福島県", 131, "color: #990099"],
["秋田県", 125, "color: #0099c6"],
["静岡県", 112, "color: #dd4477"],
["群馬県", 103, "color: #66aa00"],
["鹿児島県", 100, "color: #b82e2e"],
["千葉県", 83, "color: #316395"]
]);
var view = new google.visualization.DataView(data);
var options = {
'title': "7.都道府県別温泉地数 単位:(箇所)",
'width': 400,
'height': 300,
'titleTextStyle': {fontSize:16,color:'#0000dd'},
'bar': {groupWidth: "90%"},
'legend': {position: "none"},
'chartArea':{left:70,top:60,width:'75%',height:'75%'},
};
var chart = new google.visualization.BarChart(document.getElementById("chart_div7"));
chart.draw(view, options);
}
//***** 8.積み上げ(100%)横棒グラフ(都道府県別温泉地数 (割合) *****
function drawChart8() {
var data = google.visualization.arrayToDataTable([
['', '北海道', '長野県', '新潟県', '青森県','福島県','秋田県',
'静岡県','群馬県','鹿児島県','千葉県', { role: 'annotation' } ],
['2017年', 245, 215, 147, 132, 131, 124, 112, 103, 100, 83,'']
]);
var view = new google.visualization.DataView(data);
var options_fullStacked = {
'title': '8.都道府県別温泉地数 (割合)',
'isStacked': 'percent',
'width': 400,
'height': 300,
'titleTextStyle': {fontSize: 16,color:'#0000dd'},
'legend': {position:'top', maxLines: 3},
'chartArea':{left:60,top:100,width:'85%',height:'55%'},
'hAxis': {
minValue: 0,
ticks: [0, .3, .6, .9, 1]
}
};
var chart = new google.visualization.BarChart(document.getElementById("chart_div8"));
chart.draw(view, options_fullStacked);
}
//***** 9.横棒グラフ (都道府県別源泉総数 (箇所)) *****
function drawChart9() {
var data = google.visualization.arrayToDataTable([
["都道府県", "源泉総数", { role: "style" } ],
["大分県", 4385, "color: #3366cc"],
["鹿児島県", 2764, "color: #dc3912"],
["静岡県", 2261, "color: #ff9900"],
["北海道", 2230, "color: #109618"],
["熊本県", 1352, "color: #990099"],
["青森県", 1098, "color: #0099c6"],
["長野県", 974, "color: #dd4477"],
["福島県", 780, "color: #66aa00"],
["宮城県", 755, "color: #b82e2e"],
["秋田県", 633, "color: #316395"]
]);
var view = new google.visualization.DataView(data);
var options = {
'title': "9.都道府県別源泉総数 単位:(箇所)",
'width': 400,
'height': 300,
'titleTextStyle': {fontSize:16,color:'#0000dd'},
'bar': {groupWidth: "90%"},
'legend': {position: "none"},
'chartArea':{left:70,top:60,width:'75%',height:'75%'},
};
var chart = new google.visualization.BarChart(document.getElementById("chart_div9"));
chart.draw(view, options);
}
//***** 10.積み上げ(100%)横棒グラフ(都道府県別源泉総数 (割合) *****
function drawChart10() {
var data = google.visualization.arrayToDataTable([
['', '大分県', '鹿児島県', '静岡県', '北海道','熊本県','青森県',
'長野県','福島県','宮城県','秋田県', { role: 'annotation' } ],
['2017年', 4385, 2764, 2261, 2230, 1352, 1098, 974, 780, 755, 633,'']
]);
var view = new google.visualization.DataView(data);
var options_fullStacked = {
'title': '10.都道府県別源泉総数 (割合)',
'isStacked': 'percent',
'width': 400,
'height': 300,
'titleTextStyle': {fontSize: 16,color:'#0000dd'},
'legend': {position:'top', maxLines: 3},
'chartArea':{left:60,top:100,width:'85%',height:'55%'},
'hAxis': {
minValue: 0,
ticks: [0, .3, .6, .9, 1]
}
};
var chart = new google.visualization.BarChart(document.getElementById("chart_div10"));
chart.draw(view, options_fullStacked);
}
//***** 11.横棒グラフ (都道府県別高温源泉数 (箇所)) *****
function drawChart11() {
var data = google.visualization.arrayToDataTable([
["都道府県", "高温源泉数", { role: "style" } ],
["大分県", 3305, "color: #3366cc"],
["鹿児島県", 1806, "color: #dc3912"],
["北海道", 1146, "color: #ff9900"],
["熊本県", 789, "color: #109618"],
["静岡県", 751, "color: #990099"],
["青森県", 687, "color: #0099c6"],
["長野県", 413, "color: #dd4477"],
["宮城県", 313, "color: #66aa00"],
["秋田県", 299, "color: #b82e2e"],
["神奈川県", 274, "color: #316395"]
]);
var view = new google.visualization.DataView(data);
var options = {
'title': "11.都道府県別高温源泉数 単位:(箇所)",
'width': 400,
'height': 300,
'titleTextStyle': {fontSize:16,color:'#0000dd'},
'bar': {groupWidth: "90%"},
'legend': {position: "none"},
'chartArea':{left:70,top:60,width:'75%',height:'75%'},
};
var chart = new google.visualization.BarChart(document.getElementById("chart_div11"));
chart.draw(view, options);
}
//***** 12.積み上げ(100%)横棒グラフ(都道府県別高温源泉数 (割合) *****
function drawChart12() {
var data = google.visualization.arrayToDataTable([
['', '大分県', '鹿児島県', '北海道', '熊本県','静岡県','青森県',
'長野県','宮城県','秋田県','神奈川県', { role: 'annotation' } ],
['2017年', 3305, 1806, 1146, 789, 751, 687, 413, 313, 299, 274,'']
]);
var view = new google.visualization.DataView(data);
var options_fullStacked = {
'title': '12.都道府県別高温源泉数 (割合)',
'isStacked': 'percent',
'width': 400,
'height': 300,
'titleTextStyle': {fontSize: 16,color:'#0000dd'},
'legend': {position:'top', maxLines: 3},
'chartArea':{left:60,top:100,width:'85%',height:'55%'},
'hAxis': {
minValue: 0,
ticks: [0, .3, .6, .9, 1]
}
};
var chart = new google.visualization.BarChart(document.getElementById("chart_div12"));
chart.draw(view, options_fullStacked);
}
//***** 13.横棒グラフ (都道府県別総湧出量 (ℓ/分)) *****
function drawChart13() {
var data = google.visualization.arrayToDataTable([
["都道府県", "湧出量", { role: "style" } ],
["大分県", 281331, "color: #3366cc"],
["福島県", 250975, "color: #dc3912"],
["北海道", 206564, "color: #ff9900"],
["鹿児島県", 156346, "color: #109618"],
["青森県", 153661, "color: #990099"],
["熊本県", 133661, "color: #0099c6"],
["静岡県", 119426, "color: #dd4477"],
["長野県", 114830, "color: #66aa00"],
["岩手県", 108115, "color: #b82e2e"],
["秋田県", 88322, "color: #316395"]
]);
var view = new google.visualization.DataView(data);
var options = {
'title': "13.都道府県別総湧出量 単位:(ℓ/分)",
'width': 400,
'height': 300,
'titleTextStyle': {fontSize:16,color:'#0000dd'},
'bar': {groupWidth: "90%"},
'legend': {position: "none"},
'chartArea':{left:70,top:60,width:'75%',height:'75%'},
};
var chart = new google.visualization.BarChart(document.getElementById("chart_div13"));
chart.draw(view, options);
}
//***** 14.積み上げ(100%)横棒グラフ(都道府県別総湧出量 (ℓ/分) (割合) *****
function drawChart14() {
var data = google.visualization.arrayToDataTable([
['', '大分県', '福島県', '北海道', '鹿児島県','青森県','熊本県',
'静岡県','長野県','岩手県','秋田県', { role: 'annotation' } ],
['2017年', 281331, 250975, 206564, 156346, 153661, 133661, 119426, 114830, 108115, 88322,'']
]);
var view = new google.visualization.DataView(data);
var options_fullStacked = {
'title': '14.都道府県別総湧出量 (ℓ/分) (割合)',
'isStacked': 'percent',
'width': 400,
'height': 300,
'titleTextStyle': {fontSize: 16,color:'#0000dd'},
'legend': {position:'top', maxLines: 3},
'chartArea':{left:60,top:100,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);
}
//***** 15.横棒グラフ (都道府県別自噴湧出量 (ℓ/分)) *****
function drawChart15() {
var data = google.visualization.arrayToDataTable([
["都道府県", "湧出量", { role: "style" } ],
["大分県", 118119, "color: #3366cc"],
["福島県", 91069, "color: #dc3912"],
["北海道", 61628, "color: #ff9900"],
["岩手県", 58384, "color: #109618"],
["鹿児島県", 54363, "color: #990099"],
["長野県", 44415, "color: #0099c6"],
["秋田県", 38287, "color: #dd4477"],
["群馬県", 27513, "color: #66aa00"],
["熊本県", 25092, "color: #b82e2e"],
["栃木県", 20013, "color: #316395"]
]);
var view = new google.visualization.DataView(data);
var options = {
'title': "15.都道府県別自噴湧出量 単位:(ℓ/分)",
'width': 400,
'height': 300,
'titleTextStyle': {fontSize:16,color:'#0000dd'},
'bar': {groupWidth: "90%"},
'legend': {position: "none"},
'chartArea':{left:70,top:60,width:'75%',height:'75%'},
};
var chart = new google.visualization.BarChart(document.getElementById("chart_div15"));
chart.draw(view, options);
}
//***** 16.積み上げ(100%)横棒グラフ(都道府県別自噴湧出量 (ℓ/分) (割合)) *****
function drawChart16() {
var data = google.visualization.arrayToDataTable([
['', '大分県', '福島県', '北海道', '岩手県','鹿児島県','長野県',
'秋田県','群馬県','熊本県','栃木県', { role: 'annotation' } ],
['2017年', 118119, 91069, 61628, 58384, 54363, 44415, 38287, 27513, 25092, 20013,'']
]);
var view = new google.visualization.DataView(data);
var options_fullStacked = {
'title': '16.都道府県別自噴湧出量 (ℓ/分) (割合)',
'isStacked': 'percent',
'width': 400,
'height': 300,
'titleTextStyle': {fontSize: 16,color:'#0000dd'},
'legend': {position:'top', maxLines: 3},
'chartArea':{left:60,top:100,width:'85%',height:'55%'},
'hAxis': {
minValue: 0,
ticks: [0, .3, .6, .9, 1]
}
};
var chart = new google.visualization.BarChart(document.getElementById("chart_div16"));
chart.draw(view, options_fullStacked);
}
//***** 17.横棒グラフ (道府県別動力湧出量 (ℓ/分)) *****
function drawChart17() {
var data = google.visualization.arrayToDataTable([
["都道府県", "湧出量 ", { role: "style" } ],
["大分県", 163212, "color: #3366cc"],
["福島県", 159906, "color: #dc3912"],
["北海道", 144936, "color: #ff9900"],
["青森県", 139594, "color: #109618"],
["熊本県", 108569, "color: #990099"],
["静岡県", 108288, "color: #0099c6"],
["鹿児島県", 101983, "color: #dd4477"],
["長野県", 70415, "color: #66aa00"],
["岐阜県", 57622, "color: #b82e2e"],
["福岡県", 55744, "color: #316395"]
]);
var view = new google.visualization.DataView(data);
var options = {
'title': "17.道府県別動力湧出量 単位:(ℓ/分)",
'width': 400,
'height': 300,
'titleTextStyle': {fontSize:16,color:'#0000dd'},
'bar': {groupWidth: "90%"},
'legend': {position: "none"},
'chartArea':{left:70,top:60,width:'75%',height:'75%'},
};
var chart = new google.visualization.BarChart(document.getElementById("chart_div17"));
chart.draw(view, options);
}
//***** 18.積み上げ(100%)横棒グラフ(都道府県別動力湧出量 (ℓ/分) (割合) *****
function drawChart18() {
var data = google.visualization.arrayToDataTable([
['', '大分県', '福島県', '北海道', '青森県','熊本県','静岡県',
'鹿児島県','長野県','岐阜県','福岡県', { role: 'annotation' } ],
['2017年', 163212, 159906, 144936, 139594, 108569, 108288, 101983, 70415, 57622, 55744,'']
]);
var view = new google.visualization.DataView(data);
var options_fullStacked = {
'title': '18.都道府県別動力湧出量 (ℓ/分) (割合)',
'isStacked': 'percent',
'width': 400,
'height': 300,
'titleTextStyle': {fontSize: 16,color:'#0000dd'},
'legend': {position:'top', maxLines: 3},
'chartArea':{left:60,top:100,width:'85%',height:'55%'},
'hAxis': {
minValue: 0,
ticks: [0, .3, .6, .9, 1]
}
};
var chart = new google.visualization.BarChart(document.getElementById("chart_div18"));
chart.draw(view, options_fullStacked);
}
</script>
4.ソースコードについて 掲載ソースコードのライセンスは、CC0 (クレジット表示不要、改変可、商用可) とします。自由に利用して頂いてかまいません。 尚、データの取得やプログラム実行において損害等が生じた場合は、筆者は一切の責任も負いません。全て自己責任でお願いします。
■関連記事
・Google Chartsを使ってデータの可視化
・日本の各種統計データの可視化 (人口・国土)
・日本の各種統計データの可視化 (漁業・農業)
・日本の各種統計データの可視化 (気候)
コメント
コメントを投稿