Add a draft Who We Are page

_quarto.yml

@@ -11,8 +11,8 @@ website:
         text: Home
       - href: index.qmd#events
         text: Events
-      # - href: whoWeAre.qmd
-      #  text: Who We Are
+      - href: whoWeAre.qmd
+        text: Who We Are
   body-footer: |
     ::: {.footer}
       ![ResBaz Logo](/img/logos/ResBazAZrectanglelogo-small.png) \

components/nodeLinkDiagram.ojs

@@ -0,0 +1,160 @@
+people = FileAttachment("data/people.json").json();
+
+function nodeLinkDiagram () {
+  const height = width * 0.6;
+
+  const personNodeRadius = 25;
+
+  const teamNodeRadius = 75;
+
+  const strokeWeight = 5;
+
+  const weeklyTeams = new Set([
+    'coffee_and_code',
+    'hacky_hour'
+  ]);
+
+  const teamColors = d3.scaleOrdinal(['WEEKLY', 'FESTIVAL'], ['#ea5a2a', '#1e58ac']);
+
+  const peopleById = Object.fromEntries(
+    people.data.organization.membersWithRole.nodes.map((person) => [
+      person.id,
+      {
+        ...person,
+        type: "PERSON"
+      }
+    ])
+  );
+  const nodes = Object.values(peopleById);
+  const links = [];
+  people.data.organization.teams.nodes.forEach((team) => {
+    const teamId = team.name.toLowerCase().replace(/\s+/g, "_");
+    nodes.push({ id: teamId, name: team.name, type: weeklyTeams.has(teamId) ? "WEEKLY" : "FESTIVAL" });
+    team.members.nodes.forEach((member) => {
+      links.push({ source: member.id, target: teamId });
+    });
+  });
+
+  const simulation = d3
+    .forceSimulation(nodes)
+    .force(
+      "link",
+      d3.forceLink(links).id((d) => d.id)
+    )
+    .force(
+      "charge",
+      d3.forceManyBody().strength(-30 * (personNodeRadius + teamNodeRadius))
+    )
+    .force("center", d3.forceCenter(width / 2, height / 2));
+
+  const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
+
+  let draggedNode = null;
+  let selectedNode = null;
+
+  function mousedown(_, node) {
+    if (draggedNode) {
+      return;
+    }
+    simulation.alphaTarget(0.3).restart();
+    draggedNode = selectedNode = node.id;
+    node.fx = node.x;
+    node.fy = node.y;
+  }
+
+  function mousemove(event, node) {
+    if (!draggedNode) {
+      return;
+    }
+    const bounds = svg.node().getBoundingClientRect();
+    node.fx = event.x - bounds.left;
+    node.fy = event.y - bounds.top;
+  }
+
+  function mouseup(_, event) {
+    if (!draggedNode) {
+      return;
+    }
+    draggedNode = null;
+    simulation.alphaTarget(0);
+    node.fx = null;
+    node.fy = null;
+  }
+
+  const link = svg
+    .append("g")
+    .attr("stroke", "#999")
+    .attr("stroke-opacity", 0.6)
+    .selectAll("line")
+    .data(links)
+    .join("line")
+    .attr("stroke-width", strokeWeight);
+
+  const node = svg
+    .append("g")
+    .selectAll("g.node")
+    .data(nodes)
+    .join("g")
+    .classed("node", true)
+    // d3.drag() does weird things with quarto's minified version of d3...
+    // plus, this lets us control clicking vs dragging ourselves
+    .on('mousedown', mousedown)
+    .on('mousemove', mousemove)
+    .on('mouseup', mouseup);
+
+  const teamCircle = node
+    .filter((d) => d.type !== "PERSON")
+    .append("circle")
+    .attr("r", teamNodeRadius)
+    .style("fill", d => teamColors(d.type));
+
+  const clipPath = node
+    .filter((d) => d.type === "PERSON")
+    .append("clipPath")
+    .attr("id", (d) => d.id)
+    .append("circle")
+    .attr("id", (d) => d.id)
+    .attr("r", personNodeRadius);
+
+  // Append images
+  const profileImage = node
+    .filter((d) => d.type === "PERSON")
+    .append("image")
+    .attr("href", (d) => d.avatarUrl)
+    .attr("x", (d) => -personNodeRadius)
+    .attr("y", (d) => -personNodeRadius)
+    .attr("width", personNodeRadius * 2)
+    .attr("height", personNodeRadius * 2)
+    .attr("clip-path", (d) => `url(#${d.id})`)
+    .attr("preserveAspectRatio", "xMidYMin slice");
+
+  const text = node
+    .append("text")
+    .attr("class", "node_label")
+    .attr("y", (d) =>
+      d.type === "PERSON" ? `${personNodeRadius}px` : "0.5em"
+    )
+    .style("fill", (d) => (d.type === "PERSON" ? "black" : "white"))
+    .style("dominant-baseline", (d) =>
+      d.type === "PERSON" ? "hanging" : "bottom"
+    )
+    .style("text-anchor", "middle")
+    .style("font-size", "10pt")
+    .text((d) => d.name);
+
+  node.append("title").text((d) => d.id);
+
+  simulation.on("tick", () => {
+    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);
+
+    node.attr("transform", (d) => "translate(" + d.x + "," + d.y + ")");
+  });
+
+  // invalidation.then(() => simulation.stop());
+
+  return svg.node();
+}