From cf84adc96d671e11acea128c359d39328fad6830 Mon Sep 17 00:00:00 2001
From: ClaudiuIoanMaftei <claudiu.ioan.maftei@gmail.com>
Date: Thu, 28 Jan 2021 01:39:43 +0200
Subject: [PATCH] Added test query visualizer

---
 query visualizer/index.html | 24 ++++++++++++++++++++++++
 query visualizer/index.js   | 13 +++++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 query visualizer/index.html
 create mode 100644 query visualizer/index.js
diff --git a/query visualizer/index.html b/query visualizer/index.html
new file mode 100644
index 0000000..b1dba43
--- /dev/null
+++ b/query visualizer/index.html	
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>jsonld-vis example</title>
+        <script src="https://d3js.org/d3.v3.js"></script>
+        <script src="http://biohackathon.org/d3sparql/d3sparql.js"></script>
+        <script src="index.js"></script>
+
+    </head>
+     <body>
+        <form>
+            <input id="endpoint" value="http://dbpedia.org/sparql" type="text">
+                <textarea id="sparql">
+                PREFIX ...
+                SELECT ...
+                WHERE { ... }
+                </textarea>
+        </form>
+        <button onclick="exec()">Query</button>
+        <div id="result"></div>
+     </body>
+</html>
\ No newline at end of file
diff --git a/query visualizer/index.js b/query visualizer/index.js
new file mode 100644
index 0000000..f6e9ba2
--- /dev/null
+++ b/query visualizer/index.js	
@@ -0,0 +1,13 @@
+function exec() {
+    var endpoint = d3.select("#endpoint").property("value")
+    var sparql = d3.select("#sparql").property("value")
+    d3sparql.query(endpoint, sparql, render)
+}
+function render(json) {
+    // set options and call the d3sparql.xxxxx visualization methods in this library ...
+    var config = {
+        "margin": {"top": 10, "right": 10, "bottom": 10, "left": 10},
+        "selector": "#result"
+    }
+    d3sparql.forcegraph(json, config)
+}
\ No newline at end of file
