forked from danielatkin's block: Interactive Bubble Chart
Created
May 11, 2016 00:56
-
-
Save larsenmtl/2f96c17e9625b18f1685cb4cb2bf153e to your computer and use it in GitHub Desktop.
Interactive Bubble Chart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
objectName | reset | riskCategory1 | riskCategory2 | ratingCategory | ratingClassValue | |
---|---|---|---|---|---|---|
182 | All-Objects | Low | Low | ratingCategory1 | 1 | |
83 | All-Objects | Low | Low | ratingCategory1 | 1 | |
93 | All-Objects | Low | Low | ratingCategory1 | 1 | |
48 | All-Objects | Low | Low | ratingCategory1 | 1 | |
74 | All-Objects | Low | Low | ratingCategory1 | 1 | |
31 | All-Objects | Low | Low | ratingCategory1 | 1 | |
90 | All-Objects | Low | Low | ratingCategory1 | 1 | |
42 | All-Objects | Low | Low | ratingCategory1 | 1 | |
151 | All-Objects | Low | Low | ratingCategory1 | 1 | |
68 | All-Objects | Low | Low | ratingCategory1 | 1 | |
159 | All-Objects | Low | Low | ratingCategory1 | 1 | |
34 | All-Objects | Low | Low | ratingCategory1 | 1 | |
2 | All-Objects | Low | Low | ratingCategory1 | 1 | |
62 | All-Objects | Low | Low | ratingCategory1 | 1 | |
4 | All-Objects | Low | Low | ratingCategory1 | 1 | |
171 | All-Objects | Low | Low | ratingCategory1 | 1 | |
15 | All-Objects | Low | Low | ratingCategory1 | 1 | |
145 | All-Objects | Low | Low | ratingCategory1 | 1 | |
67 | All-Objects | Low | Low | ratingCategory1 | 1 | |
190 | All-Objects | Low | Low | ratingCategory1 | 1 | |
139 | All-Objects | Low | Low | ratingCategory1 | 1 | |
146 | All-Objects | Low | Low | ratingCategory1 | 1 | |
60 | All-Objects | Low | Low | ratingCategory1 | 1 | |
170 | All-Objects | Low | Low | ratingCategory1 | 1 | |
72 | All-Objects | Low | Low | ratingCategory1 | 1 | |
52 | All-Objects | Low | Low | ratingCategory1 | 1 | |
168 | All-Objects | Low | Low | ratingCategory1 | 1 | |
173 | All-Objects | Low | Low | ratingCategory1 | 1 | |
7 | All-Objects | Low | Low | ratingCategory1 | 1 | |
192 | All-Objects | Low | Low | ratingCategory1 | 1 | |
8 | All-Objects | Low | Low | ratingCategory1 | 1 | |
6 | All-Objects | Low | Low | ratingCategory1 | 1 | |
188 | All-Objects | Low | Low | ratingCategory1 | 1 | |
9 | All-Objects | Low | Low | ratingCategory1 | 1 | |
12 | All-Objects | Low | Low | ratingCategory1 | 1 | |
117 | All-Objects | Low | Low | ratingCategory1 | 1 | |
59 | All-Objects | Low | Low | ratingCategory1 | 1 | |
94 | All-Objects | Low | Low | ratingCategory1 | 1 | |
13 | All-Objects | Low | Low | ratingCategory1 | 1 | |
14 | All-Objects | Low | Low | ratingCategory1 | 1 | |
187 | All-Objects | Low | Low | ratingCategory1 | 1 | |
16 | All-Objects | Low | Low | ratingCategory1 | 1 | |
10 | All-Objects | Low | Low | ratingCategory1 | 1 | |
154 | All-Objects | Low | Low | ratingCategory1 | 1 | |
19 | All-Objects | Low | Low | ratingCategory1 | 1 | |
21 | All-Objects | Low | Low | ratingCategory1 | 1 | |
174 | All-Objects | Low | Low | ratingCategory1 | 1 | |
22 | All-Objects | Low | Low | ratingCategory1 | 1 | |
104 | All-Objects | Low | Low | ratingCategory1 | 1 | |
23 | All-Objects | Low | Low | ratingCategory1 | 1 | |
126 | All-Objects | Low | Low | ratingCategory1 | 1 | |
24 | All-Objects | Low | Low | ratingCategory1 | 1 | |
152 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
25 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
172 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
164 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
109 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
137 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
5 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
26 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
200 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
156 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
138 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
55 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
163 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
18 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
71 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
11 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
76 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
101 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
27 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
39 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
28 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
37 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
81 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
125 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
3 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
142 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
40 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
79 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
134 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
49 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
99 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
119 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
44 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
136 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
29 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
32 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
36 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
38 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
183 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
70 | All-Objects | Moderate | Low | ratingCategory2 | 2 | |
178 | All-Objects | Moderate | Low | ratingCategory2 | 2 | |
1 | All-Objects | Moderate | Low | ratingCategory2 | 2 | |
80 | All-Objects | Moderate | Low | ratingCategory2 | 2 | |
35 | All-Objects | Moderate | Low | ratingCategory2 | 2 | |
123 | All-Objects | Moderate | Low | ratingCategory2 | 2 | |
179 | All-Objects | Moderate | Low | ratingCategory2 | 2 | |
69 | All-Objects | Moderate | Low | ratingCategory2 | 2 | |
20 | All-Objects | Moderate | Low | ratingCategory2 | 2 | |
43 | All-Objects | Moderate | Low | ratingCategory2 | 2 | |
54 | All-Objects | High | Low | ratingCategory3 | 3 | |
45 | All-Objects | High | Low | ratingCategory3 | 3 | |
131 | All-Objects | High | Low | ratingCategory3 | 3 | |
181 | All-Objects | High | Low | ratingCategory3 | 3 | |
17 | All-Objects | High | Low | ratingCategory3 | 3 | |
41 | All-Objects | High | Low | ratingCategory3 | 3 | |
195 | All-Objects | High | Low | ratingCategory3 | 3 | |
92 | All-Objects | High | Low | ratingCategory3 | 3 | |
100 | All-Objects | High | Low | ratingCategory3 | 3 | |
108 | All-Objects | High | Low | ratingCategory3 | 3 | |
33 | All-Objects | High | Low | ratingCategory3 | 3 | |
53 | All-Objects | High | Low | ratingCategory3 | 3 | |
30 | All-Objects | High | Low | ratingCategory3 | 3 | |
78 | All-Objects | High | Low | ratingCategory3 | 3 | |
148 | All-Objects | Low | High | ratingCategory3 | 3 | |
157 | All-Objects | Low | High | ratingCategory3 | 3 | |
63 | All-Objects | Low | High | ratingCategory3 | 3 | |
198 | All-Objects | Low | High | ratingCategory3 | 3 | |
155 | All-Objects | Moderate | Moderate | ratingCategory4 | 4 | |
160 | All-Objects | Moderate | Moderate | ratingCategory4 | 4 | |
115 | All-Objects | Moderate | Moderate | ratingCategory4 | 4 | |
47 | All-Objects | Moderate | Moderate | ratingCategory4 | 4 | |
128 | All-Objects | Moderate | High | ratingCategory5 | 5 | |
46 | All-Objects | High | Moderate | ratingCategory5 | 5 | |
50 | All-Objects | Moderate | High | ratingCategory5 | 5 | |
82 | All-Objects | Moderate | High | ratingCategory5 | 5 | |
122 | All-Objects | Moderate | High | ratingCategory5 | 5 | |
103 | All-Objects | High | High | ratingCategory6 | 6 | |
129 | All-Objects | High | High | ratingCategory6 | 6 | |
51 | All-Objects | High | High | ratingCategory6 | 6 | |
87 | All-Objects | High | High | ratingCategory6 | 6 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
objectName | reset | riskCategory1 | riskCategory2 | ratingCategory | ratingClassValue | |
---|---|---|---|---|---|---|
182 | All-Objects | Low | Low | ratingCategory1 | 1 | |
83 | All-Objects | Low | Low | ratingCategory1 | 1 | |
93 | All-Objects | Low | Low | ratingCategory1 | 1 | |
48 | All-Objects | Low | Low | ratingCategory1 | 1 | |
74 | All-Objects | Low | Low | ratingCategory1 | 1 | |
31 | All-Objects | Low | Low | ratingCategory1 | 1 | |
90 | All-Objects | Low | Low | ratingCategory1 | 1 | |
42 | All-Objects | Low | Low | ratingCategory1 | 1 | |
151 | All-Objects | Low | Low | ratingCategory1 | 1 | |
68 | All-Objects | Low | Low | ratingCategory1 | 1 | |
159 | All-Objects | Low | Low | ratingCategory1 | 1 | |
34 | All-Objects | Low | Low | ratingCategory1 | 1 | |
2 | All-Objects | Low | Low | ratingCategory1 | 1 | |
62 | All-Objects | Low | Low | ratingCategory1 | 1 | |
4 | All-Objects | Low | Low | ratingCategory1 | 1 | |
171 | All-Objects | Low | Low | ratingCategory1 | 1 | |
15 | All-Objects | Low | Low | ratingCategory1 | 1 | |
145 | All-Objects | Low | Low | ratingCategory1 | 1 | |
67 | All-Objects | Low | Low | ratingCategory1 | 1 | |
190 | All-Objects | Low | Low | ratingCategory1 | 1 | |
139 | All-Objects | Low | Low | ratingCategory1 | 1 | |
146 | All-Objects | Low | Low | ratingCategory1 | 1 | |
60 | All-Objects | Low | Low | ratingCategory1 | 1 | |
170 | All-Objects | Low | Low | ratingCategory1 | 1 | |
72 | All-Objects | Low | Low | ratingCategory1 | 1 | |
52 | All-Objects | Low | Low | ratingCategory1 | 1 | |
168 | All-Objects | Low | Low | ratingCategory1 | 1 | |
173 | All-Objects | Low | Low | ratingCategory1 | 1 | |
7 | All-Objects | Low | Low | ratingCategory1 | 1 | |
192 | All-Objects | Low | Low | ratingCategory1 | 1 | |
8 | All-Objects | Low | Low | ratingCategory1 | 1 | |
6 | All-Objects | Low | Low | ratingCategory1 | 1 | |
188 | All-Objects | Low | Low | ratingCategory1 | 1 | |
9 | All-Objects | Low | Low | ratingCategory1 | 1 | |
12 | All-Objects | Low | Low | ratingCategory1 | 1 | |
117 | All-Objects | Low | Low | ratingCategory1 | 1 | |
59 | All-Objects | Low | Low | ratingCategory1 | 1 | |
94 | All-Objects | Low | Low | ratingCategory1 | 1 | |
13 | All-Objects | Low | Low | ratingCategory1 | 1 | |
14 | All-Objects | Low | Low | ratingCategory1 | 1 | |
187 | All-Objects | Low | Low | ratingCategory1 | 1 | |
16 | All-Objects | Low | Low | ratingCategory1 | 1 | |
10 | All-Objects | Low | Low | ratingCategory1 | 1 | |
154 | All-Objects | Low | Low | ratingCategory1 | 1 | |
19 | All-Objects | Low | Low | ratingCategory1 | 1 | |
21 | All-Objects | Low | Low | ratingCategory1 | 1 | |
174 | All-Objects | Low | Low | ratingCategory1 | 1 | |
22 | All-Objects | Low | Low | ratingCategory1 | 1 | |
104 | All-Objects | Low | Low | ratingCategory1 | 1 | |
23 | All-Objects | Low | Low | ratingCategory1 | 1 | |
126 | All-Objects | Low | Low | ratingCategory1 | 1 | |
24 | All-Objects | Low | Low | ratingCategory1 | 1 | |
152 | All-Objects | Low | Low | ratingCategory1 | 1 | |
25 | All-Objects | Low | Low | ratingCategory1 | 1 | |
172 | All-Objects | Low | Low | ratingCategory1 | 1 | |
164 | All-Objects | Low | Low | ratingCategory1 | 1 | |
109 | All-Objects | Low | Low | ratingCategory1 | 1 | |
137 | All-Objects | Low | Low | ratingCategory1 | 1 | |
5 | All-Objects | Low | Low | ratingCategory1 | 1 | |
26 | All-Objects | Low | Low | ratingCategory1 | 1 | |
200 | All-Objects | Low | Low | ratingCategory1 | 1 | |
156 | All-Objects | Low | Low | ratingCategory1 | 1 | |
138 | All-Objects | Low | Low | ratingCategory1 | 1 | |
55 | All-Objects | Low | Low | ratingCategory1 | 1 | |
163 | All-Objects | Low | Low | ratingCategory1 | 1 | |
18 | All-Objects | Low | Low | ratingCategory1 | 1 | |
71 | All-Objects | Low | Low | ratingCategory1 | 1 | |
11 | All-Objects | Low | Low | ratingCategory1 | 1 | |
76 | All-Objects | Low | Low | ratingCategory1 | 1 | |
101 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
27 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
39 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
28 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
37 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
81 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
125 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
3 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
142 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
40 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
79 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
134 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
49 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
99 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
119 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
44 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
136 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
29 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
32 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
36 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
38 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
183 | All-Objects | Low | Moderate | ratingCategory2 | 2 | |
70 | All-Objects | Moderate | Low | ratingCategory2 | 2 | |
178 | All-Objects | Moderate | Low | ratingCategory2 | 2 | |
1 | All-Objects | Moderate | Low | ratingCategory2 | 2 | |
80 | All-Objects | Moderate | Low | ratingCategory2 | 2 | |
35 | All-Objects | Moderate | Low | ratingCategory2 | 2 | |
123 | All-Objects | Moderate | Low | ratingCategory2 | 2 | |
179 | All-Objects | Moderate | Low | ratingCategory2 | 2 | |
69 | All-Objects | Moderate | Low | ratingCategory2 | 2 | |
20 | All-Objects | Moderate | Low | ratingCategory2 | 2 | |
43 | All-Objects | Moderate | Low | ratingCategory2 | 2 | |
54 | All-Objects | Moderate | Low | ratingCategory2 | 2 | |
45 | All-Objects | Moderate | Low | ratingCategory2 | 2 | |
131 | All-Objects | Moderate | Low | ratingCategory2 | 2 | |
181 | All-Objects | Moderate | Low | ratingCategory2 | 2 | |
17 | All-Objects | Moderate | Low | ratingCategory2 | 2 | |
41 | All-Objects | High | Low | ratingCategory3 | 3 | |
195 | All-Objects | High | Low | ratingCategory3 | 3 | |
92 | All-Objects | High | Low | ratingCategory3 | 3 | |
100 | All-Objects | High | Low | ratingCategory3 | 3 | |
108 | All-Objects | High | Low | ratingCategory3 | 3 | |
33 | All-Objects | High | Low | ratingCategory3 | 3 | |
53 | All-Objects | High | Low | ratingCategory3 | 3 | |
30 | All-Objects | High | Low | ratingCategory3 | 3 | |
78 | All-Objects | High | Low | ratingCategory3 | 3 | |
148 | All-Objects | Low | High | ratingCategory3 | 3 | |
157 | All-Objects | Low | High | ratingCategory3 | 3 | |
63 | All-Objects | Low | High | ratingCategory3 | 3 | |
198 | All-Objects | Low | High | ratingCategory3 | 3 | |
155 | All-Objects | Moderate | Moderate | ratingCategory4 | 4 | |
160 | All-Objects | Moderate | Moderate | ratingCategory4 | 4 | |
115 | All-Objects | Moderate | Moderate | ratingCategory4 | 4 | |
47 | All-Objects | Moderate | Moderate | ratingCategory4 | 4 | |
128 | All-Objects | Moderate | High | ratingCategory5 | 5 | |
46 | All-Objects | High | Moderate | ratingCategory5 | 5 | |
50 | All-Objects | High | High | ratingCategory6 | 6 | |
82 | All-Objects | High | High | ratingCategory6 | 6 | |
122 | All-Objects | High | High | ratingCategory6 | 6 | |
103 | All-Objects | High | High | ratingCategory6 | 6 | |
129 | All-Objects | High | High | ratingCategory6 | 6 | |
51 | All-Objects | High | High | ratingCategory6 | 6 | |
87 | All-Objects | High | High | ratingCategory6 | 6 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var width = 960, | |
height = 630; | |
d3.select("#bubbleChart").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
.attr("id", "primarySVG"); | |
changeYear('2015'); | |
$("label.cycleBtn").click(function() { | |
changeYear(this.id); | |
}); | |
function changeYear(year){ | |
var CSV2015 = 'bubbleChart2015.csv'; | |
var CSV2014 = 'bubbleChart2014.csv'; | |
if (year === '2015'){ | |
var dataSource = CSV2015; | |
} else { | |
var dataSource = CSV2014; | |
} | |
d3.csv(dataSource, function(error, data) { | |
data.sort(function(a,b) {return b.ratingClassValue - a.ratingClassValue;}); | |
var svg = d3.select("#primarySVG"); | |
//set bubble padding | |
var padding = 4; | |
for (var j = 0; j < data.length; j++) { | |
data[j].radius = 10; | |
data[j].x = Math.random() * width; | |
data[j].y = Math.random() * height; | |
} | |
var maxRadius = d3.max(_.pluck(data, 'radius')); | |
var getCenters = function(vname, size) { | |
var centers, map; | |
centers = _.uniq(_.pluck(data,vname)).map(function(d) { | |
return { | |
name: d, | |
value: 1 | |
}; | |
}); | |
map = d3.layout.pack().size(size); | |
map.nodes({children: centers}); | |
return centers; | |
}; | |
var nodes = svg.selectAll("g") | |
.data(data); | |
var g = nodes.enter().append("g") | |
g.append("circle") | |
//.attr("class", "node") | |
.attr("class", function(d) { | |
return d.ratingCategory; | |
}) | |
.attr("r", 2) | |
.attr("id", function(d){return d.objectName;}) | |
.on("mouseover", function(d) { | |
showPopover.call(this, d); | |
}) | |
.on("mouseout", function(d) { | |
removePopovers(); | |
}); | |
g.append("text") | |
.attr("dx",12) | |
.attr("dy",".35em") | |
.text(function(d){ | |
return d.objectName; | |
}); | |
nodes.transition() | |
.duration(500) | |
.attr("r", function(d) { | |
return d.radius;}) | |
; | |
var force = d3.layout.force(); | |
draw('reset'); | |
$("label.ratingBtn").click(function() { | |
draw(this.id); | |
}); | |
function draw(varname) { | |
d3.selectAll("circle").attr("r",10); | |
var centers = getCenters(varname, [width, height]); | |
force.on("tick", tick(centers, varname)); | |
labels(centers); | |
nodes.attr("class", function(d) { | |
return d[varname]; | |
}); | |
force.start(); | |
makeClickable(); | |
} | |
function tick (centers, varname) { | |
var foci = {}; | |
for (var i = 0; i < centers.length; i++) { | |
foci[centers[i].name] = centers[i]; | |
} | |
return function (e) { | |
for (var i = 0; i < data.length; i++) { | |
var o = data[i]; | |
var f = foci[o[varname]]; | |
o.y += (f.y - o.y) * e.alpha; | |
o.x += (f.x - o.x) * e.alpha; | |
} | |
nodes.each(collide(.2)) | |
.attr("transform", function(d){ | |
return "translate(" + d.x + "," + d.y + ")"; | |
}); | |
} | |
} | |
function labels(centers) { | |
svg.selectAll(".label").remove(); | |
svg.selectAll(".label") | |
.data(centers).enter().append("text") | |
.attr("class", "label") | |
.text(function(d) { | |
return d.name; | |
}) | |
.attr("transform", function (d) { | |
return "translate(" + (d.x - ((d.name.length)*3)) + ", " + (d.y + 15 - d.r) + ")"; | |
}); | |
} | |
function removePopovers() { | |
$('.popover').each(function() { | |
$(this).remove(); | |
}); | |
} | |
function showPopover(d) { | |
$(this).popover({ | |
placement: 'auto top', | |
container: 'body', | |
trigger: 'manual', | |
html: true, | |
content: function() { | |
return "Assessment ID: " + d.objectName + "</br>Risk Category 1: " + d.riskCategory1 + "</br>Risk Category 2: " + d.riskCategory2; | |
} | |
}); | |
$(this).popover('show'); | |
} | |
function collide(alpha) { | |
var quadtree = d3.geom.quadtree(data); | |
return function(d) { | |
var r = d.radius + maxRadius + padding, | |
nx1 = d.x - r, | |
nx2 = d.x + r, | |
ny1 = d.y - r, | |
ny2 = d.y + r; | |
quadtree.visit(function(quad, x1, y1, x2, y2) { | |
if (quad.point && (quad.point !== d)) { | |
var x = d.x - quad.point.x, | |
y = d.y - quad.point.y, | |
l = Math.sqrt(x * x + y * y), | |
r = d.radius + quad.point.radius + padding; | |
if (l < r) { | |
l = (l - r) / l * alpha; | |
d.x -= x *= l; | |
d.y -= y *= l; | |
quad.point.x += x; | |
quad.point.y += y; | |
} | |
} | |
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1; | |
}); | |
}; | |
} | |
var lowModGrad = svg.append("svg:defs") | |
.append("svg:linearGradient") | |
.attr("id", "lowModGrad") | |
.attr("x1", "0%") | |
.attr("y1", "0%") | |
.attr("x2", "100%") | |
.attr("y2", "100%") | |
.attr("spreadMethod", "pad"); | |
// Define the gradient colors | |
lowModGrad.append("svg:stop") | |
.attr("offset", "0%") | |
.attr("stop-color", "#88DB54") | |
.attr("stop-opacity", 1); | |
lowModGrad.append("svg:stop") | |
.attr("offset", "100%") | |
.attr("stop-color", "#FE9A2E") | |
.attr("stop-opacity", 1); | |
var modHighGrad = svg.append("svg:defs") | |
.append("svg:linearGradient") | |
.attr("id", "modHighGrad") | |
.attr("x1", "0%") | |
.attr("y1", "0%") | |
.attr("x2", "100%") | |
.attr("y2", "100%") | |
.attr("spreadMethod", "pad"); | |
// Define the gradient colors | |
modHighGrad.append("svg:stop") | |
.attr("offset", "0%") | |
.attr("stop-color", "#FE9A2E") | |
.attr("stop-opacity", 1); | |
modHighGrad.append("svg:stop") | |
.attr("offset", "100%") | |
.attr("stop-color", "#FE2E2E") | |
.attr("stop-opacity", 1); | |
var lowHighGrad = svg.append("svg:defs") | |
.append("svg:linearGradient") | |
.attr("id", "lowHighGrad") | |
.attr("x1", "0%") | |
.attr("y1", "0%") | |
.attr("x2", "100%") | |
.attr("y2", "100%") | |
.attr("spreadMethod", "pad"); | |
// Define the gradient colors | |
lowHighGrad.append("svg:stop") | |
.attr("offset", "0%") | |
.attr("stop-color", "#88DB54") | |
.attr("stop-opacity", 1); | |
lowHighGrad.append("svg:stop") | |
.attr("offset", "100%") | |
.attr("stop-color", "#FE2E2E") | |
.attr("stop-opacity", 1); | |
function makeClickable () { | |
$("circle").click(function() { | |
console.log(this.id); | |
}); | |
var nest = d3.nest() | |
.key(function(d){return d.objectName;}) | |
.entries(data); | |
} | |
nodes.exit().remove(); | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Interactive Bubble Chart</title> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> | |
<link rel="stylesheet" href="style.css"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> | |
</head> | |
<body> | |
<div id="container"> | |
<div id="header"> | |
<h1>Interactive bubble chart</h1> | |
</div> | |
<div id="headerBand"> | |
</br> | |
</div> | |
<div id="charts"> | |
<div id="bubbleContainer"> | |
<h2>Risk Assessment Ratings (Dummy Data)</h2> | |
<div id="overallRatings" class="btn-group btn-info top-btn" data-toggle="buttons"> | |
<label class="btn active ratingBtn" id="reset"> | |
<input type="radio" name="options">Reset</label> | |
<label class="btn ratingBtn" id="riskCategory1"> | |
<input type="radio" name="options">Risk Category 1</label> | |
<label class="btn ratingBtn" id="riskCategory2"> | |
<input type="radio" name="options">Risk Category 2</label> | |
<label class="btn ratingBtn" id="ratingCategory"> | |
<input type="radio" name="options">Both Categories</label> | |
</div> | |
<div id="RiskCycle" class="btn-group btn-default top-btn" data-toggle="buttons"> | |
<label class="btn cycleBtn" id="2014"> | |
<input type="radio" name="options">2014</label> | |
<label class="btn active cycleBtn" id="2015"> | |
<input type="radio" name="options">2015</label> | |
</div> | |
<div id="bubbleChart"> | |
</div> | |
</div> | |
</div> | |
<script src="bubbles.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
background-color: white; | |
margin:0 auto; | |
} | |
h1{ | |
font-family:helvetica,arial,sans-serif; | |
font-size:22; | |
font-style:bold; | |
color:#34495e; | |
} | |
h2{ | |
font-family:helvetica,arial,sans-serif; | |
font-size:16; | |
font-style:bold; | |
color:#00A6AA; | |
} | |
h3{ | |
font-family:arial; | |
font-size:13; | |
font-style:bold; | |
color:#004855; | |
} | |
h4{ | |
font-family:arial; | |
font-size:11; | |
font-style:bold; | |
color:#00A6AA; | |
} | |
p{ | |
font-family:arial; | |
font-size:22; | |
font-style:none; | |
color:#000000; | |
} | |
#container{ | |
text-align:center; | |
width: 100%; | |
} | |
#header{ | |
text-align:center; | |
width: 1366px; | |
min-height:100px; | |
height:auto; | |
padding-top:20px; | |
margin:0 auto; | |
} | |
#headerBand{ | |
background-color:#1abc9c; | |
min-height:60px; | |
height:auto; | |
} | |
#bubbleContainer{ | |
width: 960x; | |
height: 850px; | |
border: 1px solid #BFD1D4; | |
border-radius: 10px; | |
margin: 2px; | |
text-align: center; | |
} | |
#bubbleChart{ | |
} | |
#providerSection{ | |
text-align:center; | |
width: 960px; | |
} | |
circle { | |
fill:#3498DB; | |
stroke: black; | |
stroke-width:2px; | |
opacity: .8; | |
} | |
circle:hover { | |
stroke:#22A7F0; | |
} | |
.label { | |
fill: black; | |
font-size: 16px; | |
} | |
.ratingCategory1{ | |
fill:#88DB54; | |
} | |
.ratingCategory2{ | |
fill: url(#lowModGrad); | |
} | |
.ratingCategory3{ | |
fill:#FE9A2E; | |
} | |
.ratingCategory4{ | |
fill: url(#lowHighGrad); | |
} | |
.ratingCategory5{ | |
fill: url(#modHighGrad); | |
} | |
.ratingCategory6{ | |
fill:#FF0000; | |
} | |
.Low{ | |
fill:#88DB54; | |
} | |
.Moderate{ | |
fill:#FE9A2E; | |
} | |
.High{ | |
fill:#FF0000; | |
} | |
.Suspended{ | |
fill:#A4A4A4; | |
} | |
.All-Objects{ | |
fill:#3498db; | |
} | |
.selected { | |
fill:#3498DB; | |
stroke: black; | |
stroke-width: 2px; | |
} | |
.yAxis path, | |
.yAxis line { | |
fill: none; | |
stroke: none; | |
} | |
.xAxis path, | |
.xAxis line { | |
fill: none; | |
stroke: #7f8c8d; | |
} | |
.yAxis text { | |
font-family: sans-serif; | |
font-size: 15px; | |
color: #ecf0f1; | |
} | |
.xAxis text { | |
font-family: arial; | |
font-size: 11px; | |
color: #ecf0f1; | |
} | |
.notes { | |
text-align:left; | |
padding-top: 10px; | |
} | |
.imageContainer { | |
text-align: center; | |
padding-top: 10px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment