2d:null 2e:["$","title",null,{"children":"Adjacency Matrix Brush | Jannes Peeters | Observable"}] 33:T13aa,chart = { const matrixLayout = adjacencyMatrix() .size([width/2 - margin,height-margin]); const data = matrixLayout(labels, inputMatrix); let dataFiltered = data; color.domain([0, d3.max(data, d => d.value)]); const svg = d3.create("svg").attr("width",width).attr("height",height); const chart_adj = svg.append("g").attr("transform", `translate(${[margin/2,margin/2]})`); const chart_graph = svg.append("g").attr("transform", `translate(${[width/2 + margin/2, margin/2]})`); drawNetwork(data); const brush = d3.brush().on("brush end", detail); const innerChart = chart_adj.append('g').attr('class','innerChart'); const cell = innerChart .selectAll("g.cell") .data(data).join("g") .attr("class", "cell") .attr("transform", d => `translate(${[d.x,d.y]})`); cell.append("rect") .attr("height", d => d.h*.95) .attr("width", d => d.w*.95) .attr("rx",d => d.w/4) .attr("ry", d => d.h/4) .style("fill", d => d.value ? color(d.value) : 'white'); chart_adj.append('g').attr('class', 'labels') .selectAll('text.source') .data(data.filter(d => d.x == 0)) .enter() .append("text").attr("class",'source') .attr("y", d => d.y + d.h/2) // using d.y and d.h .attr("x", -15) .text((d,i) => labels[i]); chart_adj.append('g').attr('class', 'labels') .selectAll('text.target') .data(data.filter(d => d.y == 0)) .enter() .append("text").attr("class",'target') .attr("x", d => d.x + d.w/2) // using d.x and d.w .attr("y", -10) .text((d,i) => labels[i]); chart_adj.selectAll("text") .style("font-family", "Arial, sans-serif") .style("text-anchor", "middle") .style("alignment-baseline", "middle"); innerChart.call(brush); // Brush function detail({selection}) { if (selection) { const [[x0, y0], [x1, y1]] = selection; dataFiltered = data.filter(d => x0 <= d.x && d.x < x1 && y0 <= d.y && d.y < y1 || x0 <= (d.x + d.w) && d.x < x1 && y0 <= (d.y + d.h) && d.y < y1); cell.filter(d => !(x0 <= d.x && d.x < x1 && y0 <= d.y && d.y < y1 || x0 <= (d.x + d.w) && d.x < x1 && y0 <= (d.y + d.h) && d.y < y1)).style("opacity", .3); cell.filter(d => x0 <= d.x && d.x < x1 && y0 <= d.y && d.y < y1 || x0 <= (d.x + d.w) && d.x < x1 && y0 <= (d.y + d.h) && d.y < y1).style("opacity", 1); } else { dataFiltered = data; cell.style("opacity", 1); } drawNetwork(dataFiltered); } 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() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); } function drawNetwork(data) { // clear svg chart_graph.selectAll('g').remove(); // Transform data const links_temp = data.filter(r => r.source); const nodes_temp = data.map(d => d.source).concat(data.map(d => d.target)).filter((v, i, a) => a.indexOf(v) === i).filter(r => r); let nodes_temp2 = []; for (let i = 0; i < nodes_temp.length; i++) { nodes_temp2.push({node: nodes_temp[i]}); } const networkData = {nodes: nodes_temp2, links: links_temp} const links = networkData.links.map(d => Object.create(d)); const nodes = networkData.nodes.map(d => Object.create(d)); const sim = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.node).distance(250)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width/4 - margin/2, height/ 2 - margin/2)); const link = chart_graph.append("g") .selectAll("line") .data(links) .join("line") .attr("stroke", d => color(d.value)) .attr("stroke-opacity", 0.5) .attr("stroke-width", d => Math.sqrt(d.value)); const node = chart_graph.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", 8) .attr("fill", d3.color("#343434")) .call(drag(sim)); node.append("title") .text(d => d.node); sim.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); }); } // Return SVG return svg.node(); }34:[] 31:{"id":"74abd3ea0ca2694b","slug":"adjacency-matrix-brush","title":"Adjacency Matrix Brush","thumbnail":"8522e80832640726e9e4590ab39c3e33c2088a4a99b768a7e304ff7afad1e742","access_level":"public","create_time":"$D2021-02-09T12:23:35.789Z","update_time":"$D2021-12-16T12:55:51.838Z","view_time":null,"first_public_time":"$D2021-02-09T19:41:59.699Z","has_unpublished_edits":null,"fork":false,"stars":39,"starred":false,"owner":{"type":"team","id":"5a4a698e1d2f65f5","login":"jannespeeters","name":"Jannes Peeters","avatar_url":"https://avatars-next.observableusercontent.com/99ac2225c1f36fb1b6b9d965f4a954690ad15faae93229c2666e2c79dbd6a89a","tier":"starter_2024"},"version":267,"publish_version":267,"role":null,"authored":false,"authors":[{"type":"individual","id":"7c5c5e2c534c5282","login":"jannespeeters","name":"Jannes Peeters","avatar_url":"https://avatars-next.observableusercontent.com/4c0cb01d4a5b294df53ea92eda6558fcf8672ae0d6fb0a1cbebe3783a96afe76","tier":null}],"members":[{"type":"individual","id":"7c5c5e2c534c5282","login":"jannespeeters","name":"Jannes Peeters","avatar_url":"https://avatars-next.observableusercontent.com/4c0cb01d4a5b294df53ea92eda6558fcf8672ae0d6fb0a1cbebe3783a96afe76","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":32,"collection":null,"type":"notebook","body":{"title":"Adjacency Matrix Brush","cells":[{"id":0,"value":"md`# Adjacency Matrix Brush`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"md `A major problem within network visualization is the occurance of hairball like graphs, from which no information at all can be extracted. This module allows to brush through the adjacency matrix of the network to visualize smaller sub-graphs of the network, allowing the user to gain more insight in specific parts of the network. The network visualization is a tweeked version of the [Force-Directed Graph](https://observablehq.com/@d3/force-directed-graph) by Mike Bostock. The data is a random generated adjacency matrix of an undirected network.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"inputMatrix = {\n let matrix = [];\n for (let j = 0; j < size; j++) {\n let Arr = [];\n for (let i = 0; i < (j + 1); i++) {\n Arr.push(Math.floor(Math.random() * 10 + 1))\n }\n matrix.push(Arr)\n }\n for (let i = 0; i < size; i++) {\n matrix[i][i] = 0;\n }\n for (let j = 0; j < size; j++) {\n for (let i = j+1; i