Skip to content

Instantly share code, notes, and snippets.

@danielatkin

danielatkin/bubbleChart2014.csv

Last active May 10, 2016 21:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danielatkin/57ea2f55b79ae686dfc7 to your computer and use it in GitHub Desktop.
Save danielatkin/57ea2f55b79ae686dfc7 to your computer and use it in GitHub Desktop.
Download ZIP
Interactive Bubble Chart
Raw
bubbleChart2014.csv
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
Raw
bubbleChart2015.csv
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
Raw
bubbles.js
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("circle")
.data(data);
nodes.enter().append("circle")
//.attr("class", "node")
.attr("class", function(d) {
return d.ratingCategory;
})
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
})
.attr("r", 2)
.attr("id", function(d){return d.objectName;})
.on("mouseover", function(d) {
showPopover.call(this, d);
})
.on("mouseout", function(d) {
removePopovers();
})
;
var text = nodes.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("cx", function (d) { return d.x; })
.attr("cy", function (d) { return 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();
});
}
Raw
index.html
<!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>
Raw
style.css
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;
}
@pranshuagrawal
Copy link

Here how can I place some text inside the bubble?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment