Published
Edited
Jul 8, 2020
5 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
groupingForce = forceInABox()
.size([width, height]) // Size of the chart
.template(template) // Either treemap or force
.groupBy("cluster") // Nodes' attribute to group
.strength(forceInABoxStrength) // Strength to foci
.links(graph.links) // The graph links. Must be called after setting the grouping attribute (Force template only)
.enableGrouping(useGroupInABox)
.linkStrengthInterCluster(linkStrengthInterCluster) // linkStrength between nodes of different clusters
.linkStrengthIntraCluster(linkStrengthIntraCluster) // linkStrength between nodes of the same cluster
.forceLinkDistance(forceLinkDistance) // linkDistance between meta-nodes on the template (Force template only)
.forceLinkStrength(forceLinkStrength) // linkStrength between meta-nodes of the template (Force template only)
.forceCharge(-forceCharge) // Charge between the meta-nodes (Force template only)
.forceNodeSize(forceNodeSize) // Used to compute the template force nodes size (Force template only)

Insert cell
Insert cell
simulation = d3.forceSimulation()
.nodes(graph.nodes)
.force("group", groupingForce)
// .force("collide", d3.forceCollide(nodeSize+1))
.force("charge", d3.forceManyBody().strength(-4))
.force("link",
d3.forceLink(graph.links)
.distance(2)
.strength(groupingForce.getLinkStrength)
)
.force("x", useGroupInABox ? null : d3.forceX(width/2) )
.force("y", useGroupInABox ? null : d3.forceY(height/2) );

Insert cell
Insert cell
Insert cell
flowLogsResponse = FileAttachment("flow-logs-slow-response.json").json()
Insert cell
graph = {
const graph = await d3.json("https://raw.githubusercontent.com/john-guerra/visPubNetwork/master/citationsNetwork2018.min.json");
graph.nodes = graph.nodes.map(d => {
return {
name: d.name,
cluster: d.cluster,
};
});
graph.links = graph.links.filter(d=>d.value>1).map(d => {
return {
source: d.source,
target: d.target,
};
});
let flowNodes = [];
let flowLinks = [];
console.log('flowLogsResponse', flowLogsResponse);
let flowResponse = flowLogsResponse;
flowResponse = flowResponse;
// flowResponse = flowResponse.filter(x => !x.key.source_name.includes('elastic-') && !x.key.dest_name.includes('elastic-'));

for (let i = 0; i < flowResponse.length; i++) {
const flow = flowResponse[i];
const sourceFullName = flow.key.source_name + '.' + flow.key.source_namespace;
flowNodes.push({
name: sourceFullName,
cluster: flow.key.source_namespace
});
const destFullName = flow.key.dest_name + '.' + flow.key.dest_namespace;
flowNodes.push({
name: destFullName,
cluster: flow.key.dest_namespace
});
}
flowNodes = _(flowNodes).uniqBy(x => x.name).sortBy(x => x.name).value();

for (let i = 0; i < flowResponse.length; i++) {
const flow = flowResponse[i];

const sourceFullName = flow.key.source_name + '.' + flow.key.source_namespace;
const sourceIndex = flowNodes.findIndex(x => x.name === sourceFullName);

const destFullName = flow.key.dest_name + '.' + flow.key.dest_namespace;
const destIndex = flowNodes.findIndex(x => x.name === destFullName);

flowLinks.push({
source: sourceIndex,
target: destIndex,
});
}
return {
nodes: flowNodes,
links: flowLinks,
};

return graph;
}
Insert cell
d3 = require("d3@5")
Insert cell
_ = require('lodash@4.17.15')
Insert cell
forceInABox = require('force-in-a-box@0.0.6/dist/forceInABox.min.js').catch(() => window.forceInABox)
Insert cell
import {checkbox, select, slider} from "@jashkenas/inputs"
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more