resize circles on zoom

public/app.js

@@ -1,4 +1,4 @@
-// TODO - zoom/pan on graph
+// TODO - styling
 const WIDTH = 800;
 const HEIGHT = 600;
 const parseTime = d3.timeParse("%B %e, %Y");
@@ -11,6 +11,7 @@ let metros = []
 let yAxis = 'outcomes'
 let bottomAxis;
 let leftAxis;
+let zoomScale = 1
 
 const randomColor = ()=>{
 	const red = Math.floor(Math.random()*128) + 64;
@@ -75,7 +76,7 @@ const renderPoints = () => {
 		})
 		.attr('cx', (datum, index) => xScale(parseTime(datum.graduation_date)) )
 		.attr('fill', datum => datum.color? datum.color : 'black')
-		.attr('r', datum => datum.color? 10 : 5)
+		.attr('r', datum => (datum.color? 10 : 5)/zoomScale)
 		.style('display', (datum)=>{
 			const instanceMetro = datum.course.split('-')[0]
 			const instanceCourse = datum.course.split('-')[1]
@@ -267,6 +268,12 @@ window.onload = async ()=>{
 			.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()