Language
ログイン
言語設定
X
English
日本語 [Japanese]
オープンデータを使ってアプリを作ろう
アプリケーションの作成と公開をサポートするサイト
お問い合わせ
HOME
チュートリアル
アプリ新規作成
アプリのFork
公開アプリ一覧
アプリ作品の情報
人口
長野県須坂市
自治会
グラフ
須坂市自治会別住民人数(4/1時点)
fullscreen
長野県須坂市
須坂市の自治会別人口をグラフ化するアプリです。
5
評価指数
いいね!
3
Loading...
このアプリ作品で使われているデータと同じ形式のデータを作成し、このアプリに適用することができます。
ひな形として使うファイルをリストから選択し、"Create Templete"をクリックして下さい。
アプリケーション
fullscreen
play
stop
reload
Play
JavaScript
CSS
HTML
概要
保存した実行結果
須坂市自治会別住民人数(4/1時点)
jquery-1.7.1.min.js
https://www.google.com/jsapi
須坂市自治会別住民人数(4/1時点)
須坂市自治会別住民人数(4/1時点)
須坂市自治会別住民人数(4/1時点)
須坂市自治会別住民人数(4/1時点)
if(typeof Application==="undefined"||!Application){var Application= {};} Application.lc = function() { this._init.apply(this, arguments); } Application.lc.prototype = { _data : null, _options : null, _mainArray : null, _init : function() { this._mainArray = []; this._mainArray = this._getObjectArray(); this._options = this._getGoogleOption(); this._initCheckBox(); }, _initCheckBox : function() { var array = this._getSubjectKeyValuePair(); $.each(array, function(i, obj) { var checked = ""; if (i == 0 ) { checked = "checked='checked'"; } $("<div class='entry'><input type='checkbox' class='chkPrefecture' value='" + obj.key + "' " + checked + "/><span>" + obj.value + "</span></div>").appendTo("#checkBoxAreaId"); }); }, _configArray : function() { var array = []; var now = new Date(); var year = now.getFullYear(); //年 for( var y = 1972; y <= year; y++ ){ array.push( { "caption" : y.toString(), "property" : y.toString() } ); } return array; }, _getGoogleOption : function() { var options = { title: '合計人数', vAxis: {title: '単位:人', titleTextStyle: {color: '#A9A9A9'}} }; return options; }, _getObjectArray : function() { var main = []; $.each(LinkData.getWorks(), function(workKey, workValue) { $.each(LinkData.getFiles(workValue), function(fileKey, fileValue) { $.each(LinkData.getSubjects(workValue, fileValue), function(subjKey, subjValue) { var array = []; $.each(LinkData.getProperties(workValue, fileValue), function(propKey, propValue) { var propLabel = propValue; var arr = propValue.split("#"); if (arr.length > 1) { propLabel = decodeURIComponent(arr[1]); } var obj = {}; var objValue = LinkData.getObjects(workValue, fileValue, subjValue, propValue)[0]; obj.property = propLabel; obj.value = objValue; array.push(obj); }); main[subjValue] = array; }); }); }); return main; }, _getSubjectKeyValuePair : function() { var array = []; for (var key in this._mainArray) { var obj = {}; var label = key.replace("http://ja.wikipedia.org/wiki/", ""); obj.key = key; obj.value = label; array.push(obj); } return array; }, getDataByKey : function(keyArray) { var self = this; var main = []; var titleArray = []; titleArray.push(""); $.each(keyArray, function(i, key) { key = key.replace("http://ja.wikipedia.org/wiki/", ""); titleArray.push(key); }); main.push(titleArray); var configArray = this._configArray(); $.each(configArray, function(k, obj) { var arr = []; arr.push(obj.property); $.each(keyArray, function(i, key) { var array = self._mainArray[key]; $.each(array, function(j, objData) { if (objData.property === obj.property) { //alert(objData.property + " | " + obj.property + " | " + objData.value); var val = objData.value; if (! isNaN(val)) { val = parseFloat(val); } arr.push(val); } }); }); if(arr.length > 1) main.push(arr); }); return main; }, getData : function() { return this._data; }, getOptions : function() { return this._options; } } var drawMarkersMap = function() { var lc = new Application.lc(); var options = lc.getOptions(); var chart = new google.visualization.LineChart(document.getElementById('chart_div')); var runApp = function(dataArray) { $("#chart_div").show(); if (dataArray.length == 0) { $("#chart_div").hide(); return; } var array = lc.getDataByKey(dataArray); var data = google.visualization.arrayToDataTable(array); chart.draw(data, options); } var initArray = []; $(".chkPrefecture:checked").each(function() { initArray.push($(this).val()); }); runApp(initArray); $(".chkPrefecture").change(function() { var arr = []; $(".chkPrefecture:checked").each(function () { arr.push($(this).val()); }); runApp(arr); }); $("#selectAllButton").click(function() { var arr = []; $(".chkPrefecture").each(function () { $(this).attr("checked", "checked"); arr.push($(this).val()); }); runApp(arr); }); $("#clearAllButton").click(function() { var arr = []; $(".chkPrefecture").each(function () { $(this).removeAttr("checked"); }); runApp(arr); }); } google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawMarkersMap);
#pageContainer .header .headerContent .pageTitle { font-size: 100%; font-weight: bold; background-color: #ccccff; padding: 5px; text-align: center; font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; } #checkBoxAreaId .entry { float: left; margin-right: 20px; width: 100px; } #checkBoxAreaId:after { content: ""; display: block; clear: left; } body .select {/* 閲覧項目選択セレクト */ font-size: 100%; height: auto; margin-left: auto; margin-right: auto; display: inline-block; background: #FFF; width: 100%; margin: 5px auto; border-radius: 5px; box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.4) inset; }
<div id="pageContainer"> <div class="header"> <div class="headerContent cf"> <div class="pageTitle">須坂市 自治会別住民人数(4/1時点)</div> </div> </div> <h3>見たい自治会(町)を選んでください。</h3> <div> <div id="checkBoxAreaId"></div> <div> <br/> <input type="button" id="selectAllButton" value="Select All"/> <input type="button" id="clearAllButton" value="Clear All"/> </div> <div id="chart_div" style="width: 100%; height: 100%;"></div> </div> <p>グラフ線をクリックすると数値が表示されます</p> <div class="footer">このアプリは長野県須坂市のオープンデータ <a href="http://opendata.city.suzaka.nagano.jp/" target="_blank"> 須坂市自治会別人口</a> を利用しています。</div>
jquery-1.7.1.min.js
https://www.google.com/jsapi
このアプリをForkして新しいアプリを作る
ダウンロード
Fork元のアプリは更新されました.
>>see
アプリは更新されました.
>>see
ツイート
このアプリ作品をwebから探す
作者
メッセージ送信
長野県須坂市
Fork元のアプリ
ウディタ プンチへワ
's
統計データを折れ線ラフで表示するアプリ
実行回数
1023
ウェブサイト
ライセンス
Fork count
1
作成日
2015年9月25日
最終更新日
2022年11月25日
Fork元のアプリ
統計データを折れ線ラフで表示するアプリ
作者: ウディタ プンチへワ
更新日: 2012年6月11日
418 回実行
Forkして作られたアプリ
須坂市自治会別高齢化率(4/1時点)
作者: 長野県須坂市
更新日: 2022年11月25日
725 回実行
"
" コミュニティへの投稿が完了しました。投稿したアプリ作品は、コミュニティ管理者によって承認されるとコミュニティに公開されます。
エントリー先のコミュニティとカテゴリ名を選択し、「エントリー」ボタンをクリックして下さい。
チュートリアル
アプリ作品の削除をする場合は削除をクリックしてください
送信者
名前
*
E-mail
*
件名
*
メッセージ
*
アクセス認証
*
送信
キャンセル
入力データ
関連アイデア
このアプリ作品で入力データとして使われているデータ作品のリストです。
チェックボックスの選択を変更すると、入力データを変更して実行することができます。
長野県須坂市自治会別人口(各年4月1日時点)
作者: 長野県須坂市
更新日: 2022年11月25日
2640 ダウンロード
,
2 アプリケーション
suzakacity_gyoseiku_number_of_people_per_household
suzakacity_gyoseiku_population_19750401
suzakacity_gyoseiku_population_19760401
suzakacity_gyoseiku_population_19770401
suzakacity_gyoseiku_population_19780401
suzakacity_gyoseiku_population_19790401
suzakacity_gyoseiku_population_19800401
suzakacity_gyoseiku_population_19810401
suzakacity_gyoseiku_population_19820401
suzakacity_gyoseiku_population_19830401
suzakacity_gyoseiku_population_19840401
suzakacity_gyoseiku_population_19850401
suzakacity_gyoseiku_population_19860401
suzakacity_gyoseiku_population_19870401
suzakacity_gyoseiku_population_19880401
suzakacity_gyoseiku_population_19890401
suzakacity_gyoseiku_population_19900401
suzakacity_gyoseiku_population_19910401
suzakacity_gyoseiku_population_19940401
suzakacity_gyoseiku_population_20020401
suzakacity_gyoseiku_population_20040401
suzakacity_gyoseiku_population_20050401
suzakacity_gyoseiku_population_20060401
suzakacity_gyoseiku_population_20070401
suzakacity_gyoseiku_population_20080401
suzakacity_gyoseiku_population_20090401
suzakacity_gyoseiku_population_20100401
suzakacity_gyoseiku_population_20110401
suzakacity_gyoseiku_population_20120401
suzakacity_gyoseiku_population_20130401
suzakacity_gyoseiku_population_20140401
suzakacity_gyoseiku_population_20150401
suzakacity_gyoseiku_population_20160401
suzakacity_gyoseiku_population_20170401
suzakacity_gyoseiku_population_20180401
suzakacity_gyoseiku_population_20190401
suzakacity_gyoseiku_population_20200401
suzakacity_gyoseiku_population_20210401
suzakacity_gyoseiku_population_20220401
suzakacity_gyoseiku_population_household
suzakacity_gyoseiku_population_total
自分のデータを入力する
このアプリを使ったアイデアはまだ公開されていません
アイデアを作成
ニュースフィード
linkdata.org に関するツイート