/
lod.html
86 lines (75 loc) · 2.31 KB
/
lod.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
<html>
<head>
<title>Force-Directed Layout</title>
<script type="text/javascript" src="protovis-d3.2.js"></script>
<script type="text/javascript" src="lod.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript+protovis">
function nodeColor(node) {
if (node.ratings_count == 0) return 'white';
return pv.color('hsl('
+ parseInt(node.ratings_average_normalized * 100) + ',100%,'
+ parseInt(100 - node.ratings_count_normalized * 60) + '%)');
}
var maxRatingCount = 0;
for (var i = 0; i < lod.nodes.length; i++) {
if (lod.nodes[i].ratings_count > maxRatingCount) {
maxRatingCount = lod.nodes[i].ratings_count;
}
}
for (var i = 0; i < lod.nodes.length; i++) {
lod.nodes[i].ratings_count_normalized = lod.nodes[i].ratings_count / maxRatingCount;
if (lod.nodes[i].ratings_count > 0) {
lod.nodes[i].ratings_average_normalized = (lod.nodes[i].ratings_average - 1.0) / 4.0;
}
}
var maxCount = 1;
for (var i = 0; i < lod.links.length; i++) {
if (lod.links[i].count > maxCount) {
maxCount = lod.links[i].count;
}
}
for (var i = 0; i < lod.links.length; i++) {
lod.links[i].value = Math.log(lod.links[i].count) / Math.log(maxCount);
}
var w = document.body.clientWidth,
h = document.body.clientHeight,
colors = pv.Colors.category19();
var vis = new pv.Panel()
.width(w)
.height(h)
.fillStyle("white")
.event("mousedown", pv.Behavior.pan())
.event("mousewheel", pv.Behavior.zoom());
var force = vis.add(pv.Layout.Force)
.nodes(lod.nodes)
.links(lod.links)
.bound(true)
.chargeConstant(-50)
.springDamping(0.1)
.springLength(20)
.springConstant(0.01);
force.link.add(pv.Line);
force.node.add(pv.Dot)
.size(function(d) (Math.pow(d.triples, 1/3) / 3) * Math.pow(this.scale, -1.5))
.fillStyle(function(d) nodeColor(d))
.strokeStyle(function() this.fillStyle().darker())
.lineWidth(1)
.title(function(d) d.nodeTitle)
.event("mousedown", pv.Behavior.drag())
.event("drag", force)
.event("click", function(d) window.open(d.ckanUrl));
force.label.add(pv.Label)
.font('9px sans-serif')
.textStyle('#666')
.visible(function(d) d.triples > 5000000);
vis.render();
</script>
</body>
</html>