31:Tdd1,function drawGraph(raw) { // for Observable Cell const wrapper = html`

`; const container = html`

` wrapper.appendChild(container); const force_data = { nodes: processNodes(raw), edges: processLinks(raw) } const degreeData = findDegree(force_data.edges) const setEdgesCurOffset = (edges, offsetDiff = 30) => { const len = edges.length; const edgeMap = {}; edges.forEach(edge => { const { source, target } = edge; let sourceTarget = `${source}-${target}`; if (source > target) sourceTarget = `${source}-${target}`; if (!edgeMap[sourceTarget]) { edgeMap[sourceTarget] = [] } edgeMap[sourceTarget].push(edge); }); for (const key in edgeMap) { const arcEdges = edgeMap[key]; const { length } = arcEdges; for (let k = 0; k < length; k++) { const current = arcEdges[k]; const sign = k % 2 === 0 ? 1 : -1; if (length % 2 === 1) { current.curveOffset = sign * Math.ceil(k / 2) * offsetDiff; } else { current.curveOffset = sign * (Math.floor((k) / 2) * offsetDiff + offsetDiff / 2); } delete current.groupById; } } return edges; }; // Demo Code const graph = new G6.Graph({ // container container, // graph size width: width, height: 600, // layout method layout: { type: 'force', preventOverlap: true, nodeStrength: -100 }, defaultNode: { color: 'black', style: { fill: 'transparent', lineWidth: 1, } }, defaultEdge: { type: 'quadratic' } }); const data = force_data; setEdgesCurOffset(data.edges); const colors = [ '#BDD2FD', '#BDEFDB', '#C2C8D5', '#FBE5A2', '#F6C3B7', '#B6E3F5', '#D3C6EA', '#FFD8B8', '#AAD8D8', '#FFD6E7', ]; const colorScale = d3.scaleOrdinal() .domain(d3.range(0,6)) .range(colors) const widthScale = d3.scaleSqrt() //.domain([0,d3.max(data.edges, d=> d.weight)]) .domain([0, 150000]) .range([0.5,10]) const radiusScale = d3.scaleSqrt() //.domain([0,d3.max(degreeData, d=> d.value)]) .domain([0, 220]) .range([1,55]) // process data data.edges.forEach(function(edge) { edge.color = colorScale(edge.type) edge.size = edge.weight < 0 ? 1 : widthScale(edge.weight) }); data.nodes.forEach(function(node) { let degree = degreeData.find(d=>d.key === node.id).value node.size = radiusScale(degree) if (!node.labelCfg) { node.labelCfg = { style: { fill: '#000', fontSize: 8, } } } if(degree < 50){ node.labelCfg.position = "bottom", node.labelCfg.offset = 2 } else { node.labelCfg.position = "center", node.labelCfg.offset = 0 } }); // load data graph.data({ nodes: data.nodes, edges: data.edges }); // render graph.render(); // interactions graph.on('node:dragstart', function(e) { graph.layout(); refreshDragedNodePosition(e); }); graph.on('node:drag', function(e) { refreshDragedNodePosition(e); }); graph.on('node:dragend', function(e) { e.item.get('model').fx = null; e.item.get('model').fy = null; }); function refreshDragedNodePosition(e) { const model = e.item.get('model'); model.fx = e.x; model.fy = e.y; } return wrapper }32:[{"id":"2f7c690842a3200bd56e2c0b7e7214282e5bca7207ae6a0764f8cdfe9f5c1e7def5e2b65280b55830ab31aa0034fb47a2998a49fc959e8ae8665f3368809264f","href":"https://static.observableusercontent.com/files/2f7c690842a3200bd56e2c0b7e7214282e5bca7207ae6a0764f8cdfe9f5c1e7def5e2b65280b55830ab31aa0034fb47a2998a49fc959e8ae8665f3368809264f","name":"CGCS-Template.csv","type":"text/csv","lastModified":1596993055368.555,"size":39441},{"id":"6178272ec427142e26f978838ce85038c1dc67446cfd0b138f9dc84e8406fa6eac36fa2cc13b1b1a035beb7d5db5df42dd253d09a7423b97ee18baa7e872266e","href":"https://static.observableusercontent.com/files/6178272ec427142e26f978838ce85038c1dc67446cfd0b138f9dc84e8406fa6eac36fa2cc13b1b1a035beb7d5db5df42dd253d09a7423b97ee18baa7e872266e","name":"Q1-Graph1.csv","type":"text/csv","lastModified":1596993547249.31,"size":50608},{"id":"29041a2782c92d2b60708f8b49b1b7943c0dbbae362e59a8974e9235b2fa926055753af815555c4eaadb553fb3640f674d4b5f20d3eded894ffb79e6edbde55c","href":"https://static.observableusercontent.com/files/29041a2782c92d2b60708f8b49b1b7943c0dbbae362e59a8974e9235b2fa926055753af815555c4eaadb553fb3640f674d4b5f20d3eded894ffb79e6edbde55c","name":"Q1-Graph2.csv","type":"text/csv","lastModified":1597055018549.354,"size":54588},{"id":"1943cdf1334c8b933bbe0ddc20604ddb6a5ed0e89691c859633f37c61a1f0d883f231d602aaf55ca4ef3c276c89625d8af473aebdb67d16ab0a50424dda9cfa7","href":"https://static.observableusercontent.com/files/1943cdf1334c8b933bbe0ddc20604ddb6a5ed0e89691c859633f37c61a1f0d883f231d602aaf55ca4ef3c276c89625d8af473aebdb67d16ab0a50424dda9cfa7","name":"Q1-Graph3.csv","type":"text/csv","lastModified":1597055037140.517,"size":29719},{"id":"00c4e6491a1afc657d8396a2be3b480387449135cc979f0c7275a08ac6d20a30eecf5beef8b2516669e62054fa1e4fa75dcf9d2823fd19f7332d8f3be0866215","href":"https://static.observableusercontent.com/files/00c4e6491a1afc657d8396a2be3b480387449135cc979f0c7275a08ac6d20a30eecf5beef8b2516669e62054fa1e4fa75dcf9d2823fd19f7332d8f3be0866215","name":"Q1-Graph4.csv","type":"text/csv","lastModified":1597055052620.622,"size":31054},{"id":"08df556121318c50fb9e85a5945827c7bc8e6a9345b9cf49e114ea53a1490ba3ad6ebfe529400f4fd26f24d25d20cd15c2b53537308d110113186e1aa6a42cfe","href":"https://static.observableusercontent.com/files/08df556121318c50fb9e85a5945827c7bc8e6a9345b9cf49e114ea53a1490ba3ad6ebfe529400f4fd26f24d25d20cd15c2b53537308d110113186e1aa6a42cfe","name":"Q1-Graph5.csv","type":"text/csv","lastModified":1597055120623.257,"size":16527}] 2f:{"title":"G6 Test","cells":[{"id":0,"value":"md`# G6 Test`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"md `\nHere is a demo of a graph with force-directed layout powered by G6 for getting started quickly.\n\n[G6](https://github.com/antvis/G6) is an open source engine for graph visualization and analysis, which focuses on relational data. \n\nWelcome to **star** our GitHub: https://github.com/antvis/G6\n\nOur website: https://g6.antv.vision/en/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"md `## Step 1: Require Dependency`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"G6 = require('@antv/g6');","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"md `## Step 2: Data Processing Helper Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"function processNodes(data) {\n let nodes = []\n let ids_1 = data.map(d=>d['Source'])\n let ids_2 = data.map(d=>d['Target'])\n let nodeIDs = ids_1.concat(ids_2).filter(onlyUnique)\n nodeIDs.sort()\n nodeIDs.forEach((d,i) => {\n //if(d){\n let epoch = data.find(el=>el['Source'] === d | el['Target'] === d)['Time']\n nodes.push({\n id : d.toString(),\n date: epoch,\n label: d.toString()\n })\n //}\n })\n console.log(nodes)\n return nodes\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"function processLinks(data) {\n let links = []\n data.map((d,i) => {\n links.push({\n id : d['Source'] + '-' + d['Target'] + '-' + i,\n date : d['Time'],\n source : d['Source'].toString(),\n target : d['Target'].toString(),\n weight: d['Weight'],\n type: d['eType']\n })\n })\n\n return links\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"function findDegree(links) {\n\n const linksTarget_nested = d3.nest()\n .key(function (d) {\n return d.target\n })\n .rollup(function (leaves) {\n return leaves.length\n })\n .entries(links)\n\n const linksSource_nested = d3.nest()\n .key(function (d) {\n return d.source\n })\n .rollup(function (leaves) {\n return leaves.length\n })\n .entries(links)\n\n const linksNested = []\n linksTarget_nested.forEach(function (d, i) {\n linksNested.push({ key: d.key, value: d.value })\n })\n linksSource_nested.forEach(function (d, i) {\n linksNested.push({ key: d.key, value: d.value })\n })\n\n const linkAllNodes = d3.nest()\n .key(function (d) {\n return d.key\n })\n .rollup(function (leaves) {\n return d3.sum(leaves, (d) => d.value)\n })\n .entries(linksNested)\n\n return linkAllNodes\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"function onlyUnique(value, index, self) {\n return self.indexOf(value) === index\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"md `## Step 3: Create Container and Configure Graph`","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"md`

TEMPLATE SUBGRAPH

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"template_data = d3.csvParse(await FileAttachment(\"CGCS-Template.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"drawGraph(template_data) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"md`COMPARING CANDIDATE SUBGRAPHS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"viewof value = select({\n title: \"Candidate Subgraph\",\n description: \"Please choose a candidate subgraph to render.\",\n options: [\n { value: \"Q1-Graph1.csv\", label: 'Subgraph 1' },\n { value: \"Q1-Graph2.csv\", label: 'Subgraph 2' },\n { value: \"Q1-Graph3.csv\", label: 'Subgraph 3' },\n { value: \"Q1-Graph4.csv\", label: 'Subgraph 4' },\n { value: \"Q1-Graph5.csv\", label: 'Subgraph 5' }\n ],\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"files = [\n FileAttachment(\"Q1-Graph1.csv\"),\n FileAttachment(\"Q1-Graph2.csv\"),\n FileAttachment(\"Q1-Graph3.csv\"),\n FileAttachment(\"Q1-Graph4.csv\"),\n FileAttachment(\"Q1-Graph5.csv\")\n].reduce((o, f) => (o[f.name] = f, o), {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"graph1_data = d3.csvParse(await files[value].text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"drawGraph(graph1_data) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}