2b:null 2c:["$","title",null,{"children":"Resources Network Visualisation | Miguel Vieira | Observable"}] 31:T41f,# ${config.title} Network Visualisation ## Radical Translations The visualisation shows a network of – *${nodeGroups.join(", ")}* – nodes, and how they are connected to one another via the relationships *${linkLabels.join(", ")}*. The size of the nodes corresponds to the number of connections the node has. To interact with the visualisation: * Search nodes to show the nodes and connections that are related to the search term. * Select relationships to show using the checkboxes. * Hover over the nodes to show more information about the node. * Click on a node to highlight/hide the selected node network. * Double-click on a node to view more details about it in the [Radical Translations website](https://radicaltranslations.org). --- * [Part 1 - Resources](https://observablehq.com/@jmiguelv/radical-translations-resources?collection=@jmiguelv/radical-translations) * [Part 3 - Agents Network Visualisation](https://observablehq.com/@jmiguelv/radical-translations-agents-network-visualisation?collection=@jmiguelv/radical-translations)32:T10f1,chart = { const links = results.links.map((d) => Object.create(d)); const linksByIndex = {}; links.forEach((l) => (linksByIndex[`${l.source},${l.target}`] = true)); const areConnected = (a, b) => a === b || linksByIndex[`${a.id},${b.id}`] || linksByIndex[`${b.id},${a.id}`]; const nodes = results.nodes.map((d) => Object.create(d)); const simulation = d3 .forceSimulation(nodes) .force("charge", d3.forceManyBody()) .force( "collision", d3.forceCollide().radius((d) => d.radius) ) .force( "link", d3 .forceLink(links) .id((d) => d.id) .distance(linkDistance) ) .force("x", d3.forceX()) .force("y", d3.forceY()); const left = -width / 2; const top = -height / 2; const svg = d3.create("svg").attr("viewBox", [left, top, width, height]); svg .append("svg:defs") .selectAll("marker") .data(["arrow"]) .enter() .append("svg:marker") .attr("id", String) .attr("viewBox", "0 0 10 10") .attr("refX", 25) .attr("refY", 5) .attr("markerWidth", 3) .attr("markerHeight", 3) .attr("orient", "auto") .append("svg:path") .attr("d", "M 0 0 L 10 5 L 0 10 z"); const root = svg.append("g").attr("id", "root"); const transform = d3.zoomIdentity.translate(0, 0).scale(zoomLevel); root.attr("transform", transform); const linkOpacity = 0.75; const link = root .append("g") .attr("opacity", linkOpacity) .selectAll("line") .data(links) .join("line") .attr("stroke", (d) => linkColor(d.label)) .attr("stroke-width", strokeWidth) .attr("marker-end", "url(#arrow)"); const node = root .append("g") .attr("stroke-width", strokeWidth) .selectAll("circle") .data(nodes) .join("circle") .attr("id", (d) => d.id) .attr("class", (d) => (d.url !== undefined ? "has-link" : "no-link")) .attr("r", (d) => Math.sqrt(d.connections + 25)) .attr("stroke", (d) => nodeStroke(d.group)) .attr("fill", (d) => nodeFill(d.group)) .call(drag(simulation)); const tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("visibility", "hidden"); const hideTooltip = () => tooltip.style("visibility", "hidden"); const showTooltip = (node) => tooltip .style("visibility", "visible") .html( `${node.id}: ${node.group}
${node.title}
${node.connections} connections` ); let focusedNode = null; const transitionTimeout = 125; const handleNodeClick = (d) => { showTooltip(d); if (d === focusedNode) { mutable selectedNode = focusedNode = null; hideTooltip(); link .transition(transitionTimeout) .style("opacity", linkOpacity) .transition(transitionTimeout) .attr("marker-end", "url(#arrow)"); node.transition(transitionTimeout).style("opacity", 1); } else { mutable selectedNode = focusedNode = d; link .transition(transitionTimeout) .style("opacity", (l) => l.source.id === d.id || l.target.id === d.id ? 1.0 : 0.1 ) .transition(transitionTimeout) .attr("marker-end", (l) => l.source.id === d.id || l.target.id === d.id ? "url(#arrow)" : "url()" ); node .transition(transitionTimeout) .style("opacity", (n) => (areConnected(n, d) ? 1.0 : 0.25)); } }; node .on("mousemove pointermove", (e) => tooltip .style("top", `${e.clientY - 10}px`) .style("left", `${e.clientX + 10}px`) ) .on("mouseenter pointerenter", (e, d) => { showTooltip(d); }) .on("mouseout pointerout", () => { hideTooltip(); }) .on("dblclick", (e, d) => { if (d.url !== undefined) { window.open(`${baseUrl}${d.url}`, "agent:detail"); } mutable selectedNode = focusedNode = null; handleNodeClick(d); }) .on("click", (e, d) => { handleNodeClick(d); }); 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("cx", (d) => d.x).attr("cy", (d) => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }33:[] 2f:{"id":"deef9d417970eb8f","slug":"radical-translations-resources-network-visualisation","title":"Resources Network Visualisation","thumbnail":"f155fb497ef9cd6895b69e6399af6ecc300c52438e55a1934d70905e51cc0ee1","access_level":"public","create_time":"$D2021-08-18T08:37:03.558Z","update_time":"$D2021-08-19T16:54:10.076Z","view_time":null,"first_public_time":"$D2021-08-19T16:11:17.482Z","fork":{"id":"cd5a27de2cf65772","slug":"radical-translations-agents-network-visualisation","title":"Agents Network Visualisation","owner":{"id":"587db768fa766a06","login":"jmiguelv","name":"Miguel Vieira"}},"stars":1,"starred":false,"owner":{"type":"team","id":"587db768fa766a06","login":"jmiguelv","name":"Miguel Vieira","avatar_url":"https://avatars-next.observableusercontent.com/4fba40b1cfe58889e137e945ed99c3eef4bd8f6f4585d123d0288455e42e1195","tier":"starter_2024"},"version":2352,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8ed700ef90ca11f2","login":"jmiguelv","name":"Miguel Vieira","avatar_url":"https://avatars-next.observableusercontent.com/4fba40b1cfe58889e137e945ed99c3eef4bd8f6f4585d123d0288455e42e1195","tier":null}],"members":[{"type":"individual","id":"8ed700ef90ca11f2","login":"jmiguelv","name":"Miguel Vieira","avatar_url":"https://avatars-next.observableusercontent.com/4fba40b1cfe58889e137e945ed99c3eef4bd8f6f4585d123d0288455e42e1195","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"fcd6a8c95fc69fcc","slug":"radical-translations","title":"Radical Translations","owner":{"id":"587db768fa766a06","login":"jmiguelv","name":"Miguel Vieira"}},"type":"notebook","body":{"title":"Resources Network Visualisation","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1126,"value":"## Filter the visualisation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":821,"value":"viewof foundNodes = Inputs.search(data.nodes, {\n datalist: nodesData,\n label: html`Search nodes`,\n placeholder: \"Name, type, etc.\",\n width: width / 2\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":739,"value":"filters = html`${[viewof relationships, viewof translatedTo]}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1458,"value":"display = html`

Display options

${[\n viewof numberOfConnections,\n viewof linkDistance,\n viewof strokeWidth,\n viewof zoomLevel,\n viewof showData\n]}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":494,"value":"## Visualising ${config.title.toLowerCase()}${viewof foundNodes.input.value ? `, with *${viewof foundNodes.input.value}* in the content` : \"\"}${relationships.length > 0 ? `, with *${relationships.join(\", \")}* relationships` : \", with any relationship\"}${translatedTo.length > 0 ? `, that translated to *${translatedTo.join(\", \")}*` : \"\"}\n*${results.nodes.length === 0 ? \"No results. Try reducing the minimum number of connections and/or changing the filters.\" : `${results.nodes.length} nodes with a minimum of ${numberOfConnections} connections and ${results.links.length} links`}*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1033,"value":"

\n ${showData ? html`

Data

Select an item to higlight the selected item network${viewof nodeSelection ? viewof nodeSelection : \"\"}` : \"\"}\n

\n Node key\n ${nodeGroups.map((n) => html`\n ${n}`)}\n

\n Link key\n ${linkLabels.map((l) => html`${l} `)}\n

\n Selected node\n ${getSelectedNodeInfo() ? html`${getSelectedNodeInfo()}` : html`Click on a node to highlight/hide the selected node network`}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":17,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1701,"value":"## Filter data\nData after searches, filters and display options are applied.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1954,"value":"results = {\n let nodes = filteredData.nodes\n .map((n) => {\n return {\n ...n,\n connections: filteredData.links.filter(\n (l) => l.source === n.id || l.target === n.id\n ).length\n };\n })\n .filter((n) => n.connections >= numberOfConnections);\n\n const links = filteredData.links.filter(\n (l) =>\n nodes.some((n) => n.id === l.source) &&\n nodes.some((n) => n.id === l.target)\n );\n\n nodes = nodes\n .map((n) => {\n return {\n ...n,\n connections: links.filter((l) => l.source === n.id || l.target === n.id)\n .length\n };\n })\n .filter((d) => d.connections > 0);\n\n return { nodes: nodes, links: links };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2098,"value":"Data after search and filters are applied.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1358,"value":"filteredData = {\n const links = foundData.links\n .filter(\n (l) => relationships.length === 0 || relationships.includes(l.label)\n )\n .filter(\n (l) =>\n translatedTo.length === 0 ||\n l.meta.some((m) => translatedTo.includes(m))\n );\n\n const nodes = foundData.nodes.filter((n) =>\n links.some((l) => l.source === n.id || l.target === n.id)\n );\n\n return { nodes: nodes, links: links };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2094,"value":"Data after text search is done.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":898,"value":"foundData = {\n // let links = data.links.filter(\n // (l) =>\n // foundNodes.some((n) => n.id === l.source) &&\n // foundNodes.some((n) => n.id === l.target)\n // );\n\n // const nodeIds = links.flatMap((l) =>\n // l.source === l.target ? l.source : [l.source, l.target]\n // );\n\n // links = links.filter(\n // (l) =>\n // nodeIds.filter((n) => n === l.source || n === l.target).length >=\n // numberOfConnections\n // );\n\n return {\n nodes: foundNodes,\n links: data.links.filter(\n (l) =>\n foundNodes.some((n) => n.id === l.source) &&\n foundNodes.some((n) => n.id === l.target)\n )\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1671,"value":"## Link functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":276,"value":"linkColor = d3.scaleOrdinal().domain(linkLabels).range(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":301,"value":"linkLabels = data.links\n .reduce((a, c) => {\n if (!a.includes(c.label)) a.push(c.label);\n return a;\n }, [])\n .sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1667,"value":"## Node functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":13,"value":"drag = (simulation) => {\n function dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n\n event.subject.fx = event.subject.x;\n event.subject.fy = event.subject.y;\n }\n\n function dragged(event) {\n event.subject.fx = event.x;\n event.subject.fy = event.y;\n }\n\n function dragended(event) {\n if (!event.active) simulation.alphaTarget(0);\n\n event.subject.fx = null;\n event.subject.fy = null;\n }\n\n return d3\n .drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1300,"value":"getSelectedNodeInfo = () => {\n let info = null;\n\n if (selectedNode !== null) {\n info = `${selectedNode.group}: ${selectedNode.title}`;\n\n if (selectedNode.url !== undefined) {\n info = `${info}`;\n }\n }\n\n return info;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1255,"value":"mutable selectedNode = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":606,"value":"nodeStroke = (value) => (isOutline(value) ? nodeColor(value) : \"#eee\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":604,"value":"nodeFill = (value) => (isOutline(value) ? \"#fff\" : nodeColor(value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":599,"value":"// isOutline = (value) => [\"organisation\", \"language\", \"place\"].includes(value)\nisOutline = (value) => false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"nodeColor = d3.scaleOrdinal().domain(nodeGroups).range(d3.schemeSet2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":291,"value":"nodeGroups = data.nodes\n .reduce((a, c) => {\n if (!a.includes(c.group)) a.push(c.group);\n return a;\n }, [])\n .sort((a, b) => {\n a = a.startsWith(\"person\") ? `0${a}` : a.startsWith(\"org\") ? `1${a}` : a;\n b = b.startsWith(\"person\") ? `0${b}` : b.startsWith(\"org\") ? `1${b}` : b;\n\n return a.localeCompare(b);\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2281,"value":"nodesData = [\n ...new Set(\n data.nodes\n .map((n) => n.group.replaceAll(/[()]/g, \"\"))\n .concat(\n data.nodes.map((n) => n.title.replaceAll(/(\\[.*?\\]\\s)|(\$.*?\$)/g, \"\"))\n )\n .concat(\n data.nodes.flatMap((n) =>\n n.meta !== undefined\n ? n.meta\n .filter((r) => r)\n .map((r) => r.replaceAll(/(\\[.*?\\]\\s)|(\$.*?\$)/g, \"\"))\n : \"\"\n )\n )\n .sort()\n )\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2039,"value":"languages = raw.nodes\n .filter((n) => n.group === \"language\" && n.title !== \"German\")\n .map((n) => n.title)\n .sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2219,"value":"## Data table functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2221,"value":"handleTableClear = {\n if (nodeSelection === null && tableSelectedNode !== null) {\n d3.select(`#${tableSelectedNode.id}`).dispatch(\"click\");\n mutable tableSelectedNode = null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2227,"value":"handleTableSelection = {\n if (nodeSelection !== null) {\n mutable tableSelectedNode = nodeSelection;\n d3.select(`#${nodeSelection.id}`).dispatch(\"click\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2246,"value":"mutable tableSelectedNode = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2074,"value":"## Normalise the data\n* Flatten the meta information.\n* Remove nodes with no links.\n* Copy the meta information into the links for easier filtering.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2063,"value":"data = {\n const nodes = raw.nodes\n .map((n) => {\n if (n.group === \"person (None)\") n.group = \"person (u)\";\n\n n.meta =\n n.meta !== undefined ? Object.values(n.meta).flatMap((m) => m) : [];\n\n return n;\n })\n .filter((n) =>\n raw.edges.some((e) => e.source === n.id || e.target == n.id)\n );\n\n const links = raw.edges.map((e) => {\n const nodes = raw.nodes.filter(\n (n) => n.id === e.source || n.id === e.target\n );\n\n e.meta = nodes.flatMap((n) => (n.meta !== undefined ? n.meta : []));\n\n return e;\n });\n\n return { nodes: nodes, links: links };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1661,"value":"## Load the data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2,"value":"raw = network","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2324,"value":"config = ({\n title: \"Resources\",\n relationships: [\"same translator\"],\n connections: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1189,"value":"baseUrl = \"https://radicaltranslations.org/\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1676,"value":"## Filters and display options\nThe views are defined here so they can be grouped in a single form above. Because they are used above, they produce empty outputs in this section.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2119,"value":"viewof relationships = Inputs.checkbox(linkLabels, {\n label: html`Relationships`,\n format: (x) =>\n html`${x}`,\n value: config.relationships\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2120,"value":"viewof translatedTo = Inputs.checkbox(languages, {\n label: html`Languages translated to`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"height = window.outerHeight - 175","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1735,"value":"viewof numberOfConnections = Inputs.range([0, 25], {\n label: html`Minimum number of connections`,\n step: 1,\n value:\n viewof foundNodes.input.value ||\n relationships.length > 0 ||\n translatedTo.length > 0\n ? config.connections\n : 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1493,"value":"viewof linkDistance = Inputs.range([10, 100], {\n label: html`Link distance`,\n step: 5,\n value: 30\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":967,"value":"viewof strokeWidth = Inputs.range([0.5, 2.5], {\n label: html`Link width`,\n step: 0.25,\n value: 1.5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":693,"value":"viewof zoomLevel = Inputs.range([0.25, 2], {\n label: html`Zoom`,\n step: 0.25,\n value: results.nodes.length > 500 ? 0.75 : 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1541,"value":"viewof showData = Inputs.toggle({ label: html`Show data` })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1553,"value":"viewof nodeSelection = {\n function link(item) {\n return html`${item.title}`;\n }\n function sparkbar(max) {\n return (x) => html`${x.toLocaleString(\"en\")}`;\n }\n\n const data = results.nodes;\n\n return Inputs.table(data, {\n columns:\n data.length > 0 ? Object.keys(data[0]).filter((c) => c !== \"url\") : [],\n format: {\n title: (v, i, d) => link(d[i]),\n connections: sparkbar(d3.max(data, (d) => d.connections / 3))\n },\n multiple: false,\n rows: 5.5,\n sort: \"title\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1658,"value":"## Styles\nCSS styles.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":185,"value":"styles = html`\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1697,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2302,"value":"import { network } from \"@jmiguelv/radical-translations-resources\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"import { d3 } from \"@observablehq/plot\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"## References\n* [Disjoint force directed graph](https://observablehq.com/@d3/disjoint-force-directed-graph)\n* [Basic tooltip](https://observablehq.com/@jianan-li/basic-tooltip)\n* [Form inputs](https://observablehq.com/@observablehq/inputs)\n* [Zoom transform](https://devdocs.io/d3~6/d3-zoom#zoomtransform)\n* [Force layout](https://www.d3indepth.com/force-layout/)\n* [Understanding the force layout](https://medium.com/@sxywu/understanding-the-force-ef1237017d5)\n* [Multitouch events](https://observablehq.com/@d3/multitouch)\n* https://observablehq.com/@ravengao/force-directed-graph-with-cola-grouping\n* https://observablehq.com/@vk2425/game-of-thrones-relationship-graph","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"