fixed flashing

holmesjoli · Oct 26, 2024 · db3eecd · db3eecd
1 parent e22ea84
commit db3eecd
Showing 1 changed file with 38 additions and 32 deletions.
diff --git a/modules/visualization.js b/modules/visualization.js
@@ -34,41 +34,47 @@ export function sim(svg, data, speed, xScale, yScale, fillScale, rStart, rEnd) {
         .force('collision', d3.forceCollide().radius(rEnd).strength(1))
         .on('tick', ticked);
 
+
+    var u = svg
+        .selectAll('circle')
+        .data(data)
+        .join('circle')
+        .attr('class', function(d) {return d.data_type_code.replace(/\s/g, '')})
+        .attr('cx', function (d) { return d.x + xScale.bandwidth()/2; })
+        .attr('cy', function (d) { return d.y + yScale.bandwidth()/2; })
+        .attr("fill", "#ffffff")
+        .attr("stroke", function(d) {return fillScale(d.temp_bin)})
+        .attr('r', 0)
+        .attr('opacity', 0);
+
     function ticked() {
 
         var u = svg
-            .selectAll('circle')
-            .data(data)
-            .join('circle')
-            .attr('class', function(d) {return d.data_type_code.replace(/\s/g, '')})
-            .attr('cx', function (d) { return d.x + xScale.bandwidth()/2; })
-            .attr('cy', function (d) { return d.y + yScale.bandwidth()/2; })
-            .attr("fill", "#ffffff")
-            .attr("stroke", function(d) {return fillScale(d.temp_bin)})
-            .attr('r', 0)
-            .attr('opacity', 0);
-
-            u.on('mouseover', function (event, d) {
-
-                tooltip.style("visibility", "visible")
-                    .style("left", event.offsetX + "px")
-                    .style("top", event.offsetY + "px")
-                    .html(`Data collection type: ${d.data_type_code}`);
-
-                let type = d.data_type_code.replace(/\s/g, '');
-
-                let sameType = d3.selectAll("." + type)
-
-                u.attr("opacity", 0.25);
-                sameType.attr("opacity", 1).raise()
-
-                d3.select(this).attr("fill", fillScale(d.temp_bin))
-
-            }).on('mouseout', function (event, d) {
-                tooltip.style("visibility", "hidden")
-                u.attr("opacity", 1);
-                d3.select(this).attr("fill", "#FFFFFF")
-            });
+        .selectAll('circle')
+        .attr('cx', function (d) { return d.x + xScale.bandwidth()/2; })
+        .attr('cy', function (d) { return d.y + yScale.bandwidth()/2; });
+
+        u.on('mouseover', function (event, d) {
+
+            tooltip.style("visibility", "visible")
+                .style("left", event.offsetX + "px")
+                .style("top", event.offsetY + "px")
+                .html(`Data collection type: ${d.data_type_code}`);
+
+            let type = d.data_type_code.replace(/\s/g, '');
+
+            let sameType = d3.selectAll("." + type)
+
+            u.attr("opacity", 0.25);
+            sameType.attr("opacity", 1).raise()
+
+            d3.select(this).attr("fill", fillScale(d.temp_bin))
+
+        }).on('mouseout', function (event, d) {
+            tooltip.style("visibility", "hidden")
+            u.attr("opacity", 1);
+            d3.select(this).attr("fill", "#FFFFFF")
+        });
 
         u
             .transition()