diff --git a/client-report/package-lock.json b/client-report/package-lock.json
index c5a534ce6..6ac83d7ff 100644
--- a/client-report/package-lock.json
+++ b/client-report/package-lock.json
@@ -10,7 +10,7 @@
       "dependencies": {
         "color": "~4.2.3",
         "d3": "~4.6.0",
-        "d3-contour": "~1.1.2",
+        "d3-contour": "^4.0.2",
         "d3-scale-chromatic": "~1.1.1",
         "hull.js": "~0.2.11",
         "jquery": "~3.6.3",
@@ -3752,17 +3752,26 @@
       "integrity": "sha512-qGW1ZBlfyzTTpTgvyunxk1QlxZ0Vob60Wb3yKKCCpese0djNa/5FBC0a6orxMV6eysVV0zdecRX84/Cw2GSl5w=="
     },
     "node_modules/d3-contour": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-1.1.2.tgz",
-      "integrity": "sha512-po2Gxab58NQMAaVLj1ruASkmHlB8JebFFhm2cDVs2JFjTv9AYZpRQEWMycLoP7JH530dBDl90HI30g5EnpTJfA==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
       "dependencies": {
-        "d3-array": "^1.1.1"
+        "d3-array": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
     "node_modules/d3-contour/node_modules/d3-array": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
-      "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
     },
     "node_modules/d3-dispatch": {
       "version": "1.0.2",
@@ -5928,6 +5937,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.1.tgz",
diff --git a/client-report/package.json b/client-report/package.json
index 4b50e8df7..14f4d8027 100644
--- a/client-report/package.json
+++ b/client-report/package.json
@@ -34,7 +34,7 @@
   "dependencies": {
     "color": "~4.2.3",
     "d3": "~4.6.0",
-    "d3-contour": "~1.1.2",
+    "d3-contour": "^4.0.2",
     "d3-scale-chromatic": "~1.1.1",
     "hull.js": "~0.2.11",
     "jquery": "~3.6.3",
diff --git a/client-report/src/components/participantsGraph/participantsGraph.js b/client-report/src/components/participantsGraph/participantsGraph.js
index e48c9f977..d799e7aa0 100644
--- a/client-report/src/components/participantsGraph/participantsGraph.js
+++ b/client-report/src/components/participantsGraph/participantsGraph.js
@@ -5,8 +5,9 @@ import _ from "lodash";
 import * as globals from "../globals";
 import graphUtil from "../../util/graphUtil";
 import Axes from "../graphAxes";
-import * as d3contour from "d3-contour";
-import * as d3chromatic from "d3-scale-chromatic";
+import { scaleSequential, geoPath } from 'd3'
+import { contourDensity } from "d3-contour";
+import { interpolateYlGnBu } from "d3-scale-chromatic";
 // import GroupLabels from "./groupLabels";
 import Comments from "../commentsGraph/comments";
 import Hull from "./hull";
@@ -16,10 +17,8 @@ const pointsPerSquarePixelMax = 0.0017; /* choose dynamically ? */
 const contourBandwidth = 20;
 const colorScaleDownFactor = 0.5; /* The colors are too dark. This helps. */
 
-const color = d3
-  .scaleSequential(d3chromatic.interpolateYlGnBu)
+const color = scaleSequential(interpolateYlGnBu)
   .domain([0, pointsPerSquarePixelMax]);
-const geoPath = d3.geoPath();
 
 const Contour = ({ contour }) => (
   <path fill={color(contour.value * colorScaleDownFactor)} d={geoPath(contour)} />
@@ -117,8 +116,7 @@ class ParticipantsGraph extends React.Component {
       hulls,
     } = graphUtil(this.props.comments, this.props.math, this.props.badTids);
 
-    const contours = d3contour
-      .contourDensity()
+    const contours = contourDensity()
       .x(function (d) {
         return d.x;
       })
@@ -377,14 +375,14 @@ class ParticipantsGraph extends React.Component {
           ) : null}
           {this.state.showGroupOutline
             ? hulls.map((hull) => {
-                let gid = hull.group[0].gid;
-                if (_.isNumber(this.props.showOnlyGroup)) {
-                  if (gid !== this.props.showOnlyGroup) {
-                    return "";
-                  }
+              let gid = hull.group[0].gid;
+              if (_.isNumber(this.props.showOnlyGroup)) {
+                if (gid !== this.props.showOnlyGroup) {
+                  return "";
                 }
-                return <Hull key={gid} hull={hull} />;
-              })
+              }
+              return <Hull key={gid} hull={hull} />;
+            })
             : null}
           {this.state.showParticipants ? (
             <Participants math={this.props.math} points={baseClustersScaled} />
@@ -405,25 +403,25 @@ class ParticipantsGraph extends React.Component {
           ) : null}
           {this.state.showGroupLabels
             ? this.props.math["group-clusters"].map((g, i) => {
-                // console.log('g',g )
-                return (
-                  <text
-                    key={i}
-                    transform={`translate(
+              // console.log('g',g )
+              return (
+                <text
+                  key={i}
+                  transform={`translate(
                         ${xx(g.center[0])},
                         ${yy(g.center[1])}
                       )`}
-                    style={{
-                      fill: "rgba(0,0,0,.5)",
-                      fontFamily: "Helvetica",
-                      fontWeight: 700,
-                      fontSize: 18,
-                    }}
-                  >
-                    {globals.groupLabels[g.id]}
-                  </text>
-                );
-              })
+                  style={{
+                    fill: "rgba(0,0,0,.5)",
+                    fontFamily: "Helvetica",
+                    fontWeight: 700,
+                    fontSize: 18,
+                  }}
+                >
+                  {globals.groupLabels[g.id]}
+                </text>
+              );
+            })
             : null}
           {this.state.consensusDivisionColorScale ? (
             <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">