Moving from a tabbed area to switching on account dropdown

2026-04-11 21:01:06 -04:00 · 2024-06-13 10:29:59 -04:00
parent 468f6c9fc6
commit 0f738c8cb7
7 changed files with 660 additions and 183 deletions
--- a/app/assets/javascripts/dashboardVisualization.js
+++ b/app/assets/javascripts/dashboardVisualization.js
@@ -1,5 +1,4 @@
- document.addEventListener('DOMContentLoaded', function() {
-    // Define constants
+(function (window) {
    const COLORS = {
        delivered: '#0076d6',
        failed: '#fa9441',
@@ -10,86 +9,106 @@
    const FONT_WEIGHT = 'bold';
    const MAX_Y = 120;

-    const tabButtons = document.querySelectorAll('.tablinks');
-    let monthlyChartInitialized = false;
-    let yearlyChartInitialized = false;
+    // Function to create a stacked bar chart with animation using D3.js
+    function createChart(containerId, labels, deliveredData, failedData) {
+        const container = d3.select(containerId);
+        container.selectAll('*').remove(); // Clear any existing content

+        const margin = { top: 20, right: 30, bottom: 40, left: 40 };
+        const width = container.node().clientWidth - margin.left - margin.right;
+        const height = 400 - margin.top - margin.bottom;

-    // Function to create a chart
-    function createChart(ctx, labels, deliveredData, failedData) {
-        return new Chart(ctx, {
-            type: 'bar',
-            data: {
-                labels: labels,
-                datasets: [{
-                    label: 'Delivered',
-                    data: deliveredData,
-                    backgroundColor: COLORS.delivered,
-                    stack: 'Stack 0'
-                }, {
-                    label: 'Failed',
-                    data: failedData,
-                    backgroundColor: COLORS.failed,
-                    stack: 'Stack 0'
-                }]
-            },
-            options: {
-                scales: {
-                    x: {
-                        stacked: true,
-                    },
-                    y: {
-                        stacked: true,
-                        beginAtZero: true,
-                        max: MAX_Y,
-                        title: {
-                            display: true,
-                            text: 'SMS Sent',
-                            color: COLORS.text,
-                            font: {
-                                size: FONT_SIZE,
-                                weight: FONT_WEIGHT
-                            }
-                        }
-                    }
-                },
-                plugins: {
-                    legend: {
-                        position: 'top',
-                        align: 'end',
-                        labels: {
-                            padding: 20,
-                            boxWidth: 14,
-                            font: {
-                                size: 14
-                            }
-                        }
-                    }
-                },
-                responsive: true,
-                maintainAspectRatio: true
-            }
-        });
-    }
+        const svg = container.append('svg')
+            .attr('width', width + margin.left + margin.right)
+            .attr('height', height + margin.top + margin.bottom)
+            .append('g')
+            .attr('transform', `translate(${margin.left},${margin.top})`);

-    // Function to get number of days in a month
-    function getDaysInMonth(year, month) {
-        return new Date(year, month + 1, 0).getDate();
-    }
+        const x = d3.scaleBand()
+            .domain(labels)
+            .range([0, width])
+            .padding(0.1);

-    function generateYearlyData(labels) {
-        const deliveredData = labels.map((label, index) => {
-            return index < 6 ? Math.floor(Math.random() * 81) + 20 : 0; // Random between 20 and 100 for months Jan-June, zero for others
-        });
-        const failedData = deliveredData.map(delivered => Math.floor(delivered * (Math.random() * 0.15 + 0.05))); // 5-20% of delivered
-        return { deliveredData, failedData };
-    }
+        // Adjust the y-axis domain to add some space above the tallest bar
+        const maxY = d3.max(deliveredData.map((d, i) => d + (failedData[i] || 0)));
+        const y = d3.scaleLinear()
+            .domain([0, maxY + 2]) // Add 2 units of space at the top
+            .nice()
+            .range([height, 0]);

-    // Function to generate random data
-    function generateRandomData(labels) {
-        const deliveredData = labels.map(() => Math.floor(Math.random() * 81) + 20); // Random between 20 and 100
-        const failedData = deliveredData.map(delivered => Math.floor(delivered * (Math.random() * 0.15 + 0.05))); // 5-20% of delivered
-        return { deliveredData, failedData };
+        svg.append('g')
+            .attr('class', 'x axis')
+            .attr('transform', `translate(0,${height})`)
+            .call(d3.axisBottom(x));
+
+        // Generate the y-axis with whole numbers
+        const yAxis = d3.axisLeft(y)
+            .ticks(Math.min(maxY + 2, 10)) // Generate up to 10 ticks based on the data
+            .tickFormat(d3.format('d')); // Ensure whole numbers on the y-axis
+
+        svg.append('g')
+            .attr('class', 'y axis')
+            .call(yAxis);
+
+        // Data for stacking
+        const stackData = labels.map((label, i) => ({
+            label: label,
+            delivered: deliveredData[i],
+            failed: failedData[i] || 0 // Ensure there's a value for failed, even if it's 0
+        }));
+
+        // Stack the data
+        const stack = d3.stack()
+            .keys(['delivered', 'failed'])
+            .order(d3.stackOrderNone)
+            .offset(d3.stackOffsetNone);
+
+        const series = stack(stackData);
+
+        // Color scale
+        const color = d3.scaleOrdinal()
+            .domain(['delivered', 'failed'])
+            .range([COLORS.delivered, COLORS.failed]);
+
+        // Create tooltip
+        const tooltip = d3.select('#tooltip');
+
+        // Create bars with animation
+        const barGroups = svg.selectAll('.bar-group')
+            .data(series)
+            .enter()
+            .append('g')
+            .attr('class', 'bar-group')
+            .attr('fill', d => color(d.key));
+
+        barGroups.selectAll('rect')
+            .data(d => d)
+            .enter()
+            .append('rect')
+            .attr('x', d => x(d.data.label))
+            .attr('y', height)
+            .attr('height', 0)
+            .attr('width', x.bandwidth())
+            .on('mouseover', function(event, d) {
+                const key = d3.select(this.parentNode).datum().key;
+                const capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1);
+                tooltip.style('display', 'block')
+                    .html(`${d.data.label}<br>${capitalizedKey}: ${d.data[key]}`)
+                    .style('left', `${event.pageX + 10}px`)
+                    .style('top', `${event.pageY - 20}px`);
+            })
+            .on('mousemove', function(event) {
+                const [mouseX, mouseY] = d3.pointer(event);
+                tooltip.style('left', `${mouseX + 10}px`)
+                    .style('top', `${mouseY + 30}px`);
+            })
+            .on('mouseout', function() {
+                tooltip.style('display', 'none');
+            })
+            .transition()
+            .duration(1000)
+            .attr('y', d => y(d[1]))
+            .attr('height', d => y(d[0]) - y(d[1]));
    }

    // Function to create an accessible table
@@ -134,59 +153,68 @@
        table.appendChild(tbody);
    }

-    // Function to handle tab switching
-    function openTab(button, tabName) {
-        // Hide all tab contents
-        document.querySelectorAll('.tabcontent').forEach(content => {
-            content.style.display = 'none';
-        });
+    // Function to handle dropdown change
+    function handleDropdownChange(event) {
+        const selectedValue = event.target.value;
+        const subTitle = document.querySelector(`#chartsArea .chart-subtitle`);
+        const selectElement = document.getElementById('options');
+        const selectedText = selectElement.options[selectElement.selectedIndex].text;

-        // Remove "active" class from all buttons
-        tabButtons.forEach(button => {
-            button.classList.remove('active');
-        });
-
-        // Show the current tab and add "active" class to the button
-        document.getElementById(tabName).style.display = 'block';
-        button.classList.add('active');
-
-        // Initialize monthly chart if the "Monthly" tab is clicked
-        if (tabName === 'Monthly' && !monthlyChartInitialized) {
-            const monthlyCtx = document.getElementById('monthlyChart').getContext('2d');
-            const now = new Date();
-            const daysInMonth = getDaysInMonth(now.getFullYear(), now.getMonth());
-            const monthlyLabels = Array.from({ length: daysInMonth }, (_, i) => `${i + 1}`);
-            const { deliveredData, failedData } = generateRandomData(monthlyLabels);
-            createChart(monthlyCtx, monthlyLabels, deliveredData, failedData);
-            createTable('monthlyTable', 'Monthly', monthlyLabels, deliveredData, failedData);
-            monthlyChartInitialized = true;
-        }
-
-         // Initialize yearly chart if the "Yearly" tab is clicked
-        if (tabName === 'Yearly' && !yearlyChartInitialized) {
-            const yearlyCtx = document.getElementById('yearlyChart').getContext('2d');
-            const yearlyLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-                    const { deliveredData, failedData } = generateYearlyData(yearlyLabels);
-            createChart(yearlyCtx, yearlyLabels, deliveredData, failedData);
-            createTable('yearlyTable', 'Yearly', yearlyLabels, deliveredData, failedData);
-            yearlyChartInitialized = true;
+        if (selectedValue === "individual") {
+            // Mock individual data
+            const labels = ["2024-06-06", "2024-06-07", "2024-06-08", "2024-06-09", "2024-06-10", "2024-06-11", "2024-06-12"];
+            const deliveredData = labels.map(() => Math.floor(Math.random() * 5) + 1); // Random between 1 and 5
+            const failedData = deliveredData.map(delivered => Math.floor(delivered * (Math.random() * 0.15 + 0.05))); // 5-20% of delivered
+            subTitle.textContent = selectedText + " - Last 7 Days";
+            createChart('#weeklyChart', labels, deliveredData, failedData);
+            createTable('weeklyTable', 'Weekly', labels, deliveredData, failedData);
+        } else if (selectedValue === "service") {
+            subTitle.textContent = selectedText + " - Last 7 Days";
+            // Fetch and use real service data
+            fetchServiceData();
        }
    }

-    // Add event listeners to the tab buttons
-    tabButtons.forEach(button => {
-        button.addEventListener('click', function(event) {
-            openTab(this, this.getAttribute('data-tab'));
+    function fetchServiceData() {
+        var ctx = document.getElementById('weeklyChart');
+        if (!ctx) {
+            return;
+        }
+
+        var socket = io();
+        var serviceId = ctx.getAttribute('data-service-id');
+
+        socket.on('connect', function() {
+            socket.emit('fetch_daily_stats', serviceId);
        });
+
+        socket.on('daily_stats_update', function(data) {
+            var labels = [];
+            var deliveredData = [];
+            var failedData = [];
+
+            for (var date in data) {
+                labels.push(date);
+                deliveredData.push(data[date].sms.delivered);
+                failedData.push(data[date].sms.failed !== undefined ? data[date].sms.failed : 0);
+            }
+
+            createChart('#weeklyChart', labels, deliveredData, failedData);
+            createTable('weeklyTable', 'Weekly', labels, deliveredData, failedData);
+        });
+
+        socket.on('error', function(data) {
+            console.log('Error:', data);
+        });
+    }
+
+    document.addEventListener('DOMContentLoaded', function() {
+        // Initialize weekly chart and table with service data by default
+        fetchServiceData();
+
+        // Add event listener to the dropdown
+        const dropdown = document.getElementById('options');
+        dropdown.addEventListener('change', handleDropdownChange);
    });

-    // Show the first tab by default
-    tabButtons[0].click();
-
-    // Initialize weekly chart and table
-    const weeklyCtx = document.getElementById('weeklyChart').getContext('2d');
-    const weeklyLabels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
-    const { deliveredData: weeklyDeliveredData, failedData: weeklyFailedData } = generateRandomData(weeklyLabels);
-    createChart(weeklyCtx, weeklyLabels, weeklyDeliveredData, weeklyFailedData);
-    createTable('weeklyTable', 'Weekly', weeklyLabels, weeklyDeliveredData, weeklyFailedData);
-});
+})(window);
--- a/app/assets/javascripts/sampleChartDashboard.js
+++ b/app/assets/javascripts/sampleChartDashboard.js
@@ -20,6 +20,7 @@
                ]
            },
            options: {
+                animation: false,
                scales: {
                    y: {
                        beginAtZero: true
@@ -38,10 +39,12 @@
        socket.on('daily_stats_update', function(data) {
            var labels = [];
            var deliveredData = [];
+            var failedData = [];

            for (var date in data) {
                labels.push(date);
                deliveredData.push(data[date].sms.delivered);
+
            }

            myBarChart.data.labels = labels;
--- a/app/assets/sass/uswds/_data-visualization.scss
+++ b/app/assets/sass/uswds/_data-visualization.scss
@@ -58,9 +58,10 @@ $failed: color('orange-30v');
  line-height: 1;
  .usa-tooltip__body {
    width: units(mobile);
+    font-size: units(1);
    height: auto;
    white-space: wrap;
-    line-height: 1.3;
+    line-height: units(1);
  }
 }

@@ -81,33 +82,79 @@ $failed: color('orange-30v');

 // tabs

-.tab {
-  display: flex;
-  margin-bottom: units(2);
+// .tab {
+//   display: flex;
+//   margin-bottom: 10px; /* Replace units(2) with 10px */
+// }
+
+// .tab button {
+//   cursor: pointer;
+//   border-radius: 0;
+//   margin-right: -1px; /* Replace units(-1px) with -1px */
+//   &:focus {
+//     outline-width: 2px;
+//   }
+//   &.active, &:hover {
+//     background-color: #0076d6; /* Assuming color("blue-60v") is #0076d6 */
+//     color: #FFF;
+//     box-shadow: none;
+//   }
+// }
+
+// .tabcontent {
+//   display: none;
+//   height: 400px;
+//   width: 100%;
+//   padding: 10px; /* Replace units(1) with 10px */
+// }
+
+#chartsArea {
+  min-height: 400px;
 }

-.tab button {
-    cursor: pointer;
-    border-radius: 0;
-    margin-right: units(-1px);
-    &:focus {
-      outline-width: 2px;
-    }
-    &.active, &:hover {
-      background-color: color("blue-60v");
-      color: #FFF;
-      box-shadow: none;
-    }
-}
-.tabcontent {
-    display: none;
-    padding: units(1);
-}
 .chart-subtitle {
-    text-align: left;
-    width: 100%;
-    font-size: size("body", 5);
-    font-weight: bold;
-    padding: units(1);
-    margin: 0;
+  text-align: left;
+  width: 100%;
+  font-size: units(2);
+  font-weight: bold;
+  padding: 10px;
+  margin: 0;
+}
+
+.chart {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.axis text {
+  font-size: size("body", 2);
+}
+
+.axis line,
+.axis path {
+  shape-rendering: crispEdges;
+  stroke: #000;
+  fill: none;
+}
+
+.bar {
+  fill-opacity: 0.8;
+}
+
+.chart-container {
+  width: 100%;
+  position: relative; /* Ensure it is relative for absolute positioning of tooltip */
+}
+
+#tooltip {
+  position: absolute;
+  display: none;
+  background: #fff;
+  border: 1px solid #ccc;
+  padding: 5px;
+  pointer-events: none;
+  font-size: size("body", 2);
+  z-index: 100; /* Ensure tooltip appears above other elements */
 }
--- a/app/templates/views/dashboard/dashboard.html
+++ b/app/templates/views/dashboard/dashboard.html
@@ -18,34 +18,28 @@

    {{ ajax_block(partials, updates_url, 'upcoming') }}

-    <h2 class="font-body-xl margin-top-0">Service Name Dashboard</h2>
+    <!-- <canvas id="myChart" data-service-id="{{ service_id }}"></canvas> -->

-    <div class="tab">
-      <button class="tablinks usa-button usa-button--outline margin-right-0 border-right-0" data-tab="Weekly">Weekly</button>
-      <button class="tablinks usa-button usa-button--outline margin-right-0" data-tab="Monthly">Monthly</button>
-      <button class="tablinks usa-button usa-button--outline" data-tab="Yearly">Yearly</button>
+    <h2 class="font-body-2xl margin-top-0">Service Name Dashboard</h2>
+
+    <form class="usa-form margin-bottom-2">
+      <label class="usa-label" for="options">Account</label>
+      <select class="usa-select" name="options" id="options">
+        <option value>- Select -</option>
+        <option value="service" selected>{{ current_service.name }}</option>
+        <option value="individual">{{ current_user.name }}</option>
+      </select>
+    </form>
+
+    <div id="chartsArea" class="margin-bottom-8">
+      <div id="Weekly">
+        <div class="chart-subtitle">{{ current_service.name }} - Last 7 Days</div>
+        <div class="chart-container" id="weeklyChart" data-service-id="{{ service_id }}"></div>
+        <table id="weeklyTable" class="usa-sr-only"></table>
+      </div>
+      <div id="tooltip"></div>
    </div>

-    <div id="Weekly" class="tabcontent">
-      <div class="chart-subtitle">2024 Total Message Allowance - Weekly</div>
-      <canvas id="weeklyChart"></canvas>
-      <table id="weeklyTable" class="usa-sr-only"></table>
-    </div>
-
-    <div id="Monthly" class="tabcontent">
-      <div class="chart-subtitle">2024 Total Message Allowance - Monthly</div>
-      <canvas id="monthlyChart"></canvas>
-      <table id="monthlyTable" class="usa-sr-only"></table>
-    </div>
-
-    <div id="Yearly" class="tabcontent">
-      <div class="chart-subtitle">2024 Total Message Allowance - Yearly</div>
-      <canvas id="yearlyChart"></canvas>
-      <table id="yearlyTable" class="usa-sr-only"></table>
-    </div>
-
-    <div id="message"></div>
-
    <!-- <h3 id="total-value" class="margin-y-1"></h3>
    <div class="chart-container">
      <div class="bar delivered" id="delivered-bar"></div>
@@ -76,7 +70,7 @@
      </div>
    </div> -->

-    <h2 class="font-body-2xl line-height-sans-2 margin-bottom-0 margin-top-4">
+    <h2 class="font-body-xl line-height-sans-2 margin-bottom-0 margin-top-4">
      Messages sent
    </h2>

--- a/gulpfile.js
+++ b/gulpfile.js
@@ -102,7 +102,8 @@ const javascripts = () => {
      paths.npm + 'textarea-caret/index.js',
      paths.npm + 'cbor-js/cbor.js',
      paths.npm + 'socket.io-client/dist/socket.io.min.js',
-      paths.npm + 'chart.js/dist/chart.umd.js'
+      paths.npm + 'chart.js/dist/chart.umd.js',
+      paths.npm + 'd3/dist/d3.min.js'
    ]));

  // JS local to this application
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
        "@uswds/uswds": "^3.4.1",
        "cbor-js": "0.1.0",
        "chart.js": "^4.4.2",
+        "d3": "^7.9.0",
        "govuk_frontend_toolkit": "8.1.0",
        "govuk-frontend": "2.13.0",
        "hogan": "1.0.2",
@@ -4830,6 +4831,384 @@
        "node": ">=0.12"
      }
    },
+    "node_modules/d3": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
+      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+      "dependencies": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-array": {
+      "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-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "dependencies": {
+        "d3-path": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-contour": {
+      "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": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "dependencies": {
+        "d3-dsv": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/data-urls": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz",
@@ -5037,6 +5416,14 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/delaunator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
    "node_modules/delayed-stream": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -7566,7 +7953,6 @@
      "version": "0.6.3",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
      "dependencies": {
        "safer-buffer": ">= 2.1.2 < 3.0.0"
      },
@@ -7647,6 +8033,14 @@
      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
      "dev": true
    },
+    "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/interpret": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
@@ -12795,6 +13189,11 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
+    },
    "node_modules/rollup": {
      "version": "1.32.1",
      "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.32.1.tgz",
@@ -12887,6 +13286,11 @@
        "queue-microtask": "^1.2.2"
      }
    },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
    "node_modules/rxjs": {
      "version": "7.8.1",
      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
@@ -12927,8 +13331,7 @@
    "node_modules/safer-buffer": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
    },
    "node_modules/sass-embedded": {
      "version": "1.77.1",
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
    "@uswds/uswds": "^3.4.1",
    "cbor-js": "0.1.0",
    "chart.js": "^4.4.2",
+    "d3": "^7.9.0",
    "govuk_frontend_toolkit": "8.1.0",
    "govuk-frontend": "2.13.0",
    "hogan": "1.0.2",