From 5991fda8bc037d917ff2266baa438462f2a289f0 Mon Sep 17 00:00:00 2001
From: Michael Levin <michael.levin@gsa.gov>
Date: Tue, 25 Feb 2025 15:03:23 -0500
Subject: [PATCH] [Feature] Add DAP watermark to bubble chart

---
 images/dap-watermark.svg                            | 11 +++++++++++
 js/components/visualizations/TopPagesCircleGraph.js |  9 +++++++++
 2 files changed, 20 insertions(+)
 create mode 100644 images/dap-watermark.svg

diff --git a/images/dap-watermark.svg b/images/dap-watermark.svg
new file mode 100644
index 00000000..2b73c9bc
--- /dev/null
+++ b/images/dap-watermark.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="256.000000pt" height="400.000000pt" viewBox="0 0 256.000000 400.000000" preserveAspectRatio="xMidYMid meet">
+  <g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)" fill="#0077b6" stroke="none">
+    <path d="M1560 1110 l0 -740 165 0 165 0 0 740 0 740 -165 0 -165 0 0 -740z"/>
+    <path d="M210 1010 l0 -640 170 0 170 0 0 640 0 640 -170 0 -170 0 0 -640z"/>
+    <path d="M2010 910 l0 -540 165 0 165 0 0 540 0 540 -165 0 -165 0 0 -540z"/>
+    <path d="M660 810 l0 -440 165 0 165 0 0 440 0 440 -165 0 -165 0 0 -440z"/>
+    <path d="M1110 710 l0 -340 165 0 165 0 0 340 0 340 -165 0 -165 0 0 -340z"/>
+  </g>
+  <text x="35" y="260" font-size="35" font-weight="500" font-family="Arial, Helvetica, sans-serif">Powered by</text>
+  <text x="75" y="315" font-size="50" font-weight="800" font-family="Arial, Helvetica, sans-serif">DAP</text>
+</svg>
diff --git a/js/components/visualizations/TopPagesCircleGraph.js b/js/components/visualizations/TopPagesCircleGraph.js
index 19922d6d..b9368ca1 100644
--- a/js/components/visualizations/TopPagesCircleGraph.js
+++ b/js/components/visualizations/TopPagesCircleGraph.js
@@ -213,6 +213,15 @@ function TopPagesCircleGraph({ dataHrefBase }) {
       .style("display", (d) => (d.parent === root ? "inline" : "none"))
       .text((d) => d.data.name);
 
+    // Add DAP watermark SVG
+    svg
+      .append("image")
+      .attr("xlink:href", "/images/dap-watermark.svg")
+      .attr("width", 175)
+      .attr("height", 175)
+      .attr("x", "300")
+      .attr("y", "300");
+
     // Create the zoom behavior and zoom immediately in to the initial focus node.
     svg.on("click", (event) => zoom(event, root));
     let focus = root;