forked from colspan/seseki_viewer
-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathcity_block_districts.html
195 lines (177 loc) · 9.52 KB
/
city_block_districts.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>Seseki Viewer</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="build/common.bundle.js"></script>
<script src="build/seseki.bundle.js"></script>
<style>
div.row {
margin-bottom: 0;
}
</style>
</head>
<body>
<header>
<div class="navbar">
<nav>
<form action="#">
<div class="brown darken-3 row" style="margin-bottom:0;">
<div class="file-field input-field col s12 m6 l6">
<h1><a class="page-title" href="./index.html">Seseki 【岡山県統計View】</a></h1></div>
<!--div class="file-field input-field col s12 m3 l3 tooltipped" data-position="bottom" data-delay="50" data-tooltip="CSVファイルを開きます(UTF-8またはShift-JIS)" style="margin-top:14px;">
<div class="btn">
<span><i class="material-icons">description</i></span>
<input type="file" accept="csv" id="file_loader" style="">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" id="file_loader_filename" type="text" value="CSVファイルを開く">
<label></label>
</div>
</div>
<div class="input-field col s12 m2 l2 tooltipped" data-position="bottom" data-delay="50" data-tooltip="スプレッドシートでデータを編集できます">
<a href="#modal_spreadsheet" class="btn modal-trigger">スプレッドシート</a>
</div-->
<div class="input-field col s12 m6 l6">
<select class="browser-default tooltipped" id="sample_data_selector" data-position="bottom" data-delay="50" data-tooltip="その他のデータを選択できます" style="margin:6px 0 6px 0; color:black;">
<option value="" disabled selected>その他のデータを選択する</option>
</select>
</div>
</div>
<div class="brown darken-1 row" style="margin:0">
<div class="col s12 m6 l6">
<h2 style="margin:18px 0 0 10px" id="report_title">ファイルを入力してください</h2>
</div>
<div class="col s12 m6 l6">
<div class="input-field browser-default tooltipped" id="map_datatype_selector" data-position="bottom" data-delay="50" data-tooltip="表示項目を選択できます"></div>
</div>
</div>
</form>
</nav>
</div>
</header>
<main>
<div>
<div class="row" id="main_view">
<div class="col s12 m9 l9" id="map_container">
<div id="leaflet_map"></div>
</div>
<div class="col s12 m3 l3" id="ranking_view">
<div id="ranking_container">
<table>
<thead>
<th>順位</th>
<th>市町村名</th>
<th>値</th>
</thead>
<tbody id="ranking_table"></tbody>
</table>
</div>
</div>
</div>
<div class="row brown darken-1">
<div class="container">
<div class="card blue-grey darken-1" id="data-info" style="display:none;margin:0;">
<div class="card-content white-text">
<span class="card-title"><span id="data-title"></span></span>
<p><span id="data-description"></span></p>
<p>権利元 :
<a class="yellow-text" href="#" id="data-url"></a> (<a class="yellow-text" href="#" id="convertedcsv-url">変換済CSVファイル</a>)</p>
</div>
</div>
</div>
</div>
</div>
<div id="myModal" class="modal modal-fixed-footer">
<div class="modal-content">
<h4 class="modal-title tooltipped" id="modal_commune_name" data-position="bottom" data-delay="50" data-tooltip=""></h4>
<div class="modal-body" id="modal_commune_data"></div>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn">閉じる</a>
</div>
</div>
<!-- スプレッドシート -->
<div id="modal_spreadsheet" class="modal bottom-sheet">
<div class="modal-content">
<div id="spreadsheet"></div>
</div>
<div class="modal-footer">
<div class="chip blue lighten-4">Excel等からコピー&ペーストで入力できます。</div>
<div class="chip red accent-1">※ブラウザを閉じるとデータが消えますので注意してください</div>
<a href="#!" class="modal-action modal-close waves-effect waves-green btn">ヒートマップを更新する</a>
</div>
</div>
</main>
<footer class="page-footer brown darken-3">
<div class="footer-copyright" style="height: 120px; line-height: inherit;">
<div class="container">
アプリケーション : © data CRADLE, © Kunihiko Miyoshi 2017. MIT License.<br /> 可視化結果 :<br />
<a rel="license" href="http://creativecommons.org/licenses/by/2.1/jp/"><img alt="クリエイティブ・コモンズ・ライセンス" style="border-width:0" src="https://i.creativecommons.org/l/by/2.1/jp/88x31.png" /></a><br />この 作品 は <a rel="license" href="http://creativecommons.org/licenses/by/2.1/jp/">クリエイティブ・コモンズ 表示 2.1 日本 ライセンス</a>の下に提供されています。
</div>
</div>
</footer>
<script>
var prefecture_datalist = ["01_hokkaido", "02_aomori", "03_iwate", "04_miyagi", "05_akita", "06_yamagata", "07_fukushima", "08_ibaraki", "09_tochigi", "10_gumma", "11_saitama", "12_chiba", "13_tokyo", "14_kanagawa", "15_niigata", "16_toyama",
"17_ishikawa", "18_fukui", "19_tamanashi", "20_nagano", "21_gifu", "22_shizuoka", "23_aichi", "24_mie", "25_shiga", "26_kyoto", "27_osaka", "28_hyogo", "29_nara", "30_wakayama", "31_tottori", "32_shimane", "33_okayama",
"34_hiroshima", "35_yamaguchi", "36_tokushima", "37_kagawa", "38_ehime", "39_kochi", "40_fukuoka", "41_saga", "42_nagasaki", "43_kumamoto", "44_oita", "45_miyagawa", "46_kagoshima", "47_okinawa"
];
// sample_data : 'params/sample_data_01_hokkaido.json'
function elementary_school_district_parser(loaded) {
// 国土数値情報 中学校区データ向けのパーサ
// TopoJSONデータ展開
var geodata_fieldname = Object.keys(loaded.objects)[0];
var geojson = topojson.feature(loaded, loaded.objects[geodata_fieldname]);
var remove_indices = [];
var communes = [];
var id_map = [];
function register(k, v) {
if (!id_map[k]) id_map[k] = [];
if (id_map[k].indexOf(v) == -1) id_map[k].push(v);
}
geojson.features.forEach(function(d, i) {
// 市町村名を整理する
d.commune_id = d.properties.SEQ_NO2; // IDを代入
if (d.properties.CSS_NAME != null) {
d.name = d.properties.CSS_NAME + d.properties.MOJI + '_' + d.properties.SEQ_NO2;
} else {
d.name = d.properties.GST_NAME + d.properties.MOJI + '_' + d.properties.SEQ_NO2; // 町丁目の名前 + ID番号
}
// 一覧に追加
if (communes.indexOf(d.name) == -1) communes.push(d.name);
// 市立・町立がなくても対応を取れるようにマップを作成する
register(d.properties.A32_003, d.commune_id);
register(d.name, d.commune_id);
});
// 対象外の市町村を削除
remove_indices.forEach(function(d) {
geojson.features.splice(d, 1);
});
// 割り切り 同じ市町村名があると区別できない
return {
geojson: geojson,
communes: communes,
id_map: id_map
};
}
function execute_seseki() {
var target_prefectures = [33];
var geodata_files = ['data/okayama_city_block_district_topo.json'];
var gis_def = {
target_prefectures: target_prefectures,
geodata_files: geodata_files,
geodata_parser: elementary_school_district_parser,
geodata_attribution: '© <a href="https://www.e-stat.go.jp/SG1/estat/toukeiChiri.do?method=init">平成22年国勢調査(小地域) 境界線データ</a>',
ref_size: {
width: 750,
height: 650
},
sample_data: 'params/city_block_districts.json'
};
seseki(gis_def);
}
execute_seseki();
</script>
<!-- Google Analytics -->
</body>