2c:null 2d:["$","title",null,{"children":"7. Constructing Queer Collectivities, Part 2: The Network | Kalle Westerling | Observable"}] 32:T1280,graph = { replay; const reset = () => { // function that resets the visuals to what they're supposed to be // it is also run at the start of the visualization. node .attr("fill", d => displayHelpers.getNodeFill(d)) .attr("r", d => d.r) .attr("opacity", 1); link .attr("opacity", 1) .attr("stroke", d => displayHelpers.getStroke(d)) text .text(d => textLabels.includes(d) ? d.id : '') .attr("opacity", 1) .attr("font-size", d => displayHelpers.getTextSize(d)) .classed("selected", false); mutable selectedNode = null; simulation.restart(); } const highlight = (evt, highlightedNode) => { simulation.stop(); if (!highlightedNode.neighbors.length) throw new Error('All nodes should have neighbors.') // set selectedNode to the highlighted node mutable selectedNode = highlightedNode; // set opacities.correct node.attr("opacity", n => displayHelpers.nodeOpacity(n, highlightedNode)) link.attr("opacity", l => displayHelpers.linkOpacity(l, highlightedNode)); // fix texts text .attr("opacity", n => displayHelpers.nodeOpacity(n, highlightedNode)) .text(n => displayHelpers.linkText(n, highlightedNode)) .classed("selected", n => n === highlightedNode); switch (evt.type) { case "click": if (!svg.classed("frozen")) { console.log('locking down...') displayHelpers.lockNodeLocations(highlightedNode) svg.classed("frozen", true); } else { console.log('already locked') console.log(svg.classed("frozen")) displayHelpers.resetNodeLocations(node); svg.classed("frozen", false); } break; case "mouseover": break; } } // constants const height = 1000, // collidePadding = 2, svg = d3.create("svg"); // filter nodes + links const links = filtered.links; const nodes = filtered.nodes; const simulation = d3.forceSimulation(nodes); // style svg svg .attr("height", height) .attr("width", width) .attr("id", "network") .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); // add elements const zoomRect = svg .append("rect") .attr("width", width * 2) .attr("height", height * 2) .attr("x", -width) .attr("y", -height) .style("fill", "none") .on("click", () => { svg.classed("frozen", false) displayHelpers.resetNodeLocations(node); simulation.restart(); }) .style("pointer-events", "all"); const g = svg .append("g") .attr("id", "main"); const link = g .append("g") .attr("id", "links") .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => d.weight) const node = g .append("g") .attr("id", "nodes") .selectAll("circle") .data(nodes) .join("circle") .attr("cx", -width) .attr("cy", -height) .on("mouseover", (evt, d) => { // tooltip.show(evt, d); if (!svg.classed("frozen")) highlight(evt, d); }) .on("click", (evt, d) => { highlight(evt, d); }) .on("mouseout", (evt, d) => { // text.attr("style", "display:none") if (!svg.classed("frozen")) reset(); }) .call(displayHelpers.drag(simulation)); const textLabels = viewSettings.labelSize > 0 ? filtered.nodes.filter(d=>d.neighbors.length > viewSettings.minDisplayLabel) : []; const text = g .append("g") .attr("id", "labels") .selectAll("text") .data(nodes) .join("text") reset(); // tick action function ticked() { 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); text .attr("x", d => d.x) .attr("y", d => d.y + d.r/2); } //zoom zoomRect.call(displayHelpers.zoom, width / 2, height / 2); if (invalidation != null) invalidation.then(() => simulation.stop()); simulation .force("link", displayHelpers.forceData.forceLink) .force("charge", displayHelpers.forceData.forceNode) .force("x", displayHelpers.forceData.forceX) .force("y", displayHelpers.forceData.forceY) .force("center", d3.forceCenter().strength(0.05)) .force("cluster", displayHelpers.forceData.forceCluster) .force("collide", displayHelpers.forceData.forceCollide) .on("tick", ticked); // done, simulation.restart() // svg.append(() => tooltip.node); return svg.node(); }33:T57a,selectedNode ? html`

${selectedNode.id} (other highlighted nodes are ${ filtered.currentHighlight === 'neighbor' ? 'the node\'s neighbors' : 'the node\'s community' })

Cluster ${selectedNode.cluster} (${viewSettings.algorithm})

Current neighbors: ${selectedNode.neighbors.length}
Degree: ${selectedNode.degrees.degree} (in ${selectedNode.degrees.indegree} / out ${selectedNode.degrees.outdegree})
Centralities:

Degree: ${selectedNode.centralities.degree_centrality_100x.toFixed(3)}
Betweenness: ${selectedNode.centralities.betweenness_centrality_100x.toFixed(3)}
Eigenvector: ${selectedNode.centralities.eigenvector_centrality_100x.toFixed(3)}
Closeness: ${selectedNode.centralities.closeness_centrality_100x.toFixed(3)}

` : html`

No node selected. Hover over, click, or drag a node to see more information about it.

`34:T422,35:T11dd,displayHelpers = { // forces const forceData = {} // calculate forces with the following padding for collisions: const collidePadding = 2; const clustering = (alpha) => { const strength = 1.2; alpha *= strength * alpha; filtered.nodes.forEach((d) => { const cluster = filtered.clusters[d.cluster]; if (cluster === d) return; let x = d.x - cluster.x; let y = d.y - cluster.y; let l = Math.sqrt(x * x + y * y); const r = d.r + cluster.r; if (l !== r) { l = ((l - r) / l) * alpha; d.x -= x *= l; d.y -= y *= l; cluster.x += x; cluster.y += y; } }); }; forceData.forceNode = d3.forceManyBody().strength(forces.nodeStrength); forceData.forceLink = d3.forceLink(filtered.links).id(d=>d.id).strength(forces.linkStrength); forceData.forceCenter = d3.forceCenter(0, 0).strength(forces.centerStrength) forceData.forceCluster = clustering; forceData.forceCollide = forces.collide.length? d3.forceCollide().radius(d=>d.r + collidePadding) : undefined; forceData.forceX = d3.forceX().strength(forces.xStrength); forceData.forceY = d3.forceY().strength(forces.yStrength); // zoom function zoomed(evt) { d3.select('g#main').attr("transform", evt.transform); } const zoom = d3 .zoom() .scaleExtent([1 / 4, 64]) .on("zoom", zoomed); // drag function drag(simulation) { function dragstarted(event) { // if (!event.active) simulation.alphaTarget(0.3).restart(); d3.select("svg#network").classed("dragging", true); 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); d3.select("svg#network").classed("frozen", true).classed("dragging", false); // event.subject.fx = null; // event.subject.fy = null; } return d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); }; // helpers to get the visuals correct in the network viz function getNodeFill(d, links=filtered.links) { switch (highDategroup.on) { case "dategroup": if (links.filter(l=>l.source.id === d.id || l.target.id === d.id).filter(l=>l.weights.dateGroups > 2).length> 0) { return highDategroup.color; } else { return "lightgray" } break; } return d.fill; }; function getStroke(d) { switch (highDategroup.on) { case "dategroup": if (d.weights.dateGroups > 2) { return highDategroup.color; } else { return "lightgray" } break; } return "#999"; }; const getTextSize = (d) => d.r * viewSettings.labelSize/100 * 2; function nodeOpacity(node, cmp, nodes = filtered.nodes) { if (interaction.mouseover === "community") { if (nodes.filter(n=>n.cluster === cmp.cluster).includes(node)) return 1; return 0.1; } else { if (cmp.neighbors.includes(node.id) || node.id === cmp.id) return 1; return 0.1; } }; function linkOpacity(link, cmp) { if (interaction.mouseover === "community") { if (cmp.cluster === link.source.cluster && cmp.cluster === link.target.cluster) return 1 return 0.1 } else { if ( (link.source.id === cmp.id && cmp.neighbors.includes(link.target.id)) || (link.target.id === cmp.id && cmp.neighbors.includes(link.source.id)) ) return 1; return 0.1; } }; function resetNodeLocations(node) { // resets d.fx and d.fy on each node // returns nothing node.each(d=>{ d.fx = null; d.fy = null; }) } function lockNodeLocations(node) { // set d.fx and d.fy on a given node to current d.x and d.y. // returns nothing console.log('setting node fx/fy') node.fx = node.x; node.fy = node.y; } function linkText(node, cmp, nodes = filtered.nodes) { if (interaction.mouseover === "community") { if (nodes.filter(n=>n.cluster === cmp.cluster).includes(node)) return node.id; return ''; } else { if (cmp.neighbors.includes(node.id) || node.id === cmp.id) return node.id; return ''; } } return { forceData, zoom, drag, getNodeFill, getStroke, getTextSize, nodeOpacity, linkOpacity, resetNodeLocations, lockNodeLocations, linkText } }36:T503,optionHelpers = { const selectedNode = undefined; const settingsStyle = ` padding-left:20px; border-left:10px solid lightgray; `; const highlightOptionsObj = { 'Highlights nearest neighbors': 'neighbor', 'Highlights community detected': 'community' } const highlightOptions = new Map(Object.entries(highlightOptionsObj)); const scales = new Map([["Square root", "scaleSqrt"], ["Power", "scalePow"], ["Linear", "scaleLinear"]]); const datasets = { '3-day spans': network3, '14-day spans': network14, } const colors = ["interpolateRainbow"] const communityDetectionAlgorithms = ["jLouvain", "Louvain", "Clauset-Newman-Moore"] const nodeTableSettings = ({ sort: 'Degree', reverse: true, width: { 'Name': 200, } }); const edgeTableSettings = ({ sort: 'Dategroups', reverse: true, /* width: { 'Dategroups': 80, 'Revues': 80, 'Cities': 80, 'Nightclubs': 80, 'Earliest relation': 120, 'Latest relation': 120 } */ }) return { datasets, highlightOptionsObj, highlightOptions, scales, colors, communityDetectionAlgorithms, nodeTableSettings, edgeTableSettings, settingsStyle, selectedNode } }37:Tda4,store = { const getjLouvain = (nodes, links) => { const nodeList = nodes.map(d=>d.id); const linkList = links.map(d=>{ const source = typeof d.source === "string" ? d.source : d.source.id; const target = typeof d.target === "string" ? d.target : d.target.id; return { source, target, weight: d.weight } }); return jLouvain().nodes(nodeList).edges(linkList)(); } const getNodeOverview = (nodes) => { return nodes.map(d=>({ 'Name': d.display, 'Degree': d.degrees.degree, 'Current T degree': d.degrees.currentDegreeAsTarget, 'Current S degree': d.degrees.currentDegreeAsSource, 'Network ID': d.connected.network.network_id, '✸ Louvain': d.modularities.Louvain, '✸ CNM': d.modularities['Clauset-Newman-Moore'], '✸ jLouvain': d.modularities.Louvain, '⦿ Degree': d.centralities.degree_centrality_100x, '⦿ Betweenness': d.centralities.betweenness_centrality_100x, '⦿ Eigenvector': d.centralities.eigenvector_centrality_100x, '⦿ Closeness': d.centralities.closeness_centrality_100x, })); } const getEdgeOverview = (links) => { return links.map(d=>({ 'Performer #1': typeof d.source === 'string' ? d.source : d.source.id, 'Performer #2': typeof d.target === 'string' ? d.target : d.target.id, 'Dategroups': d.weights.dateGroups, 'Revues': d.revues.length, 'Cities': d.cities.length, 'Nightclubs': Object.keys(d.coLocated).length, 'Earliest relation': d3.min(d.found), 'Latest relation': d3.max(d.found) })); } const dataset = optionHelpers.datasets[main.dataset]; const nodes = dataset.nodes; let links = dataset.links; // fix links links = links.map(d=>{ const startDate = moment(d3.min(d.found)); const endDate = moment(d3.max(d.found)); const duration = moment.duration(endDate.diff(startDate)); const days = duration.as('days'); const weight = d.weights.dateGroups * 0.5; if (typeof d.source === "string") { d.source = nodes.find(n=>n.id === d.source) } if (typeof d.target === "string") { d.target = nodes.find(n=>n.id === d.target) } return Object.assign({ startDate, endDate, duration, days, weight }, d)}); const community = getjLouvain(nodes, links); nodes.map(d=>d.modularities.jLouvain = community[d.id]); const nodeIDs = nodes.map(d=>d.id); const edgeOverview = getEdgeOverview(links); const nodeOverview = getNodeOverview(nodes); const networkComponents = d3.group(nodeOverview, d=>d['Network ID']); const giantComponentSize = nodeOverview.filter(d=>d['Network ID'] === 1).length; const rSizing = new Map([ ["Overall degree", d => d.degrees.degree], ["Degree in current network", d => d.degrees.currentDegree], ["Centrality measures", ''], ["Betweenness", d => d.centralities.betweenness_centrality_100x], ["Closeness", d => d.centralities.closeness_centrality_100x], ["Degree", d => d.centralities.degree_centrality_100x], ["Eigenvector", d => d.centralities.eigenvector_centrality_100x], ]) const ranges = {} ranges.years = d3.extent(links.map(d=>+d.startDate.format('YYYY'))) ranges.degrees = d3.extent(nodes.map(d=>d.degrees.degree)) return { networkComponents, giantComponentSize, dataset, nodes, links, edgeOverview, nodeOverview, nodeIDs, rSizing, ranges, getNodeOverview, getEdgeOverview, getjLouvain } }38:Tbbd,filtered = { // quick access to all filtered data // functions const getLinkIDs = (linkList) => { const linkSources = linkList.map(l => typeof l.source === "string" ? l.source : l.source.id) const linkTargets = linkList.map(l => typeof l.target === "string" ? l.target : l.target.id) return [...new Set([...linkSources, ...linkTargets])]; }; const [startYear, endYear] = filters.yearRange; const [startYearMoment, endYearMoment] = [moment(`${startYear}-01-01`), moment(`${endYear}-12-31`)]; const links = store.links.map(d=>{ const minDegreeSource = d.source.degrees.degree >= filters.minDegree; const minDegreeTarget = d.target.degrees.degree >= filters.minDegree; const passes = { startYear: d.startDate >= startYearMoment, endYear: d.endDate <= endYearMoment, minDegreeSource, minDegreeTarget } return Object.assign(d, {passes}); }) .filter(d=>Object.values(d.passes).every(d=>d)); const linkIDs = getLinkIDs(links); const nodes = store.nodes.filter(d=>linkIDs.includes(d.id)); // community const community = store.getjLouvain(nodes, links); const clusters = {}; nodes.map(d => { d.modularities['jLouvain'] = community[d.id] + 1; // set final .cluster on each node d.cluster = d.modularities[viewSettings.algorithm]; // add info to overall graph data if (!clusters[d.cluster] || d.r > clusters[d.cluster].r) clusters[d.cluster] = d; return d; }); // scales const scales = {}; scales.r = d3[viewSettings.nodeScaleR]() .range([2, viewSettings.maxNodeSize]) .domain([d3.min(nodes, viewSettings.nodeSizing), d3.max(nodes, viewSettings.nodeSizing)]); scales.nodeColor = d3 .scaleLinear() .range([0, 1]) .domain(d3.extent(nodes.map((node) => node.cluster))); // setup final information for nodes + links const targets = _.countBy(links.map(d=>d.target.id)); const sources = _.countBy(links.map(d=>d.source.id)); nodes.map(d=>{ d.degrees.currentDegreeAsTarget = targets[d.id]; d.degrees.currentDegreeAsSource = sources[d.id]; return Object.assign(d, { r: scales.r(viewSettings.nodeSizing(d)), fill: d3[viewSettings.colorWheel](scales.nodeColor(d.cluster)) }) }); // neighbors const neighbors = {} nodes.forEach(d => { const relatedLinks = links.filter(l => l.source.id === d.id || l.target.id === d.id); neighbors[d.id] = [...new Set(relatedLinks.map(l=>l.source.id !== d.id ? l.source.id : l.target.id))] d.neighbors = neighbors[d.id]; }); const nodeOverview = store.getNodeOverview(nodes); let currentHighlight = [] optionHelpers.highlightOptions.forEach((value, key) => interaction.mouseover === value ? currentHighlight.push([key, value]) : undefined); currentHighlight = currentHighlight[0][1]; return { links, nodes, community, nodeOverview, neighbors, currentHighlight, clusters // nodeList, linkList, linkIDs, scales } }39:[] 30:{"id":"b17cb75bf404aa90","slug":"constructing-queer-collectivities-the-network","title":"7. Constructing Queer Collectivities, Part 2: The Network","thumbnail":"fd02bc44ab9e8950c871bf75131ced27d440959063fb2ac6562e13cbe2207985","access_level":"public","create_time":"$D2022-01-08T13:04:05.388Z","update_time":"$D2022-01-21T18:27:23.696Z","view_time":null,"first_public_time":"$D2022-01-09T12:35:52.527Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"32362545e9f3330d","login":"kallewesterling","name":"Kalle Westerling","avatar_url":"https://avatars-next.observableusercontent.com/f759a45dfbde6f2da561a90bcc8852bd0efd30d6a12ae3031f4d0bedc2464b65","tier":"starter_2024"},"version":437,"publish_version":437,"role":null,"authored":false,"authors":[{"type":"individual","id":"a4098a3e48d12fd5","login":"kallewesterling","name":"Kalle Westerling","avatar_url":"https://avatars-next.observableusercontent.com/f759a45dfbde6f2da561a90bcc8852bd0efd30d6a12ae3031f4d0bedc2464b65","tier":null}],"members":[{"type":"individual","id":"a4098a3e48d12fd5","login":"kallewesterling","name":"Kalle Westerling","avatar_url":"https://avatars-next.observableusercontent.com/f759a45dfbde6f2da561a90bcc8852bd0efd30d6a12ae3031f4d0bedc2464b65","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"f56ba7f1433fe336","slug":"dissertation-data","title":"Dissertation data","owner":{"id":"32362545e9f3330d","login":"kallewesterling","name":"Kalle Westerling"}},"type":"notebook","body":{"title":"7. Constructing Queer Collectivities, Part 2: The Network","cells":[{"id":0,"value":"# 7. Constructing Queer Collectivities, Part 2: The Network\n\n

Now, let's get to the visual representation of the network described in the previous section.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":139,"value":"Before you do anything, you must choose which dataset you want to use:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":47,"value":"viewof main = Inputs.form({\n dataset: Inputs.select(Object.keys(optionHelpers.datasets), {\n label: 'Choose a dataset',\n value: Object.keys(optionHelpers.datasets).find(d=>d.includes('14'))\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":133,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":6,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":56,"value":"#### Visual settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":62,"value":"##### Nodes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":67,"value":"viewof viewSettings = Object.assign(Inputs.form({\n maxNodeSize: Inputs.range([10,100], {\n step: 1,\n value: 30,\n label: \"Max. node size\"\n }),\n nodeSizing: Inputs.select(store.rSizing, {\n label: 'Node size from'\n }),\n nodeScaleR: Inputs.select(optionHelpers.scales, {\n label: 'Node size scaling method'\n }),\n colorWheel: Inputs.select(optionHelpers.colors, {\n value: \"interpolateRainbow\",\n label: \"Node colors\"\n }),\n algorithm: Inputs.select(optionHelpers.communityDetectionAlgorithms, {\n value: \"jLouvain\",\n label: \"Community-detection algorithm\"\n }),\n labelSize: Inputs.range([0,100], {\n value: 60,\n label: \"Size of labels\",\n step: 1\n }),\n minDisplayLabel: Inputs.range([0,100], {\n value: 40,\n label: \"Min # neighbors to display name\",\n step: 1\n })\n}), {style: optionHelpers.settingsStyle})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":70,"value":"viewof interaction = Object.assign(Inputs.form({\n mouseover: Inputs.select(optionHelpers.highlightOptions, {\n label: 'Mouseover highlight',\n value: Object.values(optionHelpers.highlightOptionsObj).find(d=>d.includes('communit'))\n }),\n}), {style: optionHelpers.settingsStyle})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"viewof forces = Object.assign(Inputs.form({\n linkStrength: Inputs.range([0, 1], { value: 0.25, step: 0.01, label: 'link pull' }), // 0.1 autosetting in d3: <1\n nodeStrength: Inputs.range([-5000, 1], { value: -1000, step: 1, label: 'node pull/push' }), // 30 autosetting in d3: -30\n //centerStrength: Inputs.range([0, 1], { value: 0.5, step: 0.05, label: 'center gravity/push' }), // 0 autosetting in d3: 1\n xStrength: Inputs.range([0, 1], { value: 0.05, step: 0.05, label: 'x-axis gravity/push' }), // d3 default: 0.1\n yStrength: Inputs.range([0, 1], { value: 0.05, step: 0.05, label: 'y-axis gravity/push' }), // d3 default: 0.1\n \n collide: Inputs.checkbox(['Do not overlap nodes'], { value: ['']})\n}), {style: optionHelpers.settingsStyle})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"viewof highDategroup = Object.assign(Inputs.form({\n on: Inputs.radio(new Map([[\"None\", null], [\"Dategroup numbers between performers > 1\", \"dategroup\"]]), {value: null}),\n color: Inputs.color({\n // label: \"Color\",\n value: \"#b90909\"})\n}), {style: optionHelpers.settingsStyle})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":10,"value":"#### Filter","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":16,"value":"viewof filters = Object.assign(Inputs.form({\n yearRange: rangeSlider({\n title: 'Year range',\n description: 'Only include relationships between performers during the years selected here',\n min: d3.min(store.ranges.years),\n max: d3.max(store.ranges.years),\n color: '#3b5fc0',\n separator: '–',\n step: 1\n }),\n\n /*\n // Implemented @mootari's rangeSlider instead, thanks!\n startYear: Inputs.range(store.ranges.years, {\n label: 'startYear',\n step: 1,\n value: d3.min(store.ranges.years),\n }),\n \n endYear: Inputs.range(store.ranges.years, {\n label: 'endYear',\n step: 1,\n value: d3.max(store.ranges.years)\n }),\n */\n\n minDegree: Inputs.range(store.ranges.degrees, {\n label: 'Min. number of neighbors',\n step: 1,\n value: 10\n })\n}), {style: optionHelpers.settingsStyle})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"viewof replay = Inputs.button(\"Restart\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":384,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":110,"value":"

Current nodes and links

\n\nIn this final section, you are able to browse all the nodes and links that are displayed above. The tables, as you can see, are similar to those above, but these ones are filtered, based on the settings above. That means that the node list below contains every single node from the graph above. If you raise, say, the filter for the [minimum number of neighbors above](#filters), you'll see that the amount of nodes will go down.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":115,"value":"

Nodes in current graph (${filtered.nodes.length})

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":119,"value":"Inputs.table(filtered.nodeOverview, Object.assign(optionHelpers.nodeTableSettings, {\n sort: 'Current T degree'\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":122,"value":"

Links in current graph (${filtered.links.length})

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":126,"value":"Inputs.table(store.getEdgeOverview(filtered.links), optionHelpers.edgeTableSettings)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"smallNav({\n prev: {url: nav.network3.url},\n next: {url: nav.geo.url}\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"scriptDisclaimer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":426,"value":"ga()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":104,"value":"##### Visuals","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":108,"value":"fullWidth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":150,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":200,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":372,"value":"tachyons","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"##### Network","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":94,"value":"mutable selectedNode = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"##### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":37,"value":"moment = require('moment')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":310,"value":"jlouvain_200 = import('https://cdn.skypack.dev/jlouvain@2.0.0?min')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":327,"value":"jLouvain = jlouvain_200.jLouvain","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"import {rangeSlider} from '@mootari/range-slider@1208'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"import { network3, network14, scriptDisclaimer, fullWidth, nav, navigate, smallNav, tachyons, ga } from '@kallewesterling/drag-dataset'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 31:"$30:body"