2b:null 2c:["$","title",null,{"children":"Adjacency Matrix Brush | Arogya Koirala | Observable"}] 31:T14d8,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") .style("cursor", "pointer") .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 > 0.7 ? 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(); }32:[{"id":"40b2e6dcfe73bff471059f57923c3ad4da65e727cb79997f41ce36f18144f7b6267b51598c2cc44c606d55f8d347afbcff4556351f0af6a469b328ba2310504d","href":"https://static.observableusercontent.com/files/40b2e6dcfe73bff471059f57923c3ad4da65e727cb79997f41ce36f18144f7b6267b51598c2cc44c606d55f8d347afbcff4556351f0af6a469b328ba2310504d","name":"distances-4.csv","type":"text/csv","lastModified":1683348602613.305,"size":13526},{"id":"1366bed17bbb22bb4305cdfac7fb03cacdc7533d6318aa30339af99d39c835a93c497f54d98669d653a7d63e24a661e7a700913e798c02cf70b5be2fc9688527","href":"https://static.observableusercontent.com/files/1366bed17bbb22bb4305cdfac7fb03cacdc7533d6318aa30339af99d39c835a93c497f54d98669d653a7d63e24a661e7a700913e798c02cf70b5be2fc9688527","name":"distances.csv","type":"text/csv","lastModified":1683348645055.71,"size":20879}] 2f:{"id":"22906c33b25b256b","slug":null,"title":"Adjacency Matrix Brush","thumbnail":"8818cd95c393d93d0f4e368f2b21bc92244a3b7f60450b80e6c8abbc157ae0c1","access_level":"public","create_time":"$D2023-05-06T04:50:00.801Z","update_time":"$D2023-05-06T04:57:26.287Z","view_time":null,"first_public_time":"$D2023-05-06T04:50:00.801Z","has_unpublished_edits":null,"fork":{"id":"74abd3ea0ca2694b","slug":"adjacency-matrix-brush","title":"Adjacency Matrix Brush","owner":{"id":"5a4a698e1d2f65f5","login":"jannespeeters","name":"Jannes Peeters"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3eb6175bfef7a73a","login":"akoirala","name":"Arogya Koirala","avatar_url":"https://avatars-next.observableusercontent.com/a49e3c1e1711d4b1515f7df765b7a0faaac424a417af48a5fad9be5b3e748720","tier":"starter_2024"},"version":312,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f16655bda0a03677","login":"akoirala","name":"Arogya Koirala","avatar_url":"https://avatars-next.observableusercontent.com/a49e3c1e1711d4b1515f7df765b7a0faaac424a417af48a5fad9be5b3e748720","tier":null}],"members":[{"type":"individual","id":"f16655bda0a03677","login":"akoirala","name":"Arogya Koirala","avatar_url":"https://avatars-next.observableusercontent.com/a49e3c1e1711d4b1515f7df765b7a0faaac424a417af48a5fad9be5b3e748720","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"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":"$31","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_Orig = {\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 {\n const final = []\n data.forEach(row => {\n const r = []\n Object.keys(row).forEach(d => {\n if(isNaN(d)) {\n // console.log(d)\n } else {\n r.push(row[d]);\n console.log(d)\n \n }\n })\n final.push(r)\n \n})\nreturn final}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import {headers as labels} from \"@jannespeeters/chord-ribbon-diagram\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"labels","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md `## Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"color = d3.scaleSequential(d3.interpolateBlues)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"import {adjacencyMatrix} from \"@jannespeeters/simple-adjacency-matrix\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`## Constants`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"margin = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"size = 26","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"d3 = require(\"d3@v6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"distances4 = await FileAttachment(\"distances.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"distances4","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"