-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
138 lines (134 loc) · 5.37 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>SPARQL Playground</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="SPARQL Playground is a browser-based SPARQL query execution environment that supports multiple input/output formats">
<meta name="keywords" content="RDF, SPARQL, Linked Data, Linked Open Data, Knowledge Graph, declarative, triplestore, Semantic Web">
<meta name="author" content="AtomGraph">
<meta name="twitter:title" content="SPARQL Playground">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@atomgraphhq">
<meta property="og:url" content="https://atomgraph.github.io/SPARQL-Playground/">
<meta property="og:title" content="SPARQL Playground">
<meta property="og:description" content="SPARQL Playground is a browser-based SPARQL query execution environment that supports multiple input/output formats">
<meta property="og:site_name" content="SPARQL Playground">
<script src="https://rdf.js.org/comunica-browser/versions/v2/engines/query-sparql/comunica-browser.js"></script>
<script src="sparql.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto">
<style type="text/css">
body { font-family: "Roboto", sans-serif; }
textarea, #results table { font-family: monospace; width: 100%; border-collapse: separate; empty-cells: hide; }
#results { overflow-x: auto; }
</style>
</head>
<body>
<nav class="navbar sticky-top navbar-light bg-light">
<div class="container-fluid">
<div class="col-6">
<a class="navbar-brand" href="#">SPARQL Playground</a>
</div>
<div class="col-6">
<button class="btn btn-primary" type="button" id="exec-query">Query</button>
</div>
</div>
</nav>
<form>
<div class="container-fluid">
<div class="row align-items-start">
<div class="col-6">
<fieldset>
<legend>RDF input
<select id="rdf-input-media-type">
<option value="text/turtle">Turtle</option>
<option value="application/trig">TriG</option>
<option value="application/n-triples">N-Triples</option>
<option value="application/n-quads">N-Quads</option>
<option value="application/ld+json">JSON-LD</option>
<option value="application/rdf+xml">RDF/XML</option>
</select>
</legend>
<textarea id="rdf-input" rows="15">BASE <http://example.org/>
PREFIX foaf: <http://xmlns.com/foaf/0.1/>
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
PREFIX schema: <http://schema.org/>
PREFIX dcterms: <http://purl.org/dc/terms/>
PREFIX wd: <http://www.wikidata.org/entity/>
<bob#me>
a foaf:Person ;
foaf:knows <alice#me> ;
schema:birthDate "1990-07-04"^^xsd:date ;
foaf:topic_interest wd:Q12418 .
wd:Q12418
dcterms:title "Mona Lisa" ;
dcterms:creator <http://dbpedia.org/resource/Leonardo_da_Vinci> .
<http://data.europeana.eu/item/04802/243FA8618938F4117025F17A8B813C5F9AA4D619>
dcterms:subject wd:Q12418 .</textarea>
</fieldset>
</div>
<div class="col-6">
<fieldset>
<legend>SPARQL query</legend>
<textarea id="query-string" rows="15">SELECT *
{
?s ?p ?o
}
LIMIT 100</textarea>
</fieldset>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row align-items-start">
<div class="col-6">
<fieldset>
<legend>Output
<select id="output-media-type">
<optgroup value="bindings" label="SPARQL results">
<option value="application/sparql-results+json">JSON</option>
<option value="application/sparql-results+xml">XML</option>
<!-- <option value="application/sparql-results+csv">CSV</option> -->
</optgroup>
<optgroup value="quads" label="RDF results">
<option value="text/turtle">Turtle</option>
<option value="application/trig">TriG</option>
<option value="application/n-triples">N-Triples</option>
<option value="application/n-quads">N-Quads</option>
<option value="application/ld+json">JSON-LD</option>
<!-- <option value="application/rdf+xml">RDF/XML</option> -->
</optgroup>
</select>
</legend>
<textarea id="output" rows="15"></textarea>
</fieldset>
</div>
<div class="col-6">
<fieldset>
<legend>Results</legend>
<div id="results"></div>
</fieldset>
</div>
</div>
</div>
</form>
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="https://github.com/AtomGraph" target="_blank">AtomGraph</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.w3.org/TR/rdf11-primer/" target="_blank">RDF 1.1 Primer</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.w3.org/TR/sparql11-overview/" target="_blank">SPARQL 1.1 Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://comunica.dev/" target="_blank">Comunica</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/AtomGraph/SPARQL-Playground" target="_blank">Code</a>
</li>
</ul>
</body>
</html>