diff --git a/app.css b/app.css
index d502df9..0fde6b4 100644
--- a/app.css
+++ b/app.css
@@ -4,7 +4,7 @@ circle {
transition: r 0.5s linear, fill 0.5s linear; /* add this transition to original code */
}
-svg {
+#container {
overflow:visible;
margin-bottom: 50px;
}
diff --git a/app.js b/app.js
index c5cc2fa..4f841a5 100644
--- a/app.js
+++ b/app.js
@@ -18,7 +18,7 @@ let runs = [
}
];
-d3.select('svg')
+d3.select('#container')
.style('width', WIDTH)
.style('height', HEIGHT);
@@ -98,14 +98,14 @@ const render = () => {
render();
const bottomAxis = d3.axisBottom(xScale); //pass the appropriate scale in as a parameter
-d3.select('svg')
+d3.select('#container')
.append('g') //put everything inside a group
.attr('id', 'x-axis') //add an id
.call(bottomAxis) //generate the axis within the group
.attr('transform', 'translate(0,'+HEIGHT+')'); //move it to the bottom
const leftAxis = d3.axisLeft(yScale);
-d3.select('svg')
+d3.select('#container')
.append('g')
.attr('id', 'y-axis') //add an id
.call(leftAxis); //no need to transform, since it's placed correctly initially
@@ -122,7 +122,7 @@ const createTable = () => {
createTable();
-d3.select('svg').on('click', (event) => {
+d3.select('#container').on('click', (event) => {
let x = event.offsetX;
let y = event.offsetY;
if(lastTransform !== null){
@@ -154,4 +154,4 @@ const zoomCallback = (event) => {
}
const zoom = d3.zoom()
.on('zoom', zoomCallback);
-d3.select('svg').call(zoom);
+d3.select('#container').call(zoom);
diff --git a/index.html b/index.html
index 6038357..0aca738 100644
--- a/index.html
+++ b/index.html
@@ -4,8 +4,10 @@
-