From d2540495fa6163050c1a0479ff650e4185f6a0ba Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@gmail.com>
Date: Thu, 28 Sep 2023 19:15:25 -0400
Subject: [PATCH] moved zoom/pan to func

---
 public/app.js | 38 +++++++++++++++++++++-----------------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/public/app.js b/public/app.js
index 527491d..649e33b 100644
--- a/public/app.js
+++ b/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) => {
-		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);
+	setUpZoomPan();
 }