add zoom controls to contributors network graph

Author: mpadge

DESCRIPTION

@@ -1,6 +1,6 @@
 Package: orgmetrics
 Title: Metrics for Your GitHub Organization
-Version: 0.1.2.110
+Version: 0.1.2.111
 Authors@R: 
     person("Mark", "Padgham", , "[email protected]", role = c("aut", "cre"),
            comment = c(ORCID = "0000-0003-2172-5265"))

codemeta.json

@@ -8,7 +8,7 @@
   "codeRepository": "https://github.com/ropensci-review-tools/orgmetrics",
   "issueTracker": "https://github.com/ropensci-review-tools/orgmetrics/issues",
   "license": "https://spdx.org/licenses/GPL-3.0",
-  "version": "0.1.2.110",
+  "version": "0.1.2.111",
   "programmingLanguage": {
     "@type": "ComputerLanguage",
     "name": "R",

inst/extdata/quarto/contributor.qmd

@@ -221,6 +221,50 @@ Inputs.table(metricsTable, {
 
 ## Network
 
+```{ojs ForceGraph-controls}
+width = 928;
+height = 600;
+
+viewof x0 = {
+    let input = Inputs.range([-width, width],
+        {
+            value: -width / 2,
+            step: 10,
+            label: "x"
+        }
+    )
+    d3.select(input).select('input[type="number"]').style("display", "none");
+    return input;
+}
+
+viewof y0 = {
+    let input = Inputs.range([-height, height],
+        {
+            value: -height / 2,
+            step: 10,
+            label: "y"
+        }
+    )
+    d3.select(input).select('input[type="number"]').style("display", "none");
+    return input;
+}
+
+viewof strength = {
+    let input = Inputs.range([0, 800],
+        {
+            value: 50,
+            step: 10,
+            label: "zoom"
+        }
+    )
+    d3.select(input).select('input[type="number"]').style("display", "none");
+    return input;
+}
+```
+
+
+<div style="margin-top: 20px; margin-bottom: 20px;"></div>
+
 ```{ojs network-in}
 // Connect co-maintainers to all of their packages:
 co_pkgs = these_cos ? these_cos.map(i => maintainer_pkgs[i]).flat() : [];
@@ -276,8 +320,6 @@ Swatches(chart.scales.color)
 ```
 
 ```{ojs ForceGraph-plot}
-strength = -400;
-
 chart = {
 
     const width = 928;
@@ -289,12 +331,12 @@ chart = {
 
     const simulation = d3.forceSimulation(nodes)
         .force("link", d3.forceLink(links).id(d => d.id))
-        .force("charge", d3.forceManyBody().strength(strength))
+        .force("charge", d3.forceManyBody().strength(-strength))
         .force("x", d3.forceX())
         .force("y", d3.forceY());
 
     const svg = d3.create("svg")
-        .attr("viewBox", [-width / 2, -height / 2, width, height])
+        .attr("viewBox", [x0, y0, width, height])
         .attr("width", width)
         .attr("height", height)
         .attr("style", "max-width: 100%; height: auto; font: 14px sans-serif;");