-
Notifications
You must be signed in to change notification settings - Fork 0
/
Task code.htm
126 lines (110 loc) · 5.06 KB
/
Task code.htm
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- the title contains information we will designate here but which only displays on hover -->
<title>html and JavaScript Assignment 1 Task</title>
<!-- Initialize a global Wikibase function (Wikibase is the software behind Wikidata. ) -->
<script src="https://cdn.rawgit.com/maxlath/wikidata-sdk/dist/dist/wikibase-sdk.min.js"></script>
<!-- Initialize a global wdk Wikidata object. This is a library of wikidata software development kit -->
<script src="https://cdn.rawgit.com/maxlath/wikidata-sdk/dist/dist/wikidata-sdk.min.js"></script>
<!-- a link directly to the best version of d3.js for visualisation of the particular code I borrowed-->
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<!-- the next section called "body" is what we do get to see in the browser window -->
<body>
<pre id="output"></pre>
<!-- This defines an object "output" -->
<!-- <pre id="outputRaw"></pre> // this commented out was used during debugging for displaying the JSON output-->
<!-- This is the beginning of a JavaScript section -->
<script>
/*The following query is written in SPARQL query language to WikiData;*/
/*proteins encoded by (P702) genes (instance of (P31) gene (Q7187)) found in taxon (P703) Mus musculus (Q83310)*/
/*in English: count proteins encoded by Mus musculus genes. */
/*Limit display of genes to those 25 with the highest protein counts.*/
query = `SELECT ?gene ?geneLabel ?count WITH {
SELECT ?gene (COUNT(DISTINCT ?protein) AS ?count) WHERE{
?protein wdt:P702 ?gene . ?gene wdt:P31 wd:Q7187 ;
wdt:P703 wd:Q83310 .
} GROUP BY ?gene ORDER BY DESC(?count) LIMIT 25
} AS %RESULTS WHERE {
INCLUDE %RESULTS
SERVICE wikibase:label { bd:serviceParam wikibase:language '[AUTO_LANGUAGE],en'. }
}
`
fetch(
wdk.sparqlQuery(query) /* "sparqlQuery" is a named function in js, so now it knows what to do with the query object above*/
).then( response => response.json() /* designate a JSON object for the query result;*/
).then( wdk.simplify.sparqlResults /*"then" is used in 3 different ways here, similar to pipes in R ;*/
).then(
function (response) {
DataJSON = response; /*designate two different objects, one a string the other a JSON for the query response*/
DataSTRING = JSON.stringify(response, undefined, 2);
dataset = {}; /* set up an empty object ready for the response data, pulled out of the JSON response object in line 48 */
dataset.children = DataJSON.map(function(item) { return { "Name": item.gene.label , "Count": item.count } });
/*The following creates an SVG format visualisation using javascript and the d3 library*/
var diameter = 650;
var color = d3.scaleOrdinal(d3.schemeCategory20);
var bubble = d3.pack(dataset) /*bubble visualisation*/
.size([diameter, diameter])
.padding(1.5);
var svg = d3.select("body")
.append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");
var nodes = d3.hierarchy(dataset)
.sum(function(d) { return d.Count; });
var node = svg.selectAll(".node")
.data(bubble(nodes).descendants())
.enter()
.filter(function(d){
return !d.children
})
.append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
node.append("title")
.text(function(d) {
return d.data.Name + ": " + d.data.Count;
});
node.append("circle")
.attr("r", function(d) {
return d.r;
})
.style("fill", function(d,i) {
return color(i);
});
node.append("text")
.attr("dy", ".6em")
.style("text-anchor", "middle")
.text(function(d) {
return d.data.Name.substring(0, d.r / 3); /*it has been designated above that "Name" refers to gene label*/
})
.attr("font-family", "sans-serif")
.attr("font-size", function(d){
return d.r/4;
})
.attr("fill", "black");
node.append("text")
.attr("dy", "1.8em")
.style("text-anchor", "middle")
.text(function(d) {
return d.data.Count;
})
.attr("font-family", "Gill Sans", "Gill Sans MT")
.attr("font-size", function(d){
return d.r/4;
})
.attr("fill", "black");
d3.select(self.frameElement)
.style("height", diameter + "px");
}
)
</script>
<!-- This is the end of a JavaScript section -->
<h2>Top 25 Mouse Genes Encoding the most Proteins (source: WikiData)</h2>
</body>
<!-- This is the end of the body section -->
</html> <!-- This is the end of the html code -->