2b:null 2c:["$","title",null,{"children":"Graph Visualization | Xavier B. | Observable"}] 31:T874,matrixChart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); var chart = svg.append('g') .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); var graph = dataMatrix.sort(function (a, b) { if(a.bloodType !== b.bloodType){ if(a.bloodType > b.bloodType) return 1; else return -1; }else{ if(a.donor_bloodType >= b.donor_bloodType) return 1; else return -1; } }); opacity; var row = svg.selectAll('g.row') .data(graph) .join('g') .attr('class', 'row') .attr('transform', function (d, i) { return 'translate(0,' + x(i) + ')'; }) .each(makeRow) function makeRow(d, i) { const rowData = d; var cell = d3.select(this).selectAll('rect') .data(graph) .join('rect') .attr('x', (d, i) => x(i)) .attr('width', x.bandwidth()) .attr('height', x.bandwidth()) .style('fill-opacity', (d,i) => opacity(rowData.connections[graph[i].id])) .style('fill', (d,i) => { if (rowData.connections[graph[i].id] > 0 && rowData.bloodType === d.bloodType) { return colorScale(rowData.bloodType); } else if (rowData.connections[graph[i].id] > 0) { return '#555'; } else { return '#ccc'; } }) } row.append('text') .attr('class', 'label') .attr('x', margin.left - 4) .attr('y', x.bandwidth() / 2) .attr('dy', '0.32em') .attr('font-size', '10px') .attr('text-anchor', 'end') .text((d,i) => d.id + "," + graph[i].outdegree+ "," + graph[i].bloodType+ "," + graph[i].donor_bloodType); var column = svg.selectAll('g.column') .data(graph) .join('g') .attr('class', 'column') .attr('transform', function(d, i) { return 'rotate(-90, '+margin.top+', '+margin.left+')'; }) .append('text') .attr('class', 'label') .attr('x', margin.top + 4) .attr('y', (d,i) => x(i) + x.bandwidth() / 2) .attr('dy', '0.32em') .attr('font-size', '10px') .text((d,i) => d.id + "," + graph[i].indegree+ "," + graph[i].bloodType+ "," + graph[i].donor_bloodType) return svg.node(); } 32:T13d1,md`Node-link diagrams are the most common graphical representation of networks. In this approach, the nodes and links are represented as visual marks. One of the main challenges that we have when showing a node-link visualization graph is how to position the nodes on the graph. D3 provides a **[simulation method](https://github.com/d3/d3-force#simulation)** to help us on this goal by simulating a set of forces between the different nodes of the graph. This module implements a numerical method for simulating these physical forces on particles that, in our case, will correspond to the nodes. To define a force simulation, you have to follow these steps: - Create forceSimulation, and associate it with the data (nodes) - Add the desired force functions to the simulation - Set up a callback function to update the element positions after each tick Force functions are added to the simulation using .force() where the first argument is a user defined id and the second argument the force function: ~~~ javascript simulation.force('charge', d3.forceManyBody()) ~~~ D3 provides different kind of forces on the **[force layout](https://github.com/d3/d3-force)**: - All elements repel one another (to have some padding between them) - Elements are attracted to the center of gravity (to compact them) - Linked elements are a fixed distance apart - Elements may not overlap (collision detection) These force types can be defined using these force functions: - **[Centering](https://github.com/d3/d3-force#centering)**: The centering force translates nodes uniformly so that the mean position of all nodes (the center of mass if all nodes have equal weight) is at the given position ⟨x,y⟩, which can be defined with the object creation. The function *strength()* sets the centering force’s strength, which takes the value 1 by default. An example of usage of this force is: ~~~ javascript simulation.force('center', d3.forceCenter(width/2, height/2).strength(0.4)) ~~~ - **[Collision](https://github.com/d3/d3-force#collision)**: The collision force treats nodes as circles with a given radius, rather than points, and prevents nodes from overlapping. More formally, two nodes a and b are separated so that the distance between *a* and *b* is at least *radius(a) + radius(b)*. To reduce jitter, this is by default a “soft” constraint with a configurable strength and iteration count. An example of usage of this force is: ~~~ javascript simulation.force('collision', d3.forceCollide().radius(d => d.radius)) ~~~ - **[Links](https://github.com/d3/d3-force#links)**: The link force pushes linked nodes together or apart according to the desired link distance. The strength of the force is proportional to the difference between the linked nodes’ distance and the target distance, similar to a spring force. Each link object has to specify a source and target element, where the value is the element’s array index. An example of usage of this force is: ~~~ javascript simulation.force('link', d3.forceLink(links).distance(d => d.value)) ~~~ - **[Many-Body](https://github.com/d3/d3-force#many-body)**: The many-body (or n-body) force applies mutually amongst all nodes. It can be used to simulate attraction if the strength is positive (using the *.strength()* function), or repulsion if the strength is negative. The default strength value is -30. This implementation uses quadtrees and the Barnes–Hut approximation to greatly improve performance; the accuracy can be customized using the theta parameter. An example of usage of this force is: ~~~ javascript simulation.force('charge', d3.forceManyBody().strength(-250)) ~~~ - **[Positioning](https://github.com/d3/d3-force#positioning)**: The x- and y-positioning forces push nodes towards a desired position along the given dimension with a configurable strength. The [radial force](https://bl.ocks.org/mbostock/cd98bf52e9067e26945edd95e8cf6ef9) is similar, except it pushes nodes towards the closest point on a given circle. The strength of the force is proportional to the one-dimensional distance between the node’s position and the target position. While these forces can be used to position individual nodes, they are intended primarily for global forces that apply to all (or most) nodes. An [example](https://bl.ocks.org/d3indepth/9491e05b23ca7a02fca8d4ddf12df5df) of usage of this force is: ~~~ javascript simulation.force('x', d3.forceX(d => xCenter[d.category]).strength(0.3)); ~~~ A good introduction to the force layout is presented in this [notebook](https://www.d3indepth.com/force-layout/). This force simulation can have multiple purposes, such as [grouping](https://observablehq.com/@d3/clustered-bubbles), and [collision detection](https://observablehq.com/@john-guerra/collision-detection), but today we will see how to apply it to node-link graph representation. In this representation, we will use a link force related to the score of the relationship, a many-body force to ensure separation between nodes, and a centering force to position the graph around the SVG center. `33:T689,chart = { const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).distance(d=>linkScale(data.links[d.index].score))) .force("charge", d3.forceManyBody().strength(-250)) .force("center", d3.forceCenter(width / 2, height / 2).strength(0.4)); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const link = svg.append("g") .attr("stroke-opacity", 0.3) .selectAll("line") .data(links) .join("line") .attr("stroke", (d,i)=> linkcolor(data.links[i].score)) .attr("stroke-width", d => Math.sqrt(d.score)*0.15); const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", 5) .attr("fill", color) .attr("fill", (d,i)=> colorScale(data.nodes[i].bloodType)) .call(drag(simulation)); var texts = svg.selectAll(".texts") .data(nodes) .join("text") .attr("dy", -4) .attr("font-family", "sans-serif") .attr('font-size', '10px') .attr('text-anchor', 'middle') .text( d => d.index ); 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); texts .attr("x", d => d.x) .attr("y", d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }34:Te4d,chrt = { const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); const simulation = d3 .forceSimulation(nodes) .force( "link", d3.forceLink(links).distance(d => linkScale(data.links[d.index].score)) ) .force("charge", d3.forceManyBody().strength(-250)) .force("center", d3.forceCenter(width / 2, height / 2).strength(0.4)); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const tooltip = d3 .select('body') .append('div') .attr('id', 'barchart-tooltip') .style("font-family", "'Work Sans', sans-serif") .style('position', 'absolute') .style('z-index', '1') .style('visibility', 'hidden') .style('padding', '10px') .style('background', 'rgba(0,0,0,0.6)') .style('font-size', '16px') .style('width', '300px') .style('border-radius', '4px') .style('color', '#fff'); const link = svg .append("g") .attr("stroke-opacity", 0.3) .selectAll("line") .data(links) .join("line") .attr("stroke", (d, i) => linkcolor(data.links[i].score)) .attr("stroke-width", d => Math.sqrt(d.score) * 0.15); const node = svg .append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", 5) .attr("fill", color) .attr("fill", (d, i) => colorScale(data.nodes[i].bloodType)) .call(drag(simulation)) // Tooltip interaction .on("mouseover", function(e, d, i) { let tooltipWidth = tooltip.node().offsetWidth; let tooltipHeight = tooltip.node().offsetHeight; tooltip .style("left", e.pageX - tooltipWidth / 2 + 'px') .style("top", e.pageY - tooltipHeight - 10 + 'px') .style('visibility', 'visible').html(`

	Patient	Donor
🚻 Gender	${d.gender === 'M' ? 'Male' : 'Female'}	${d.donor_gender === 'M' ? 'Male' : 'Female'}
🩸 Blood type	${d.bloodType}	${d.donor_bloodType}

`); d3.select(this).attr("fill", "steelblue"); }) .on('mousemove', function(e) { let tooltipWidth = tooltip.node().offsetWidth; let tooltipHeight = tooltip.node().offsetHeight; tooltip .style("left", e.pageX - tooltipWidth / 2 + 'px') .style("top", e.pageY - tooltipHeight - 10 + 'px'); }) .on("mouseout", function(e, d) { tooltip.style('visibility', 'hidden'); d3.select(this).attr("fill", "purple"); }); var texts = svg .selectAll(".texts") .data(nodes) .join("text") .attr("dy", -4) .attr("font-family", "sans-serif") .attr('font-size', '10px') .attr('text-anchor', 'middle') .text(d => d.index); 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); texts.attr("x", d => d.x).attr("y", d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }35:[{"id":"1c47efbdf6461395ee6d0a6023a4e68d3cee7b4649b8e0281571eaa8347c2b61e18a43e9653260edf6677cdc6c2bde0e42f456586a275e5a61c8b76ec0e75875","href":"https://static.observableusercontent.com/files/1c47efbdf6461395ee6d0a6023a4e68d3cee7b4649b8e0281571eaa8347c2b61e18a43e9653260edf6677cdc6c2bde0e42f456586a275e5a61c8b76ec0e75875","name":"exchange.json","type":"application/json","lastModified":1605809024068.29,"size":109760}] 2f:{"id":"2ade926102130fdc","slug":"graph-visualization","title":"Graph Visualization","thumbnail":"c2e743d5b5269beade13cefc3ea883cd780ca572d977ba03cb0d6c42cae45e5e","access_level":"public","create_time":"$D2020-11-19T18:03:44.068Z","update_time":"$D2022-03-11T23:58:52.382Z","view_time":null,"first_public_time":"$D2020-11-25T22:22:22.683Z","fork":{"id":"055359ac8abfe4ba","slug":"graph-visualization","title":"Graph Visualization","owner":{"id":"dc63de81f2766bde","login":"antonbardera","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"0df0381955bf1da9","login":"x80110","name":"Xavier B.","avatar_url":"https://avatars-next.observableusercontent.com/9c83aa3d8871a7ab7c57218156f38383132193db6157266d478cff07f8af8a0e","tier":"starter_2024"},"version":1076,"publish_version":1076,"role":null,"authored":false,"authors":[{"type":"individual","id":"90f34519f98866f3","login":"x80110","name":"Xavier B.","avatar_url":"https://avatars-next.observableusercontent.com/9c83aa3d8871a7ab7c57218156f38383132193db6157266d478cff07f8af8a0e","tier":null}],"members":[{"type":"individual","id":"90f34519f98866f3","login":"x80110","name":"Xavier B.","avatar_url":"https://avatars-next.observableusercontent.com/9c83aa3d8871a7ab7c57218156f38383132193db6157266d478cff07f8af8a0e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Graph Visualization","cells":[{"id":0,"value":"md`# Graph Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"md`## Data preparation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":277,"value":"md`Today, we will use a dataset from the Kidney Exchange Program of the Spanish National Transplant Organization (properly anonymized and simplified). This program tries to optimize the transplant for those patients who aren't compatible with their donors (usually family members or friends). In this dataset, each node represents a patient-donor pair and the links are given by the compatibilities between patients and donors of the corresponding pairs.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"data = FileAttachment(\"exchange.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":281,"value":"md`As you can see this dataset is composed of an array of nodes and an array of links, but for some applications, you need the dataset as a matrix (or an array of arrays). Next, you can see how can you convert from the former format to the matrix one:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"dataMatrix = {\n let matrix = JSON.parse(JSON.stringify(data.nodes)); //clone the array data.nodes so they are not edited in the origin\n\n for (let i in matrix) {\n matrix[i].connections = new Array(matrix.length).fill(0);\n }\n for (let j in data.links) {\n let source = data.links[j].source;\n let target = data.links[j].target;\n matrix[source].connections[target] = data.links[j].score;\n }\n\n return matrix;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":287,"value":"md`**Daily task**: Could you convert back the dataMatrix array to the original object (with node and link arrays)?` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":294,"value":"nodelinkData = {\n // Create `nodes` array as copy of all data\n let nodes = JSON.parse(JSON.stringify(dataMatrix));\n\n // Loop into `nodes` and remove .connections\n for (let i in nodes) {\n delete nodes[i].connections;\n }\n\n // create `links` empty array\n let links = [];\n\n // -- Get data into `links` array\n\n // Loop each item(j) in data and get `id`\n for (let j in dataMatrix) {\n let source = dataMatrix[j].id;\n\n // Loop into each item(k) into connections of item(j) and get the index (for the target) and the score\n for (let k in dataMatrix[j].connections) {\n let target = k;\n let score = dataMatrix[j].connections[k];\n\n // Remove items where score is 0, therefore not to be analyzed\n if (score !== 0) {\n // Append values to `links` array and adds new items at the end of it\n links.push({ source, target, score });\n }\n }\n }\n // Create an object with both arrays to be returned\n let nldata = { nodes: nodes, links: links };\n return nldata;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":977,"value":"// Utilitzant contador `l = 0` enlloc de push() \n// Creem 'l' perquè l'índex 'k' no acumula el loop anterior, 'l' recull cada iteració dins 'j' i dins 'k' i afegeix +1 al final. \n\nnodelinkData2 = {\n let nodes = JSON.parse(JSON.stringify(dataMatrix));\n\n // remove connections\n for (let i in nodes) {\n delete nodes[i].connections;\n }\n let links = [];\n\n let l = 0;\n\n for (let j in dataMatrix) {\n let source = dataMatrix[j].id;\n for (let k in dataMatrix[j].connections) {\n let target = k;\n let score = dataMatrix[j].connections[k];\n //links.push({ source, target, score });\n if (score > 0) {\n links[l] = { score, target, source };\n l = l + 1;\n }\n }\n }\n let nldata = { nodes: nodes, links: links };\n return nldata;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"md`## Adjacency matrix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":229,"value":"md`A basic method to show relationships between data elements is the adjacency matrix.\nAdjacency matrices encode nodes as rows and columns, and the intersection cell shows their relationship. This kind of visualization is optimal for small and dense networks, where other techniques such as node-link visualizations suffer from overlapping. On the other hand, this technique isn't well-suited for tasks on paths and for visualizing trees. A good discussion on the usage of this kind of visualization (and other network visualization techniques) can be found on [this page](https://vdl.sci.utah.edu/mvnv/techniques/adj-matrix/) from the Visualization Design Lab.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"md`Based on this [notebook](https://observablehq.com/@bstaats/matrix-diagram), the code has been adapted for the Kidney Exchange Program data, by grouping the data by the patient blood type and, as a secondary criterion, the donor blood type.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":178,"value":"colorScale = d3.scaleOrdinal(d3.schemeCategory10);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"\nopacity = d3.scaleLinear()\n .domain([0, d3.max(dataMatrix, function (d) { return d3.max(d.connections); })])\n .range([0.25, 1])\n .clamp(true);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"x = d3.scaleBand()\n .rangeRound([margin.left, width-margin.right])\n .domain(d3.range(dataMatrix.length))\n .paddingInner(0.1)\n .align(0);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"md`## Node-link visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":209,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"drag = simulation => {\n \n function dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\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 event.subject.fx = null;\n event.subject.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeCategory10);\n return d => scale(d.bloodType);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":246,"value":"linkcolor = d3.scaleSequential(d3.interpolateViridis)\n .domain(d3.extent(data.links.map(d=>d.score)));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":354,"value":"linkScale = d3.scaleLinear()\n .domain(d3.extent(data.links.map(d=>d.score)))\n .range([150,100]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":362,"value":"md`**Daily task**: Add a tooltip to the node-link chart to show the most relevant information of the nodes.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1036,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"height = 900;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"width = 900;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"margin = ({top: 50, right: 50, bottom: 50, left: 50});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"d3 = require(\"d3@6\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"