Create Ex3-1test.html

oecu-kozaki-lab · Feb 15, 2024 · 6f050d3 · 6f050d3
1 parent 7c129f8
commit 6f050d3
Showing 1 changed file with 166 additions and 0 deletions.
diff --git a/docs/Ex3-1test.html b/docs/Ex3-1test.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta http-equiv="X-UA-Compatible" content="ie=edge">
+<title>JavaScriptを用いたSPARQL処理</title>
+
+<link rel="stylesheet" href="style.css">
+<!--KG検索用のライブラリ（https://kgs.hozo.jp/にて公開）の読み込み-->
+<script src="KGSearch.js"></script>
+<script src="https://d3js.org/d3.v5.min.js"></script>
+
+<script>
+window.addEventListener('load', async () => {
+	const sendButton = document.getElementById('send');
+	//検索実行ボタンで実行する処理
+	sendButton.addEventListener('click', async () => {
+        makeQuery();
+	}, false);
+
+}, false);
+
+//SPARQLクエリを実行する
+async function makeQuery(){
+	//SPARQLエンドポイントの指定
+    let endpoint = "https://query.wikidata.org/sparql";
+
+	//SPARQLクエリの取得
+	let query = document.getElementById('query_area').value;
+
+	//SPARQLクエリの実行処理	
+	dispLoading("検索中...");//検索中の画像表示	
+	const resultData = await sendSPARQLQuery(endpoint, query);//SPARQLクエリの実行
+    removeLoading();//検索中の画像を削除
+
+	//SPARQLクエリの実行結果の表示処理
+	document.getElementById('resjson_area').value = JSON.stringify(resultData,null,'  ');
+
+	const resultArea = document.getElementById('result_div');	
+    //showResult(resultData,resultArea); //クエリ結果の表示
+    showGraph(resultData,resultArea)
+}
+
+function showResult(resultData,resultArea){
+	const keys = resultData.head.vars; //戻り値の変数一覧を格納する配列
+	const data = resultData.results.bindings;//戻り値のデータを格納する配列（JSON）
+
+	let mesText ='';//表示内容を作成するための変数	
+    for (let i=0; i<data.length;i++){
+        for (let k=0; k<keys.length;k++){
+            if(k>0){//2列目以降の時は「,」を足す
+                mesText += ',';
+            }
+            mesText += showRDFdata(data[i][keys[k]]);
+        }
+        //一行分の処理の終わりに「改行」を足す
+        mesText += '<br>\n';
+    }
+
+	resultArea.innerHTML = mesText;//結果を表示する領域のHTMLを書き換える
+}
+
+function showRDFdata(val){
+    let mesText ="";
+
+    if(val.type == "uri"){
+            mesText += '<a href="'+val.value+'" target="_blank">'
+                     +  val.value + '</a>';
+        }
+    else if(val.type == "literal"){
+        if(val['xml:lang'] != null){
+            mesText += val.value + '@' + val['xml:lang'];
+        }
+        else if(val.datatype != null){
+            mesText += val.value + '^^' + val.datatype;
+        }
+        else{
+            mesText += val.value; 
+        }
+    }
+    else{
+        mesText += val.value; 
+    }
+
+    return mesText;
+}
+
+function showGraph(resultData,resultArea){
+      // 1. データの準備
+  var dataset = [
+    { "name": "A", "value": 5 },
+    { "name": "B", "value": 6 },
+    { "name": "C", "value": 8 },
+    { "name": "D", "value": 1 },
+    { "name": "E", "value": 2 },
+    { "name": "F", "value": 6 },
+    { "name": "G", "value": 8 },
+    { "name": "H", "value": 6 },
+    { "name": "I", "value": 10 },
+    { "name": "J", "value": 9 }
+  ]
+  var width = 400; // グラフの幅
+  var height = 300; // グラフの高さ
+  var padding = 30; // スケール表示用マージン
+
+  // 2. SVG領域の設定
+  var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
+
+  // 3. 軸スケールの設定
+  var xScale = d3.scaleBand()
+    .rangeRound([padding, width - padding])
+    .padding(0.1)
+    .domain(dataset.map(function(d) { return d.name; }));
+
+  var yScale = d3.scaleLinear()
+    .domain([0, d3.max(dataset, function(d) { return d.value; })])
+    .range([height - padding, padding]);
+
+  // 4. 軸の表示
+  svg.append("g")
+    .attr("transform", "translate(" + 0 + "," + (height - padding) + ")")
+    .call(d3.axisBottom(xScale));
+
+  svg.append("g")
+    .attr("transform", "translate(" + padding + "," + 0 + ")")
+    .call(d3.axisLeft(yScale));
+
+  // 5. バーの表示
+  svg.append("g")
+    .selectAll("rect")
+    .data(dataset)
+    .enter()
+    .append("rect")
+    .attr("x", function(d) { return xScale(d.name); })
+    .attr("y", function(d) { return yScale(d.value); })
+    .attr("width", xScale.bandwidth())
+    .attr("height", function(d) { return height - padding - yScale(d.value); })
+    .attr("fill", "steelblue");
+}
+</script>
+</head>
+
+<body>
+<header id="head" >
+	<h1>SPARQLを用いた検索システム【テンプレート】</h1>
+</header>
+<div id="menu" class="container">
+<input type="button" id="send" value="検索の実行" style="margin-top:8px; "><br>
+</div>
+<!-- 検索条件設定の領域 -->
+<div id="query" class="container">
+<b>SPARQLクエリ</b><br>
+<textarea id="query_area" class="t_area" rows="10">
+SELECT ?p ?o WHERE{wd:Q7105556 ?p ?o.}      
+</textarea>
+<br>
+<b>クエリ実行結果の戻り値(JSON形式）</b><br>
+<textarea id="resjson_area"  class="t_area" rows="10" ></textarea>
+</div>
+
+<!-- 結果表示用の領域 -->
+<div id="result_div"  class="container" style="flex: 1;"></div>
+</body>
+</html>