diff --git a/web/static/js/plot.js b/web/static/js/plot.js
index de119d8..5c1e3a1 100644
--- a/web/static/js/plot.js
+++ b/web/static/js/plot.js
@@ -89,6 +89,13 @@ function makePlot(selector, data, metric, name, unit, startDate, endDate) {
     z.domain(data.map(function(c) { return c.id; }));
   }
 
+  // This tracks whether we're currently executing a zoom or brush handler in
+  // order to short-circuit brush events triggered by zooms and zoom events
+  // triggered by brushes. This used to be done via d3.event.sourceEvent.type,
+  // but since the global d3.event was removed the sourceEvent field is no use.
+  // See this issue for more info: https://github.com/d3/d3-zoom/issues/222
+  let zoombrush = 0;
+
   var brush = d3.brushX()
       .extent([[0, 0], [width, height2]])
       .on("brush end", brushed);
@@ -231,13 +238,14 @@ function makePlot(selector, data, metric, name, unit, startDate, endDate) {
     focus.select(".axis--y").call(yAxis);
   }
 
-  function brushed() {
-    if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") {
-      // Ignore brush-by-zoom
+  function brushed(event) {
+    // Ignore brush-by-zoom
+    if (zoombrush) {
       return;
     }
+    zoombrush = 1;
 
-    var s = d3.event.selection || x2.range();
+    var s = event.selection || x2.range();
     x.domain(s.map(x2.invert, x2));
     focus.selectAll(".line")
         .attr("d", function(d) { return line(d.values); });
@@ -247,15 +255,17 @@ function makePlot(selector, data, metric, name, unit, startDate, endDate) {
         d3.zoomIdentity.scale(width / (s[1] - s[0])).translate(-s[0], 0));
 
     updateYAxis();
+    zoombrush = 0;
   }
 
-  function zoomed() {
-    if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") {
-      // Ignore zoom-by-brush
+  function zoomed(event) {
+    // Ignore zoom-by-brush
+    if (zoombrush) {
       return;
     }
+    zoombrush = 1;
 
-    var t = d3.event.transform;
+    var t = event.transform;
     x.domain(t.rescaleX(x2).domain());
     focus.selectAll(".line")
         .attr("d", function(d) { return line(d.values); });
@@ -263,5 +273,6 @@ function makePlot(selector, data, metric, name, unit, startDate, endDate) {
     context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
 
     updateYAxis();
+    zoombrush = 0;
   }
 }
diff --git a/web/templates/index.html b/web/templates/index.html
index 05e4ef3..1570576 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -7,11 +7,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <link rel="stylesheet"
-      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
-      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
+      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
       crossorigin="anonymous">
     <link rel="stylesheet"
-      href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+      href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
 
     <link rel="stylesheet" href="/static/css/style.css">
 
@@ -161,7 +161,7 @@
                 </div>
 
                 <div class="col-md mb-3">
-                  <button type="submit" class="btn btn-sm">Go!</button>
+                  <button type="submit" class="btn btn-light btn-sm">Go!</button>
                 </div>
               </div>
             </form>
@@ -185,7 +185,7 @@
                 </div>
 
                 <div class="col-md mb-3">
-                  <button type="submit" class="btn btn-sm">Go!</button>
+                  <button type="submit" class="btn btn-light btn-sm">Go!</button>
                 </div>
               </div>
             </form>
@@ -223,7 +223,7 @@
                 </div>
 
                 <div class="col-md mb-3">
-                  <button type="submit" class="btn btn-sm">Go!</button>
+                  <button type="submit" class="btn btn-light btn-sm">Go!</button>
                 </div>
               </div>
             </form>
@@ -234,23 +234,20 @@
   </body>
 
   <script
-    src="https://code.jquery.com/jquery-3.3.1.min.js"
-    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+    src="https://code.jquery.com/jquery-3.7.0.min.js"
+    integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
     crossorigin="anonymous"></script>
   <script
-    src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
-    integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
+    src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"
+    integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0="
     crossorigin="anonymous"></script>
   <script
-    src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
-    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
+    src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
     crossorigin="anonymous"></script>
-  <script
-    src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
-    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
+  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"
     crossorigin="anonymous"></script>
-  <script src="https://d3js.org/d3.v4.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
 
   <script src="/static/js/legend.js"></script>
   <script src="/static/js/plot.js"></script>