moved zoom/pan to func

public/app.js

@@ -241,6 +241,26 @@ const createRadioButtonHanlders = ()=>{
 		})
 }
 
+const setUpZoomPan = ()=>{
+	const zoomCallback = (event) => {
+		d3.select('#points').attr("transform", event.transform);
+		d3.select('#x-axis')
+			.call(bottomAxis.scale(event.transform.rescaleX(xScale)));
+		d3.select('#y-axis')
+			.call(leftAxis.scale(event.transform.rescaleY(yScale)));
+
+		if(event.transform.k !== zoomScale){
+			zoomScale = event.transform.k
+			d3.selectAll('circle')
+				.attr('r', datum => (datum.color ? 10 : 5) / zoomScale);
+		}
+	}
+
+	const zoom = d3.zoom()
+		.on('zoom', zoomCallback);
+	d3.select('#container').call(zoom);
+}
+
 window.onload = async ()=>{
 	instances = await d3.json('/instances');
 	for(let instance of instances){
@@ -261,21 +281,5 @@ window.onload = async ()=>{
 	renderPoints();
 	createFormSubmissionHandler();
 	createRadioButtonHanlders();
-	const zoomCallback = (event) => {
+	setUpZoomPan();
-		d3.select('#points').attr("transform", event.transform);
-		d3.select('#x-axis')
-			.call(bottomAxis.scale(event.transform.rescaleX(xScale)));
-		d3.select('#y-axis')
-			.call(leftAxis.scale(event.transform.rescaleY(yScale)));
-
-		if(event.transform.k !== zoomScale){
-			zoomScale = event.transform.k
-			d3.selectAll('circle')
-				.attr('r', datum => (datum.color ? 10 : 5) / zoomScale);
-		}
-	}
-
-	const zoom = d3.zoom()
-		.on('zoom', zoomCallback);
-	d3.select('#container').call(zoom);
 }