forked from sanand0/beautiful-visualisations
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjslint.html
75 lines (66 loc) · 2.23 KB
/
jslint.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
<!DOCTYPE html><html>
<head>
<title>JSLint</title>
<link rel="stylesheet" href="common.css">
</head><body>
<h1>JSLint</h1>
<p>
Each bubble is a
<a href="jquery-1.3.2.jslint-errors.txt">JSLint error</a>.
The size shows the # by:
<a class="btn btn-small btn-primary" href="#">errors</a>
<a class="btn btn-small btn-primary" href="#">files</a>
<strong id="title"></strong>
</p>
<svg width="940" height="600">
<defs>
<radialGradient id="fill" cx="0.2" cy="0.2" r="1">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="black" />
</radialGradient>
<radialGradient id="pick" cx="0.2" cy="0.2" r="1">
<stop offset="0%" stop-color="blue" />
<stop offset="100%" stop-color="black" />
</radialGradient>
</defs>
</svg>
<script src="d3.v2.js"></script>
<script>
d3.csv('jslint.csv', function(data) {
var bubble = function(key) {
var layout = d3.layout.pack()
.sort(function(a,b) { return b[key] - a[key]; })
.size([940, 600])
.value(function(d) { return Math.pow(d[key], .5) })
.padding(.5);
return layout.nodes({children:data}).filter(function(d) { return !d.children; });
};
var nodes = d3.select('svg').selectAll("g.node");
var node = nodes.data(bubble('errors'))
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", "url('#fill')")
.append("title")
.text(function(d) { return d.name; });
d3.selectAll('.node circle').on('click', function() {
var circle = d3.select(d3.event.target),
fill = circle.style('fill');
d3.select('#title').text(circle.select('title').text());
circle.style('fill', fill.match(/fill/) ? "url('#pick')" : "url('#fill')");
});
d3.selectAll('.btn').on('click', function() {
var metric = d3.select(d3.event.target).text();
d3.select('svg').selectAll("g.node")
.data(bubble(metric))
.transition()
.duration(1000)
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.select('circle')
.attr("r", function(d) { return d.r; });
});
});
</script>
</body></html>