use different kind of force graph for network plot #59

Author: mpadge

DESCRIPTION

@@ -1,6 +1,6 @@
 Package: repometrics
 Title: Metrics for Your Code Repository
-Version: 0.1.3.050
+Version: 0.1.3.051
 Authors@R: 
     person("Mark", "Padgham", , "mark.padgham@email.com", role = c("aut", "cre"),
            comment = c(ORCID = "0000-0003-2172-5265"))

R/quarto-dashboard.R

@@ -32,6 +32,7 @@ repometrics_dashboard <- function (data_repo, data_users, action = "preview") {
     saveRDS (data_users, fs::path (dir, "results-users.Rds"))
 
     dat_user_network <- get_user_network (data_repo, data_users)
+    dat_user_network$links$type <- "person"
     jsonlite::write_json (
         dat_user_network,
         fs::path (dir, "results-user-network.json")

codemeta.json

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

inst/extdata/quarto/network.qmd

@@ -32,160 +32,132 @@ nodes_user <- data.frame (id = dat_pkg$rm$contribs_from_gh_api$login, group = 4L
 nodes_user$group [which (nodes_user$id %in% names (dat_users))] <- 3L
 ```
 
-```{ojs ForceGraph-definition}
-// Copyright 2021-2024 Observable, Inc.
-// Released under the ISC license.
-// https://observablehq.com/@d3/force-directed-graph
-function ForceGraph({
-  nodes, // an iterable of node objects (typically [{id}, …])
-  links // an iterable of link objects (typically [{source, target}, …])
-}, {
-  nodeId, // given d in nodes, returns a unique identifier (string)
-  nodeGroup, // given d in nodes, returns an (ordinal) value for color
-  nodeGroups, // an array of ordinal values representing the node groups
-  nodeTitle, // given d in nodes, a title string
-  nodeFill = "currentColor", // node stroke fill (if not using a group color encoding)
-  nodeStroke = "#fff", // node stroke color
-  nodeStrokeWidth = 1.5, // node stroke width, in pixels
-  nodeStrokeOpacity = 1, // node stroke opacity
-  nodeRadius, // node radius, in pixels
-  nodeStrength,
-  linkSource = ({source}) => source, // given d in links, returns a node identifier string
-  linkTarget = ({target}) => target, // given d in links, returns a node identifier string
-  linkStroke = "#999", // link stroke color
-  linkStrokeOpacity = 0.6, // link stroke opacity
-  linkStrokeWidth = 1.5, // given d in links, returns a stroke width in pixels
-  linkStrokeLinecap = "round", // link stroke linecap
-  linkStrength,
-  colors = d3.schemeTableau10, // an array of color strings, for the node groups
-  width = 640, // outer width, in pixels
-  height = 400, // outer height, in pixels
-  invalidation // when this promise resolves, stop the simulation
-} = {}) {
-  // Compute values.
-  const N = d3.map(nodes, nodeId).map(intern);
-  const R = d3.map(nodes, nodeRadius);
-  const LS = d3.map(links, linkSource).map(intern);
-  const LT = d3.map(links, linkTarget).map(intern);
-  const T = d3.map(nodes, nodeTitle);
-  const G = nodeGroup == null ? null : d3.map(nodes, nodeGroup).map(intern);
-  const W = typeof linkStrokeWidth !== "function" ? null : d3.map(links, linkStrokeWidth);
-  const L = typeof linkStroke !== "function" ? null : d3.map(links, linkStroke);
-
-
-  // Replace the input nodes and links with mutable objects for the simulation.
-  nodes = d3.map(nodes, (_, i) => ({id: N[i]}));
-  links = d3.map(links, (_, i) => ({source: LS[i], target: LT[i]}));
-
-  // Compute default domains.
-  if (G && nodeGroups === undefined) nodeGroups = d3.sort(G);
-
-  // Construct the scales.
-  const color = nodeGroup == null ? null : d3.scaleOrdinal(nodeGroups, colors);
-
-  // Construct the forces.
-  const forceNode = d3.forceManyBody();
-  const forceLink = d3.forceLink(links).id(({index: i}) => N[i]);
-  if (nodeStrength !== undefined) forceNode.strength(nodeStrength);
-  if (linkStrength !== undefined) forceLink.strength(linkStrength);
+here is some text
+
+
+```{ojs import-network-data}
+network = FileAttachment("results-user-network.json").json()
+```
+
+```{ojs ForceGraph-plot}
+Swatches(chart.scales.color)
+chart = {
+
+  const width = 928;
+  const height = 600;
+
+  const nodes = network.nodes;
+  const links = network.links;
+  const types = Array.from(new Set(links.map(d => d.type)));
+
+  const color = d3.scaleOrdinal(types, d3.schemeCategory10);
 
   const simulation = d3.forceSimulation(nodes)
-      .force("link", forceLink)
-      .force("charge", forceNode)
-      .force("center",  d3.forceCenter())
-      .on("tick", ticked);
+      .force("link", d3.forceLink(links).id(d => d.id))
+      .force("charge", d3.forceManyBody().strength(-400))
+      .force("x", d3.forceX())
+      .force("y", d3.forceY());
 
   const svg = d3.create("svg")
+      .attr("viewBox", [-width / 2, -height / 2, width, height])
       .attr("width", width)
       .attr("height", height)
-      .attr("viewBox", [-width / 2, -height / 2, width, height])
-      .attr("style", "max-width: 100%; height: auto; height: intrinsic; font: 12px sans-serif;");
+      .attr("style", "max-width: 100%; height: auto; font: 12px sans-serif;");
+
+  // Per-type markers, as they don't inherit styles.
+  svg.append("defs").selectAll("marker")
+    .data(types)
+    .join("marker")
+      .attr("id", d => `arrow-${d}`)
+      .attr("viewBox", "0 -5 10 10")
+      .attr("refX", 15)
+      .attr("refY", -0.5)
+      .attr("markerWidth", 6)
+      .attr("markerHeight", 6)
+      .attr("orient", "auto")
+    .append("path")
+      .attr("fill", color)
+      .attr("d", "M0,-5L10,0L0,5");
 
   const link = svg.append("g")
-      .attr("stroke", typeof linkStroke !== "function" ? linkStroke : null)
-      .attr("stroke-opacity", linkStrokeOpacity)
-      .attr("stroke-width", typeof linkStrokeWidth !== "function" ? linkStrokeWidth : null)
-      .attr("stroke-linecap", linkStrokeLinecap)
-    .selectAll("line")
+      .attr("fill", "none")
+      .attr("stroke-width", 1.5)
+    .selectAll("path")
     .data(links)
-    .join("line");
+    .join("path")
+      .attr("stroke", d => color(d.type))
+      .attr("stroke-width", d => Math.sqrt(d.value));
 
   const node = svg.append("g")
-      .attr("fill", nodeFill)
-      .attr("stroke", nodeStroke)
-      .attr("stroke-opacity", nodeStrokeOpacity)
-      .attr("stroke-width", nodeStrokeWidth)
-    .selectAll("circle")
+      .attr("fill", "currentColor")
+      .attr("stroke-linecap", "round")
+      .attr("stroke-linejoin", "round")
+    .selectAll("g")
     .data(nodes)
-    .join("circle")
-      .attr("r", nodeRadius)
+    .join("g")
       .call(drag(simulation));
 
-  if (W) link.attr("stroke-width", ({index: i}) => W[i]);
-  if (L) link.attr("stroke", ({index: i}) => L[i]);
-  if (G) node.attr("fill", ({index: i}) => color(G[i]));
-  node.attr("r", ({index: i}) => R[i]);
-  node.append("title").text(({index: i}) => T[i]);
-  if (invalidation != null) invalidation.then(() => simulation.stop());
+  node.append("circle")
+      .attr("stroke", "white")
+      .attr("stroke-width", 1.5)
+      .data(nodes)
+      .join("circle")
+        .attr("r", d => 5 * Math.log10(d.contributions + 1));
+
+  node.append("text")
+      .attr("x", 8)
+      .attr("y", "0.31em")
+      .text(d => d.id)
+    .clone(true).lower()
+      .attr("fill", "none")
+      .attr("stroke", "white")
+      .attr("stroke-width", 3);
+
+  simulation.on("tick", () => {
+    link.attr("d", linkArc);
+    node.attr("transform", d => `translate(${d.x},${d.y})`);
+  });
+
+  invalidation.then(() => simulation.stop());
+
+  return Object.assign(svg.node(), {scales: {color}});
+}
+```
 
-  function intern(value) {
-    return value !== null && typeof value === "object" ? value.valueOf() : value;
+```{ojs}
+function linkArc(d) {
+  const r = Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y);
+  return `
+    M${d.source.x},${d.source.y}
+    A${r},${r} 0 0,1 ${d.target.x},${d.target.y}
+  `;
+}
+```
+
+```{ojs}
+drag = simulation => {
+
+  function dragstarted(event, d) {
+    if (!event.active) simulation.alphaTarget(0.3).restart();
+    d.fx = d.x;
+    d.fy = d.y;
   }
 
-  function ticked() {
-    link
-      .attr("x1", d => d.source.x)
-      .attr("y1", d => d.source.y)
-      .attr("x2", d => d.target.x)
-      .attr("y2", d => d.target.y);
+  function dragged(event, d) {
+    d.fx = event.x;
+    d.fy = event.y;
+  }
 
-    node
-      .attr("cx", d => d.x)
-      .attr("cy", d => d.y);
+  function dragended(event, d) {
+    if (!event.active) simulation.alphaTarget(0);
+    d.fx = null;
+    d.fy = null;
   }
 
-  function drag(simulation) {
-    function dragstarted(event) {
-      if (!event.active) simulation.alphaTarget(0.3).restart();
-      event.subject.fx = event.subject.x;
-      event.subject.fy = event.subject.y;
-    }
-
-    function dragged(event) {
-      event.subject.fx = event.x;
-      event.subject.fy = event.y;
-    }
-
-    function dragended(event) {
-      if (!event.active) simulation.alphaTarget(0);
-      event.subject.fx = null;
-      event.subject.fy = null;
-    }
-
-    return d3.drag()
+  return d3.drag()
       .on("start", dragstarted)
       .on("drag", dragged)
       .on("end", dragended);
-  }
-
-  return Object.assign(svg.node(), {scales: {color}});
 }
-```
-
-```{ojs import-network-data}
-network = FileAttachment("results-user-network.json").json()
-```
-
-```{ojs ForceGraph-plot}
-chart = ForceGraph(network, {
-    nodeId: d => d.id,
-    nodeGroup: d => d.group,
-    nodeTitle: d => d.id,
-    nodeRadius: d => 10 * Math.log10(d.contributions + 1),
-    linkStrokeWidth: l => Math.sqrt(l.value),
-    width,
-    height: 400,
-    linkStrength: 0.001,
-    invalidation // a promise to stop the simulation when the cell is re-run
-})
+import {Swatches} from "@d3/color-legend"
 ```