Language
Login
Language Setting
X
English
日本語 [Japanese]
about this App
forked:外部SPARQLを利用した「Motion Chart」:大阪市工業推移データ
useful
0
Loading...
google.load("jquery", "1"); google.load("jqueryui", "1"); google.load("visualization", "1", {'packages' : [ 'motionchart' ]}); $(window).load(function() { sparql = new Sparql(); //SPARQL検索の実行 $('#find_query').click(function(){ var category = $('#category').val(); //sparql.findByQuery($('#query_area').val().replace(/[\n\r]/g,"")); //使用するSPARQLクエリの設定 query = 'select ?s ?name ?year ?movein ?moveout ?difference\n' +'where{\n' + '?s <http://lodosaka.hozo.jp/kind> "転入出推移"@ja.\n' + '?s <http://lodosaka.hozo.jp/name> ?name;\n' + ' <http://lodosaka.hozo.jp/year> ?year;\n' + '<http://lodosaka.hozo.jp/movein> ?movein;\n' + '<http://lodosaka.hozo.jp/moveout> ?moveout;\n' + '<http://lodosaka.hozo.jp/difference> ?difference;\n' + '}' //結果を表示する欄の設定 sparql.result_div = $('#result_div'); //クエリの実行 sparql.findByQuery(query); }); $('#result_div').hide(); init(); }); function init(){ // Servletサーバアドレス sparql.server = "http://lod.hozo.jp"; // 検索対象エンドポイント(途中での改行は不可) //var endpoint = $('#endpoint_url').val(); sparql.endpoint = {"endpoint": "http://lod.hozo.jp/repositories/IODD14Osaka", "namespaces": ""}; sparql.init(); //結果表示処理を行う関数を指定 // sparql.result_func = result_table; sparql.result_func = motion_chart; } function motion_chart(data){ var category = $('#category').val(); $('#result_div').show(); var datatable = new google.visualization.DataTable(); datatable.addColumn('string', data[0].kind); datatable.addColumn('number', '年'); datatable.addColumn('number', '転入'); datatable.addColumn('number', '転出'); datatable.addColumn('number', '差'); for(var i=0; i<data.length; i++){ datatable.addRow( [data[i].name, parseInt(data[i].year, 10), parseInt(data[i].place, 10), parseInt(data[i].shipment, 10), parseInt(data[i].employee, 10), parseInt(data[i].value, 10) ]); } var chart = new google.visualization.MotionChart( document.getElementById('result_div')); chart.draw(datatable, {'width': 900, 'height': 400}); }
.popup { width:800px; background-color:rgb(255, 255, 255); border:outset 2px; position:absolute; z-index:1000; } .quote { border:solid 2px; }
<div id="container"> <div id="header"> <h2>Motion Chartの利用例</h2> </div> <h3>大阪市の工業推移</h3> <div id="right" class="right"> <!-- 検索ペイン --> <select id="category"> <option>区</option> <option>産業分類</option> </select> <div id="find_div"> </div> <div> <!-- <textarea id="query_area" cols="60" rows="10"></textarea>--> <input type="button" id="find_query" value="検索"/> </div> <!-- 結果ペイン --> <div id="result_div"> </div> </div> </div>
Preview
Input Data
ReadMe
Snapshots
LinkData Work
Table Data
大阪市の工業推移
Contributor:Kozaki_Kouji
Update:Dec 23, 2013
1239 Downloads, 9 Applications
「第2回Linked Open Dataハッカソン関西 in 大阪」において, 大阪市のHPに公開されている「工業推移」をRDF化したものです. ※利用しているプロパティは,将来的に,政府等で統一した語彙が導入された際に差し替える予定で,暫定的なものを使用しています. SPARQLエンドポイントへは,こちらからアクセス可能です http://lod.hozo.jp/repositories/osaka_IndustryChange
industry_change_en5
Add LinkData work(LinkData)
Link http://app.linkdata.org/run/app1s612i?tab=readme
http://code.jquery.com/jquery-1.10.2.min.js
http://lod.hozo.jp/SparqlFinder/js/sparql.js
http://code.jquery.com/ui/1.10.3/jquery-ui.min.js
http://www.google.com/jsapi
http://lod.hozo.jp/SparqlFinder/js/template.js
Work
Add
Clear
insert work id or work name.