flow like the river
34
VISUALIZACION/node_modules/force-graph/example/auto-colored/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,34 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
// Random tree
|
||||
const NODES = 300;
|
||||
const GROUPS = 12;
|
||||
const gData = {
|
||||
nodes: [...Array(NODES).keys()].map(i => ({
|
||||
id: i,
|
||||
group: Math.ceil(Math.random() * GROUPS)
|
||||
})),
|
||||
links: [...Array(NODES).keys()]
|
||||
.filter(id => id)
|
||||
.map(id => ({
|
||||
source: id,
|
||||
target: Math.round(Math.random() * (id-1))
|
||||
}))
|
||||
}
|
||||
|
||||
const Graph = ForceGraph()
|
||||
(document.getElementById('graph'))
|
||||
.nodeAutoColorBy('group')
|
||||
.linkAutoColorBy(d => gData.nodes[d.source].group)
|
||||
.graphData(gData);
|
||||
</script>
|
||||
</body>
|
||||
29
VISUALIZACION/node_modules/force-graph/example/basic/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,29 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
// Random tree
|
||||
const N = 300;
|
||||
const gData = {
|
||||
nodes: [...Array(N).keys()].map(i => ({ id: i })),
|
||||
links: [...Array(N).keys()]
|
||||
.filter(id => id)
|
||||
.map(id => ({
|
||||
source: id,
|
||||
target: Math.round(Math.random() * (id-1))
|
||||
}))
|
||||
};
|
||||
|
||||
const Graph = ForceGraph()
|
||||
(document.getElementById('graph'))
|
||||
.linkDirectionalParticles(2)
|
||||
.graphData(gData);
|
||||
</script>
|
||||
</body>
|
||||
108
VISUALIZACION/node_modules/force-graph/example/build-a-graph/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,108 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<br/>
|
||||
<div style="text-align: center; color: silver">
|
||||
<b>New node:</b> click on the canvas, <b>New link:</b> drag one node close enough to another one,
|
||||
<b>Rename</b> node or link by clicking on it, <b>Remove</b> node or link by right-clicking on it
|
||||
</div>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
let nodeIdCounter = 0, linkIdCounter = 0;
|
||||
let nodes = [], links = [];
|
||||
let dragSourceNode = null, interimLink = null;
|
||||
const snapInDistance = 15;
|
||||
const snapOutDistance = 40;
|
||||
|
||||
const updateGraphData = () => {
|
||||
Graph.graphData({ nodes: nodes, links: links });
|
||||
};
|
||||
|
||||
const distance = (node1, node2) => {
|
||||
return Math.sqrt(Math.pow(node1.x - node2.x, 2) + Math.pow(node1.y - node2.y, 2));
|
||||
};
|
||||
|
||||
const rename = (nodeOrLink, type) => {
|
||||
let value = prompt('Name this ' + type + ':', nodeOrLink.name);
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
nodeOrLink.name = value;
|
||||
updateGraphData();
|
||||
};
|
||||
|
||||
const setInterimLink = (source, target) => {
|
||||
let linkId = linkIdCounter ++;
|
||||
interimLink = { id: linkId, source: source, target: target, name: 'link_' + linkId };
|
||||
links.push(interimLink);
|
||||
updateGraphData();
|
||||
};
|
||||
|
||||
const removeLink = link => {
|
||||
links.splice(links.indexOf(link), 1);
|
||||
};
|
||||
|
||||
const removeInterimLinkWithoutAddingIt = () => {
|
||||
removeLink(interimLink);
|
||||
interimLink = null;
|
||||
updateGraphData();
|
||||
};
|
||||
|
||||
const removeNode = node => {
|
||||
links.filter(link => link.source === node || link.target === node).forEach(link => removeLink(link));
|
||||
nodes.splice(nodes.indexOf(node), 1);
|
||||
};
|
||||
|
||||
const Graph = ForceGraph()
|
||||
(document.getElementById('graph'))
|
||||
.linkDirectionalArrowLength(6)
|
||||
.linkDirectionalArrowRelPos(1)
|
||||
.onNodeDrag(dragNode => {
|
||||
dragSourceNode = dragNode;
|
||||
for (let node of nodes) {
|
||||
if (dragNode === node) {
|
||||
continue;
|
||||
}
|
||||
// close enough: snap onto node as target for suggested link
|
||||
if (!interimLink && distance(dragNode, node) < snapInDistance) {
|
||||
setInterimLink(dragSourceNode, node);
|
||||
}
|
||||
// close enough to other node: snap over to other node as target for suggested link
|
||||
if (interimLink && node !== interimLink.target && distance(dragNode, node) < snapInDistance) {
|
||||
removeLink(interimLink);
|
||||
setInterimLink(dragSourceNode, node);
|
||||
}
|
||||
}
|
||||
// far away enough: snap out of the current target node
|
||||
if (interimLink && distance(dragNode, interimLink.target) > snapOutDistance) {
|
||||
removeInterimLinkWithoutAddingIt();
|
||||
}
|
||||
})
|
||||
.onNodeDragEnd(() => {
|
||||
dragSourceNode = null;
|
||||
interimLink = null;
|
||||
updateGraphData();
|
||||
})
|
||||
.nodeColor(node => node === dragSourceNode || (interimLink &&
|
||||
(node === interimLink.source || node === interimLink.target)) ? 'orange' : null)
|
||||
.linkColor(link => link === interimLink ? 'orange' : '#bbbbbb')
|
||||
.linkLineDash(link => link === interimLink ? [2, 2] : [])
|
||||
.onNodeClick((node, event) => rename(node, 'node'))
|
||||
.onNodeRightClick((node, event) => removeNode(node))
|
||||
.onLinkClick((link, event) => rename(link, 'link'))
|
||||
.onLinkRightClick((link, event) => removeLink(link))
|
||||
.onBackgroundClick(event => {
|
||||
let coords = Graph.screen2GraphCoords(event.layerX, event.layerY);
|
||||
let nodeId = nodeIdCounter ++;
|
||||
nodes.push({ id: nodeId, x: coords.x, y: coords.y, name: 'node_' + nodeId });
|
||||
updateGraphData();
|
||||
});
|
||||
updateGraphData();
|
||||
</script>
|
||||
</body>
|
||||
28
VISUALIZACION/node_modules/force-graph/example/click-to-focus/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,28 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
fetch('../datasets/miserables.json').then(res => res.json()).then(data => {
|
||||
const elem = document.getElementById('graph');
|
||||
|
||||
const Graph = ForceGraph()(elem)
|
||||
.graphData(data)
|
||||
.nodeLabel('id')
|
||||
.nodeAutoColorBy('group')
|
||||
.linkDirectionalParticles(2)
|
||||
.linkDirectionalParticleWidth(1.4)
|
||||
.onNodeClick(node => {
|
||||
// Center/zoom on node
|
||||
Graph.centerAt(node.x, node.y, 1000);
|
||||
Graph.zoom(8, 2000);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
50
VISUALIZACION/node_modules/force-graph/example/collision-detection/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,50 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
|
||||
<script src="//unpkg.com/d3-quadtree"></script>
|
||||
<script src="//unpkg.com/d3-force"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
const N = 80;
|
||||
const nodes = [...Array(N).keys()].map(() => ({
|
||||
// Initial velocity in random direction
|
||||
vx: (Math.random() * 2) - 1,
|
||||
vy: (Math.random() * 2) - 1
|
||||
}));
|
||||
|
||||
const Graph = ForceGraph()
|
||||
(document.getElementById('graph'));
|
||||
|
||||
Graph.cooldownTime(Infinity)
|
||||
.d3AlphaDecay(0)
|
||||
.d3VelocityDecay(0)
|
||||
|
||||
// Deactivate existing forces
|
||||
.d3Force('center', null)
|
||||
.d3Force('charge', null)
|
||||
|
||||
// Add collision and bounding box forces
|
||||
.d3Force('collide', d3.forceCollide(Graph.nodeRelSize()))
|
||||
.d3Force('box', () => {
|
||||
const SQUARE_HALF_SIDE = Graph.nodeRelSize() * N * 0.5;
|
||||
|
||||
nodes.forEach(node => {
|
||||
const x = node.x || 0, y = node.y || 0;
|
||||
|
||||
// bounce on box walls
|
||||
if (Math.abs(x) > SQUARE_HALF_SIDE) { node.vx *= -1; }
|
||||
if (Math.abs(y) > SQUARE_HALF_SIDE) { node.vy *= -1; }
|
||||
});
|
||||
})
|
||||
|
||||
// Add nodes
|
||||
.graphData({ nodes, links: [] });
|
||||
</script>
|
||||
</body>
|
||||
76
VISUALIZACION/node_modules/force-graph/example/curved-links-computed-curvature/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,76 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
const gData = {
|
||||
nodes: [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }],
|
||||
links: [
|
||||
{ source: 0, target: 1 },
|
||||
{ source: 0, target: 1 },
|
||||
{ source: 1, target: 0 },
|
||||
{ source: 1, target: 2 },
|
||||
{ source: 2, target: 2 },
|
||||
{ source: 2, target: 2 },
|
||||
{ source: 2, target: 2 },
|
||||
{ source: 2, target: 3 },
|
||||
{ source: 3, target: 4 },
|
||||
{ source: 4, target: 3 }
|
||||
]
|
||||
};
|
||||
|
||||
let selfLoopLinks = {};
|
||||
let sameNodesLinks = {};
|
||||
const curvatureMinMax = 0.5;
|
||||
|
||||
// 1. assign each link a nodePairId that combines their source and target independent of the links direction
|
||||
// 2. group links together that share the same two nodes or are self-loops
|
||||
gData.links.forEach(link => {
|
||||
link.nodePairId = link.source <= link.target ? (link.source + "_" + link.target) : (link.target + "_" + link.source);
|
||||
let map = link.source === link.target ? selfLoopLinks : sameNodesLinks;
|
||||
if (!map[link.nodePairId]) {
|
||||
map[link.nodePairId] = [];
|
||||
}
|
||||
map[link.nodePairId].push(link);
|
||||
});
|
||||
|
||||
// Compute the curvature for self-loop links to avoid overlaps
|
||||
Object.keys(selfLoopLinks).forEach(id => {
|
||||
let links = selfLoopLinks[id];
|
||||
let lastIndex = links.length - 1;
|
||||
links[lastIndex].curvature = 1;
|
||||
let delta = (1 - curvatureMinMax) / lastIndex;
|
||||
for (let i = 0; i < lastIndex; i++) {
|
||||
links[i].curvature = curvatureMinMax + i * delta;
|
||||
}
|
||||
});
|
||||
|
||||
// Compute the curvature for links sharing the same two nodes to avoid overlaps
|
||||
Object.keys(sameNodesLinks).filter(nodePairId => sameNodesLinks[nodePairId].length > 1).forEach(nodePairId => {
|
||||
let links = sameNodesLinks[nodePairId];
|
||||
let lastIndex = links.length - 1;
|
||||
let lastLink = links[lastIndex];
|
||||
lastLink.curvature = curvatureMinMax;
|
||||
let delta = 2 * curvatureMinMax / lastIndex;
|
||||
for (let i = 0; i < lastIndex; i++) {
|
||||
links[i].curvature = - curvatureMinMax + i * delta;
|
||||
if (lastLink.source !== links[i].source) {
|
||||
links[i].curvature *= -1; // flip it around, otherwise they overlap
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const Graph = ForceGraph()
|
||||
(document.getElementById('graph'))
|
||||
.linkCurvature('curvature')
|
||||
.linkDirectionalArrowLength(6)
|
||||
.linkDirectionalArrowRelPos(1)
|
||||
.graphData(gData);
|
||||
</script>
|
||||
</body>
|
||||
37
VISUALIZACION/node_modules/force-graph/example/curved-links/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,37 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
const gData = {
|
||||
nodes: [...Array(9).keys()].map(i => ({ id: i })),
|
||||
links: [
|
||||
{ source: 1, target: 4, curvature: 0 },
|
||||
{ source: 1, target: 4, curvature: 0.5 },
|
||||
{ source: 1, target: 4, curvature: -0.5 },
|
||||
{ source: 5, target: 2, curvature: 0.3 },
|
||||
{ source: 2, target: 5, curvature: 0.3 },
|
||||
{ source: 0, target: 3, curvature: 0 },
|
||||
{ source: 3, target: 3, curvature: 0.5 },
|
||||
{ source: 0, target: 4, curvature: 0.2 },
|
||||
{ source: 4, target: 5, curvature: 0.5 },
|
||||
{ source: 5, target: 6, curvature: 0.7 },
|
||||
{ source: 6, target: 7, curvature: 1 },
|
||||
{ source: 7, target: 8, curvature: 2 },
|
||||
{ source: 8, target: 0, curvature: 0.5 }
|
||||
]
|
||||
};
|
||||
|
||||
const Graph = ForceGraph()
|
||||
(document.getElementById('graph'))
|
||||
.linkDirectionalParticles(2)
|
||||
.linkCurvature('curvature')
|
||||
.graphData(gData);
|
||||
</script>
|
||||
</body>
|
||||
44
VISUALIZACION/node_modules/force-graph/example/custom-node-shape/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,44 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
// Random tree
|
||||
const N = 20;
|
||||
const gData = {
|
||||
nodes: [...Array(N).keys()].map(i => ({ id: i })),
|
||||
links: [...Array(N).keys()]
|
||||
.filter(id => id)
|
||||
.map(id => ({
|
||||
source: id,
|
||||
target: Math.round(Math.random() * (id-1))
|
||||
}))
|
||||
};
|
||||
|
||||
// gen a number persistent color from around the palette
|
||||
const getColor = n => '#' + ((n * 1234567) % Math.pow(2, 24)).toString(16).padStart(6, '0');
|
||||
|
||||
const Graph = ForceGraph()
|
||||
(document.getElementById('graph'))
|
||||
.nodeCanvasObject((node, ctx) => nodePaint(node, getColor(node.id), ctx))
|
||||
.nodePointerAreaPaint(nodePaint)
|
||||
.nodeLabel('id')
|
||||
.graphData(gData);
|
||||
|
||||
function nodePaint({ id, x, y }, color, ctx) {
|
||||
ctx.fillStyle = color;
|
||||
[
|
||||
() => { ctx.fillRect(x - 6, y - 4, 12, 8); }, // rectangle
|
||||
() => { ctx.beginPath(); ctx.moveTo(x, y - 5); ctx.lineTo(x - 5, y + 5); ctx.lineTo(x + 5, y + 5); ctx.fill(); }, // triangle
|
||||
() => { ctx.beginPath(); ctx.arc(x, y, 5, 0, 2 * Math.PI, false); ctx.fill(); }, // circle
|
||||
() => { ctx.font = '10px Sans-Serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('Text', x, y); } // text
|
||||
][id%4]();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
96
VISUALIZACION/node_modules/force-graph/example/dag-yarn/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,96 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//bundle.run/@yarnpkg/lockfile@1.1.0"></script>
|
||||
<script src="//unpkg.com/dat.gui"></script>
|
||||
<script src="//unpkg.com/d3-quadtree"></script>
|
||||
<script src="//unpkg.com/d3-force"></script>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
// controls
|
||||
const controls = { 'DAG Orientation': 'lr'};
|
||||
const gui = new dat.GUI();
|
||||
gui.add(controls, 'DAG Orientation', ['lr', 'td', 'radialout', null])
|
||||
.onChange(orientation => graph && graph.dagMode(orientation));
|
||||
|
||||
// graph config
|
||||
const graph = ForceGraph()
|
||||
.backgroundColor('#101020')
|
||||
.linkColor(() => 'rgba(255,255,255,0.2)')
|
||||
.dagMode('lr')
|
||||
.dagLevelDistance(300)
|
||||
.nodeId('package')
|
||||
.linkCurvature(d =>
|
||||
0.07 * // max curvature
|
||||
// curve outwards from source, using gradual straightening within a margin of a few px
|
||||
(['td', 'bu'].includes(graph.dagMode())
|
||||
? Math.max(-1, Math.min(1, (d.source.x - d.target.x) / 25)) :
|
||||
['lr', 'rl'].includes(graph.dagMode())
|
||||
? Math.max(-1, Math.min(1, (d.target.y - d.source.y) / 25))
|
||||
: ['radialout', 'radialin'].includes(graph.dagMode()) ? 0 : 1
|
||||
)
|
||||
)
|
||||
.linkDirectionalParticles(2)
|
||||
.linkDirectionalParticleWidth(3)
|
||||
.nodeCanvasObject((node, ctx) => {
|
||||
const label = node.package;
|
||||
const fontSize = 15;
|
||||
ctx.font = `${fontSize}px Sans-Serif`;
|
||||
const textWidth = ctx.measureText(label).width;
|
||||
const bckgDimensions = [textWidth, fontSize].map(n => n + fontSize * 0.2); // some padding
|
||||
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
|
||||
ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
|
||||
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillStyle = 'lightsteelblue';
|
||||
ctx.fillText(label, node.x, node.y);
|
||||
|
||||
node.__bckgDimensions = bckgDimensions; // to re-use in nodePointerAreaPaint
|
||||
})
|
||||
.nodePointerAreaPaint((node, color, ctx) => {
|
||||
ctx.fillStyle = color;
|
||||
const bckgDimensions = node.__bckgDimensions;
|
||||
bckgDimensions && ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
|
||||
})
|
||||
.d3Force('collide', d3.forceCollide(13))
|
||||
.d3AlphaDecay(0.02)
|
||||
.d3VelocityDecay(0.3);
|
||||
|
||||
fetch('//unpkg.com/d3@5.9.7/yarn.lock')
|
||||
.then(r => r.text())
|
||||
.then(text => {
|
||||
const yarnlock = _yarnpkg_lockfile.parse(text);
|
||||
if (yarnlock.type !== 'success') throw new Error('invalid yarn.lock');
|
||||
return yarnlock.object;
|
||||
})
|
||||
.then(yarnlock => {
|
||||
const nodes = [];
|
||||
const links = [];
|
||||
|
||||
Object.entries(yarnlock).forEach(([package, details]) => {
|
||||
nodes.push({
|
||||
package,
|
||||
version: details.version
|
||||
});
|
||||
|
||||
if (details.dependencies) {
|
||||
Object.entries(details.dependencies).forEach(([dep, version]) => {
|
||||
links.push({source: package, target: `${dep}@${version}`});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
graph(document.getElementById('graph'))
|
||||
.graphData({ nodes, links });
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
119
VISUALIZACION/node_modules/force-graph/example/dagre/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,119 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//bundle.run/@yarnpkg/lockfile@1.1.0"></script>
|
||||
|
||||
<script src="//unpkg.com/dagre/dist/dagre.min.js"></script>
|
||||
<script src="//unpkg.com/accessor-fn"></script>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!-- <script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
const Graph = ForceGraph()(document.getElementById('graph'))
|
||||
.nodeId('id')
|
||||
.nodeLabel('id')
|
||||
.cooldownTicks(0) // pre-defined layout, cancel force engine iterations
|
||||
.linkDirectionalArrowLength(3)
|
||||
.linkDirectionalArrowRelPos(1)
|
||||
.linkCurvature(d =>
|
||||
0.07 * // max curvature
|
||||
// curve outwards from source, using gradual straightening within a margin of a few px
|
||||
Math.max(-1, Math.min(1, (d.source.x - d.target.x) / 5)) *
|
||||
Math.max(-1, Math.min(1, (d.target.y - d.source.y) / 5))
|
||||
);
|
||||
|
||||
fetch('../../yarn.lock')
|
||||
.then(r => r.text())
|
||||
.then(text => {
|
||||
const yarnlock = _yarnpkg_lockfile.parse(text);
|
||||
if (yarnlock.type !== 'success') throw new Error('invalid yarn.lock');
|
||||
return yarnlock.object;
|
||||
})
|
||||
.then(yarnlock => {
|
||||
const nodes = [];
|
||||
const links = [];
|
||||
Object.entries(yarnlock).forEach(([package, details]) => {
|
||||
nodes.push({ id: package });
|
||||
if (details.dependencies) {
|
||||
Object.entries(details.dependencies).forEach(([dep, version]) => {
|
||||
links.push({source: package, target: `${dep}@${version}`});
|
||||
});
|
||||
}
|
||||
});
|
||||
return { nodes, links };
|
||||
}).then(data => {
|
||||
const nodeDiameter = Graph.nodeRelSize() * 2;
|
||||
const layoutData = getLayout(data.nodes, data.links, {
|
||||
nodeWidth: nodeDiameter,
|
||||
nodeHeight: nodeDiameter,
|
||||
nodesep: nodeDiameter * 0.5,
|
||||
ranksep: nodeDiameter * Math.sqrt(data.nodes.length) * 0.6,
|
||||
|
||||
// root nodes aligned on top
|
||||
rankDir: 'BT',
|
||||
ranker: 'longest-path',
|
||||
linkSource: 'target',
|
||||
linkTarget: 'source'
|
||||
});
|
||||
layoutData.nodes.forEach(node => { node.fx = node.x; node.fy = node.y; }); // fix nodes
|
||||
|
||||
Graph.graphData(layoutData);
|
||||
Graph.zoomToFit();
|
||||
});
|
||||
|
||||
//
|
||||
|
||||
function getLayout(nodes, links, {
|
||||
nodeId = 'id',
|
||||
linkSource = 'source',
|
||||
linkTarget = 'target',
|
||||
nodeWidth = 0,
|
||||
nodeHeight = 0,
|
||||
...graphCfg
|
||||
} = {}) {
|
||||
const getNodeWidth = accessorFn(nodeWidth);
|
||||
const getNodeHeight = accessorFn(nodeHeight);
|
||||
|
||||
const g = new dagre.graphlib.Graph();
|
||||
g.setGraph({
|
||||
// rankDir: 'LR',
|
||||
// ranker: 'network-simplex' // 'tight-tree', 'longest-path'
|
||||
// acyclicer: 'greedy'
|
||||
nodesep: 5,
|
||||
edgesep: 1,
|
||||
ranksep: 20,
|
||||
...graphCfg
|
||||
});
|
||||
|
||||
nodes.forEach(node =>
|
||||
g.setNode(
|
||||
node[nodeId],
|
||||
Object.assign({}, node, {
|
||||
width: getNodeWidth(node),
|
||||
height: getNodeHeight(node)
|
||||
})
|
||||
)
|
||||
);
|
||||
links.forEach(link =>
|
||||
g.setEdge(link[linkSource], link[linkTarget], Object.assign({}, link))
|
||||
);
|
||||
|
||||
dagre.layout(g);
|
||||
|
||||
return {
|
||||
nodes: g.nodes().map(n => {
|
||||
const node = g.node(n);
|
||||
delete node.width;
|
||||
delete node.height;
|
||||
return node;
|
||||
}),
|
||||
links: g.edges().map(e => g.edge(e))
|
||||
};
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
47
VISUALIZACION/node_modules/force-graph/example/dash-odd-links/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,47 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!-- <script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
// Random tree
|
||||
const N = 100;
|
||||
const gData = {
|
||||
nodes: [...Array(N).keys()].map(i => ({ id: i })),
|
||||
links: [...Array(N).keys()]
|
||||
.filter(id => id)
|
||||
.map(id => ({
|
||||
source: id,
|
||||
target: Math.round(Math.random() * (id-1)),
|
||||
dashed: (id % 2 === 0)
|
||||
}))
|
||||
};
|
||||
|
||||
const elem = document.getElementById('graph');
|
||||
|
||||
const dashLen = 6;
|
||||
const gapLen = 8;
|
||||
|
||||
const Graph = ForceGraph()(elem)
|
||||
.graphData(gData)
|
||||
.nodeRelSize(8)
|
||||
.linkWidth(3)
|
||||
.linkLineDash(link => link.dashed && [dashLen, gapLen]);
|
||||
|
||||
// Dash animation
|
||||
const st = +new Date();
|
||||
const dashAnimateTime = 300; // time to animate a single dash
|
||||
(function animate() {
|
||||
const t = ((+new Date() - st) % dashAnimateTime) / dashAnimateTime;
|
||||
const lineDash = t < 0.5 ? [0, gapLen * t * 2, dashLen, gapLen * (1 - t * 2)] : [dashLen * (t - 0.5) * 2, gapLen, dashLen * (1 - (t - 0.5) * 2), 0];
|
||||
Graph.linkLineDash(link => link.dashed && lineDash);
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
})(); // IIFE
|
||||
</script>
|
||||
</body>
|
||||
1
VISUALIZACION/node_modules/force-graph/example/datasets/blocks.json
generated
vendored
Executable file
464
VISUALIZACION/node_modules/force-graph/example/datasets/d3-dependencies.csv
generated
vendored
Executable file
|
|
@ -0,0 +1,464 @@
|
|||
size,path
|
||||
,d3
|
||||
,d3/d3-array
|
||||
,d3/d3-array/threshold
|
||||
,d3/d3-axis
|
||||
,d3/d3-brush
|
||||
,d3/d3-chord
|
||||
,d3/d3-collection
|
||||
,d3/d3-color
|
||||
,d3/d3-dispatch
|
||||
,d3/d3-drag
|
||||
,d3/d3-dsv
|
||||
,d3/d3-ease
|
||||
,d3/d3-force
|
||||
,d3/d3-format
|
||||
,d3/d3-geo
|
||||
,d3/d3-geo/clip
|
||||
,d3/d3-geo/path
|
||||
,d3/d3-geo/projection
|
||||
,d3/d3-hierarchy
|
||||
,d3/d3-hierarchy/hierarchy
|
||||
,d3/d3-hierarchy/pack
|
||||
,d3/d3-hierarchy/treemap
|
||||
,d3/d3-interpolate
|
||||
,d3/d3-interpolate/transform
|
||||
,d3/d3-path
|
||||
,d3/d3-polygon
|
||||
,d3/d3-quadtree
|
||||
,d3/d3-queue
|
||||
,d3/d3-random
|
||||
,d3/d3-request
|
||||
,d3/d3-scale
|
||||
,d3/d3-selection
|
||||
,d3/d3-selection/selection
|
||||
,d3/d3-shape
|
||||
,d3/d3-shape/curve
|
||||
,d3/d3-shape/offset
|
||||
,d3/d3-shape/order
|
||||
,d3/d3-shape/symbol
|
||||
,d3/d3-time-format
|
||||
,d3/d3-time
|
||||
,d3/d3-timer
|
||||
,d3/d3-transition
|
||||
,d3/d3-transition/selection
|
||||
,d3/d3-transition/transition
|
||||
,d3/d3-voronoi
|
||||
,d3/d3-zoom
|
||||
90,d3/d3-array/array.js
|
||||
86,d3/d3-array/ascending.js
|
||||
238,d3/d3-array/bisect.js
|
||||
786,d3/d3-array/bisector.js
|
||||
72,d3/d3-array/constant.js
|
||||
86,d3/d3-array/descending.js
|
||||
135,d3/d3-array/deviation.js
|
||||
553,d3/d3-array/extent.js
|
||||
1876,d3/d3-array/histogram.js
|
||||
43,d3/d3-array/identity.js
|
||||
451,d3/d3-array/max.js
|
||||
362,d3/d3-array/mean.js
|
||||
452,d3/d3-array/median.js
|
||||
339,d3/d3-array/merge.js
|
||||
451,d3/d3-array/min.js
|
||||
63,d3/d3-array/number.js
|
||||
182,d3/d3-array/pairs.js
|
||||
161,d3/d3-array/permute.js
|
||||
416,d3/d3-array/quantile.js
|
||||
344,d3/d3-array/range.js
|
||||
357,d3/d3-array/scan.js
|
||||
285,d3/d3-array/shuffle.js
|
||||
295,d3/d3-array/sum.js
|
||||
361,d3/d3-array/threshold/freedmanDiaconis.js
|
||||
180,d3/d3-array/threshold/scott.js
|
||||
96,d3/d3-array/threshold/sturges.js
|
||||
672,d3/d3-array/ticks.js
|
||||
356,d3/d3-array/transpose.js
|
||||
540,d3/d3-array/variance.js
|
||||
99,d3/d3-array/zip.js
|
||||
42,d3/d3-axis/array.js
|
||||
5239,d3/d3-axis/axis.js
|
||||
43,d3/d3-axis/identity.js
|
||||
15778,d3/d3-brush/brush.js
|
||||
72,d3/d3-brush/constant.js
|
||||
127,d3/d3-brush/event.js
|
||||
202,d3/d3-brush/noevent.js
|
||||
42,d3/d3-chord/array.js
|
||||
3178,d3/d3-chord/chord.js
|
||||
72,d3/d3-chord/constant.js
|
||||
159,d3/d3-chord/math.js
|
||||
2340,d3/d3-chord/ribbon.js
|
||||
137,d3/d3-collection/entries.js
|
||||
104,d3/d3-collection/keys.js
|
||||
1988,d3/d3-collection/map.js
|
||||
2021,d3/d3-collection/nest.js
|
||||
800,d3/d3-collection/set.js
|
||||
115,d3/d3-collection/values.js
|
||||
9276,d3/d3-color/color.js
|
||||
1855,d3/d3-color/cubehelix.js
|
||||
340,d3/d3-color/define.js
|
||||
3167,d3/d3-color/lab.js
|
||||
72,d3/d3-color/math.js
|
||||
2729,d3/d3-dispatch/dispatch.js
|
||||
72,d3/d3-drag/constant.js
|
||||
4297,d3/d3-drag/drag.js
|
||||
430,d3/d3-drag/event.js
|
||||
857,d3/d3-drag/nodrag.js
|
||||
202,d3/d3-drag/noevent.js
|
||||
199,d3/d3-dsv/csv.js
|
||||
3582,d3/d3-dsv/dsv.js
|
||||
200,d3/d3-dsv/tsv.js
|
||||
653,d3/d3-ease/back.js
|
||||
521,d3/d3-ease/bounce.js
|
||||
261,d3/d3-ease/circle.js
|
||||
210,d3/d3-ease/cubic.js
|
||||
1309,d3/d3-ease/elastic.js
|
||||
251,d3/d3-ease/exp.js
|
||||
43,d3/d3-ease/linear.js
|
||||
596,d3/d3-ease/poly.js
|
||||
192,d3/d3-ease/quad.js
|
||||
236,d3/d3-ease/sin.js
|
||||
654,d3/d3-force/center.js
|
||||
2447,d3/d3-force/collide.js
|
||||
72,d3/d3-force/constant.js
|
||||
69,d3/d3-force/jiggle.js
|
||||
3213,d3/d3-force/link.js
|
||||
3181,d3/d3-force/manyBody.js
|
||||
3444,d3/d3-force/simulation.js
|
||||
1030,d3/d3-force/x.js
|
||||
1030,d3/d3-force/y.js
|
||||
361,d3/d3-format/defaultLocale.js
|
||||
134,d3/d3-format/exponent.js
|
||||
656,d3/d3-format/formatDecimal.js
|
||||
368,d3/d3-format/formatDefault.js
|
||||
475,d3/d3-format/formatGroup.js
|
||||
611,d3/d3-format/formatPrefixAuto.js
|
||||
458,d3/d3-format/formatRounded.js
|
||||
1589,d3/d3-format/formatSpecifier.js
|
||||
846,d3/d3-format/formatTypes.js
|
||||
5247,d3/d3-format/locale.js
|
||||
119,d3/d3-format/precisionFixed.js
|
||||
190,d3/d3-format/precisionPrefix.js
|
||||
186,d3/d3-format/precisionRound.js
|
||||
906,d3/d3-geo/adder.js
|
||||
1958,d3/d3-geo/area.js
|
||||
5361,d3/d3-geo/bounds.js
|
||||
929,d3/d3-geo/cartesian.js
|
||||
3816,d3/d3-geo/centroid.js
|
||||
2373,d3/d3-geo/circle.js
|
||||
2897,d3/d3-geo/clip/antimeridian.js
|
||||
470,d3/d3-geo/clip/buffer.js
|
||||
5956,d3/d3-geo/clip/circle.js
|
||||
5527,d3/d3-geo/clip/extent.js
|
||||
3813,d3/d3-geo/clip/index.js
|
||||
1099,d3/d3-geo/clip/line.js
|
||||
2802,d3/d3-geo/clip/polygon.js
|
||||
250,d3/d3-geo/compose.js
|
||||
72,d3/d3-geo/constant.js
|
||||
229,d3/d3-geo/distance.js
|
||||
3034,d3/d3-geo/graticule.js
|
||||
43,d3/d3-geo/identity.js
|
||||
911,d3/d3-geo/interpolate.js
|
||||
1309,d3/d3-geo/length.js
|
||||
880,d3/d3-geo/math.js
|
||||
34,d3/d3-geo/noop.js
|
||||
945,d3/d3-geo/path/area.js
|
||||
485,d3/d3-geo/path/bounds.js
|
||||
2033,d3/d3-geo/path/centroid.js
|
||||
914,d3/d3-geo/path/context.js
|
||||
1690,d3/d3-geo/path/index.js
|
||||
1149,d3/d3-geo/path/string.js
|
||||
139,d3/d3-geo/pointEqual.js
|
||||
2491,d3/d3-geo/polygonContains.js
|
||||
235,d3/d3-geo/projection/albers.js
|
||||
3986,d3/d3-geo/projection/albersUsa.js
|
||||
502,d3/d3-geo/projection/azimuthal.js
|
||||
447,d3/d3-geo/projection/azimuthalEqualArea.js
|
||||
443,d3/d3-geo/projection/azimuthalEquidistant.js
|
||||
402,d3/d3-geo/projection/conic.js
|
||||
1017,d3/d3-geo/projection/conicConformal.js
|
||||
871,d3/d3-geo/projection/conicEqualArea.js
|
||||
771,d3/d3-geo/projection/conicEquidistant.js
|
||||
314,d3/d3-geo/projection/cylindricalEqualArea.js
|
||||
253,d3/d3-geo/projection/equirectangular.js
|
||||
910,d3/d3-geo/projection/fit.js
|
||||
387,d3/d3-geo/projection/gnomonic.js
|
||||
1922,d3/d3-geo/projection/identity.js
|
||||
3752,d3/d3-geo/projection/index.js
|
||||
1119,d3/d3-geo/projection/mercator.js
|
||||
376,d3/d3-geo/projection/orthographic.js
|
||||
3275,d3/d3-geo/projection/resample.js
|
||||
436,d3/d3-geo/projection/stereographic.js
|
||||
762,d3/d3-geo/projection/transverseMercator.js
|
||||
2509,d3/d3-geo/rotation.js
|
||||
2305,d3/d3-geo/stream.js
|
||||
701,d3/d3-geo/transform.js
|
||||
166,d3/d3-hierarchy/accessors.js
|
||||
2093,d3/d3-hierarchy/cluster.js
|
||||
120,d3/d3-hierarchy/constant.js
|
||||
138,d3/d3-hierarchy/hierarchy/ancestors.js
|
||||
121,d3/d3-hierarchy/hierarchy/descendants.js
|
||||
381,d3/d3-hierarchy/hierarchy/each.js
|
||||
353,d3/d3-hierarchy/hierarchy/eachAfter.js
|
||||
282,d3/d3-hierarchy/hierarchy/eachBefore.js
|
||||
1819,d3/d3-hierarchy/hierarchy/index.js
|
||||
164,d3/d3-hierarchy/hierarchy/leaves.js
|
||||
246,d3/d3-hierarchy/hierarchy/links.js
|
||||
606,d3/d3-hierarchy/hierarchy/path.js
|
||||
151,d3/d3-hierarchy/hierarchy/sort.js
|
||||
264,d3/d3-hierarchy/hierarchy/sum.js
|
||||
2452,d3/d3-hierarchy/pack/enclose.js
|
||||
1917,d3/d3-hierarchy/pack/index.js
|
||||
389,d3/d3-hierarchy/pack/shuffle.js
|
||||
3497,d3/d3-hierarchy/pack/siblings.js
|
||||
1266,d3/d3-hierarchy/partition.js
|
||||
1934,d3/d3-hierarchy/stratify.js
|
||||
7060,d3/d3-hierarchy/tree.js
|
||||
1184,d3/d3-hierarchy/treemap/binary.js
|
||||
309,d3/d3-hierarchy/treemap/dice.js
|
||||
2810,d3/d3-hierarchy/treemap/index.js
|
||||
1029,d3/d3-hierarchy/treemap/resquarify.js
|
||||
166,d3/d3-hierarchy/treemap/round.js
|
||||
309,d3/d3-hierarchy/treemap/slice.js
|
||||
170,d3/d3-hierarchy/treemap/sliceDice.js
|
||||
1868,d3/d3-hierarchy/treemap/squarify.js
|
||||
372,d3/d3-interpolate/array.js
|
||||
600,d3/d3-interpolate/basis.js
|
||||
360,d3/d3-interpolate/basisClosed.js
|
||||
697,d3/d3-interpolate/color.js
|
||||
72,d3/d3-interpolate/constant.js
|
||||
760,d3/d3-interpolate/cubehelix.js
|
||||
134,d3/d3-interpolate/date.js
|
||||
547,d3/d3-interpolate/hcl.js
|
||||
547,d3/d3-interpolate/hsl.js
|
||||
447,d3/d3-interpolate/lab.js
|
||||
100,d3/d3-interpolate/number.js
|
||||
390,d3/d3-interpolate/object.js
|
||||
163,d3/d3-interpolate/quantize.js
|
||||
1277,d3/d3-interpolate/rgb.js
|
||||
112,d3/d3-interpolate/round.js
|
||||
1758,d3/d3-interpolate/string.js
|
||||
672,d3/d3-interpolate/transform/decompose.js
|
||||
2064,d3/d3-interpolate/transform/index.js
|
||||
980,d3/d3-interpolate/transform/parse.js
|
||||
598,d3/d3-interpolate/value.js
|
||||
1387,d3/d3-interpolate/zoom.js
|
||||
4089,d3/d3-path/path.js
|
||||
243,d3/d3-polygon/area.js
|
||||
346,d3/d3-polygon/centroid.js
|
||||
411,d3/d3-polygon/contains.js
|
||||
402,d3/d3-polygon/cross.js
|
||||
1710,d3/d3-polygon/hull.js
|
||||
375,d3/d3-polygon/length.js
|
||||
2441,d3/d3-quadtree/add.js
|
||||
1667,d3/d3-quadtree/cover.js
|
||||
170,d3/d3-quadtree/data.js
|
||||
206,d3/d3-quadtree/extent.js
|
||||
1696,d3/d3-quadtree/find.js
|
||||
134,d3/d3-quadtree/quad.js
|
||||
2077,d3/d3-quadtree/quadtree.js
|
||||
1898,d3/d3-quadtree/remove.js
|
||||
51,d3/d3-quadtree/root.js
|
||||
155,d3/d3-quadtree/size.js
|
||||
695,d3/d3-quadtree/visit.js
|
||||
773,d3/d3-quadtree/visitAfter.js
|
||||
138,d3/d3-quadtree/x.js
|
||||
138,d3/d3-quadtree/y.js
|
||||
29,d3/d3-queue/array.js
|
||||
2870,d3/d3-queue/queue.js
|
||||
168,d3/d3-random/bates.js
|
||||
113,d3/d3-random/exponential.js
|
||||
137,d3/d3-random/irwinHall.js
|
||||
178,d3/d3-random/logNormal.js
|
||||
503,d3/d3-random/normal.js
|
||||
236,d3/d3-random/uniform.js
|
||||
101,d3/d3-request/csv.js
|
||||
517,d3/d3-request/dsv.js
|
||||
157,d3/d3-request/html.js
|
||||
127,d3/d3-request/json.js
|
||||
4593,d3/d3-request/request.js
|
||||
109,d3/d3-request/text.js
|
||||
118,d3/d3-request/tsv.js
|
||||
370,d3/d3-request/type.js
|
||||
174,d3/d3-request/xml.js
|
||||
90,d3/d3-scale/array.js
|
||||
2637,d3/d3-scale/band.js
|
||||
119,d3/d3-scale/category10.js
|
||||
179,d3/d3-scale/category20.js
|
||||
179,d3/d3-scale/category20b.js
|
||||
179,d3/d3-scale/category20c.js
|
||||
101,d3/d3-scale/colors.js
|
||||
72,d3/d3-scale/constant.js
|
||||
3328,d3/d3-scale/continuous.js
|
||||
188,d3/d3-scale/cubehelix.js
|
||||
463,d3/d3-scale/identity.js
|
||||
1206,d3/d3-scale/linear.js
|
||||
3273,d3/d3-scale/log.js
|
||||
340,d3/d3-scale/nice.js
|
||||
44,d3/d3-scale/number.js
|
||||
1116,d3/d3-scale/ordinal.js
|
||||
1000,d3/d3-scale/pow.js
|
||||
1280,d3/d3-scale/quantile.js
|
||||
1066,d3/d3-scale/quantize.js
|
||||
536,d3/d3-scale/rainbow.js
|
||||
717,d3/d3-scale/sequential.js
|
||||
802,d3/d3-scale/threshold.js
|
||||
1203,d3/d3-scale/tickFormat.js
|
||||
4565,d3/d3-scale/time.js
|
||||
379,d3/d3-scale/utcTime.js
|
||||
6471,d3/d3-scale/viridis.js
|
||||
72,d3/d3-selection/constant.js
|
||||
662,d3/d3-selection/creator.js
|
||||
536,d3/d3-selection/local.js
|
||||
533,d3/d3-selection/matcher.js
|
||||
224,d3/d3-selection/mouse.js
|
||||
303,d3/d3-selection/namespace.js
|
||||
254,d3/d3-selection/namespaces.js
|
||||
448,d3/d3-selection/point.js
|
||||
259,d3/d3-selection/select.js
|
||||
282,d3/d3-selection/selectAll.js
|
||||
235,d3/d3-selection/selection/append.js
|
||||
1460,d3/d3-selection/selection/attr.js
|
||||
134,d3/d3-selection/selection/call.js
|
||||
1740,d3/d3-selection/selection/classed.js
|
||||
3597,d3/d3-selection/selection/data.js
|
||||
132,d3/d3-selection/selection/datum.js
|
||||
869,d3/d3-selection/selection/dispatch.js
|
||||
289,d3/d3-selection/selection/each.js
|
||||
53,d3/d3-selection/selection/empty.js
|
||||
792,d3/d3-selection/selection/enter.js
|
||||
176,d3/d3-selection/selection/exit.js
|
||||
546,d3/d3-selection/selection/filter.js
|
||||
520,d3/d3-selection/selection/html.js
|
||||
2216,d3/d3-selection/selection/index.js
|
||||
468,d3/d3-selection/selection/insert.js
|
||||
171,d3/d3-selection/selection/lower.js
|
||||
575,d3/d3-selection/selection/merge.js
|
||||
258,d3/d3-selection/selection/node.js
|
||||
140,d3/d3-selection/selection/nodes.js
|
||||
3119,d3/d3-selection/selection/on.js
|
||||
367,d3/d3-selection/selection/order.js
|
||||
617,d3/d3-selection/selection/property.js
|
||||
138,d3/d3-selection/selection/raise.js
|
||||
153,d3/d3-selection/selection/remove.js
|
||||
653,d3/d3-selection/selection/select.js
|
||||
550,d3/d3-selection/selection/selectAll.js
|
||||
98,d3/d3-selection/selection/size.js
|
||||
681,d3/d3-selection/selection/sort.js
|
||||
71,d3/d3-selection/selection/sparse.js
|
||||
889,d3/d3-selection/selection/style.js
|
||||
528,d3/d3-selection/selection/text.js
|
||||
152,d3/d3-selection/selector.js
|
||||
171,d3/d3-selection/selectorAll.js
|
||||
175,d3/d3-selection/sourceEvent.js
|
||||
407,d3/d3-selection/touch.js
|
||||
323,d3/d3-selection/touches.js
|
||||
218,d3/d3-selection/window.js
|
||||
8831,d3/d3-shape/arc.js
|
||||
2917,d3/d3-shape/area.js
|
||||
42,d3/d3-shape/array.js
|
||||
81,d3/d3-shape/constant.js
|
||||
1436,d3/d3-shape/curve/basis.js
|
||||
1530,d3/d3-shape/curve/basisClosed.js
|
||||
1069,d3/d3-shape/curve/basisOpen.js
|
||||
1081,d3/d3-shape/curve/bundle.js
|
||||
1633,d3/d3-shape/curve/cardinal.js
|
||||
1605,d3/d3-shape/curve/cardinalClosed.js
|
||||
1288,d3/d3-shape/curve/cardinalOpen.js
|
||||
2637,d3/d3-shape/curve/catmullRom.js
|
||||
2083,d3/d3-shape/curve/catmullRomClosed.js
|
||||
1760,d3/d3-shape/curve/catmullRomOpen.js
|
||||
738,d3/d3-shape/curve/linear.js
|
||||
514,d3/d3-shape/curve/linearClosed.js
|
||||
3203,d3/d3-shape/curve/monotone.js
|
||||
1761,d3/d3-shape/curve/natural.js
|
||||
655,d3/d3-shape/curve/radial.js
|
||||
1367,d3/d3-shape/curve/step.js
|
||||
86,d3/d3-shape/descending.js
|
||||
43,d3/d3-shape/identity.js
|
||||
1516,d3/d3-shape/line.js
|
||||
106,d3/d3-shape/math.js
|
||||
29,d3/d3-shape/noop.js
|
||||
319,d3/d3-shape/offset/expand.js
|
||||
310,d3/d3-shape/offset/none.js
|
||||
314,d3/d3-shape/offset/silhouette.js
|
||||
740,d3/d3-shape/offset/wiggle.js
|
||||
305,d3/d3-shape/order/ascending.js
|
||||
112,d3/d3-shape/order/descending.js
|
||||
545,d3/d3-shape/order/insideOut.js
|
||||
120,d3/d3-shape/order/none.js
|
||||
97,d3/d3-shape/order/reverse.js
|
||||
2336,d3/d3-shape/pie.js
|
||||
81,d3/d3-shape/point.js
|
||||
934,d3/d3-shape/radialArea.js
|
||||
396,d3/d3-shape/radialLine.js
|
||||
1432,d3/d3-shape/stack.js
|
||||
186,d3/d3-shape/symbol/circle.js
|
||||
476,d3/d3-shape/symbol/cross.js
|
||||
307,d3/d3-shape/symbol/diamond.js
|
||||
137,d3/d3-shape/symbol/square.js
|
||||
609,d3/d3-shape/symbol/star.js
|
||||
255,d3/d3-shape/symbol/triangle.js
|
||||
733,d3/d3-shape/symbol/wye.js
|
||||
1160,d3/d3-shape/symbol.js
|
||||
867,d3/d3-time-format/defaultLocale.js
|
||||
284,d3/d3-time-format/isoFormat.js
|
||||
319,d3/d3-time-format/isoParse.js
|
||||
13876,d3/d3-time-format/locale.js
|
||||
462,d3/d3-time/day.js
|
||||
164,d3/d3-time/duration.js
|
||||
569,d3/d3-time/hour.js
|
||||
1845,d3/d3-time/interval.js
|
||||
668,d3/d3-time/millisecond.js
|
||||
437,d3/d3-time/minute.js
|
||||
414,d3/d3-time/month.js
|
||||
440,d3/d3-time/second.js
|
||||
397,d3/d3-time/utcDay.js
|
||||
399,d3/d3-time/utcHour.js
|
||||
412,d3/d3-time/utcMinute.js
|
||||
453,d3/d3-time/utcMonth.js
|
||||
979,d3/d3-time/utcWeek.js
|
||||
808,d3/d3-time/utcYear.js
|
||||
963,d3/d3-time/week.js
|
||||
754,d3/d3-time/year.js
|
||||
400,d3/d3-timer/interval.js
|
||||
250,d3/d3-timer/timeout.js
|
||||
2771,d3/d3-timer/timer.js
|
||||
484,d3/d3-transition/active.js
|
||||
665,d3/d3-transition/interrupt.js
|
||||
245,d3/d3-transition/selection/index.js
|
||||
138,d3/d3-transition/selection/interrupt.js
|
||||
1090,d3/d3-transition/selection/transition.js
|
||||
2473,d3/d3-transition/transition/attr.js
|
||||
904,d3/d3-transition/transition/attrTween.js
|
||||
510,d3/d3-transition/transition/delay.js
|
||||
528,d3/d3-transition/transition/duration.js
|
||||
348,d3/d3-transition/transition/ease.js
|
||||
574,d3/d3-transition/transition/filter.js
|
||||
1892,d3/d3-transition/transition/index.js
|
||||
340,d3/d3-transition/transition/interpolate.js
|
||||
653,d3/d3-transition/transition/merge.js
|
||||
853,d3/d3-transition/transition/on.js
|
||||
284,d3/d3-transition/transition/remove.js
|
||||
4792,d3/d3-transition/transition/schedule.js
|
||||
826,d3/d3-transition/transition/select.js
|
||||
883,d3/d3-transition/transition/selectAll.js
|
||||
174,d3/d3-transition/transition/selection.js
|
||||
2119,d3/d3-transition/transition/style.js
|
||||
607,d3/d3-transition/transition/styleTween.js
|
||||
473,d3/d3-transition/transition/text.js
|
||||
691,d3/d3-transition/transition/transition.js
|
||||
2026,d3/d3-transition/transition/tween.js
|
||||
4381,d3/d3-voronoi/Beach.js
|
||||
4087,d3/d3-voronoi/Cell.js
|
||||
1632,d3/d3-voronoi/Circle.js
|
||||
72,d3/d3-voronoi/constant.js
|
||||
3415,d3/d3-voronoi/Diagram.js
|
||||
3634,d3/d3-voronoi/Edge.js
|
||||
81,d3/d3-voronoi/point.js
|
||||
5302,d3/d3-voronoi/RedBlackTree.js
|
||||
1420,d3/d3-voronoi/voronoi.js
|
||||
72,d3/d3-zoom/constant.js
|
||||
137,d3/d3-zoom/event.js
|
||||
202,d3/d3-zoom/noevent.js
|
||||
1336,d3/d3-zoom/transform.js
|
||||
12133,d3/d3-zoom/zoom.js
|
||||
|
337
VISUALIZACION/node_modules/force-graph/example/datasets/miserables.json
generated
vendored
Executable file
|
|
@ -0,0 +1,337 @@
|
|||
{
|
||||
"nodes": [
|
||||
{"id": "Myriel", "group": 1},
|
||||
{"id": "Napoleon", "group": 1},
|
||||
{"id": "Mlle.Baptistine", "group": 1},
|
||||
{"id": "Mme.Magloire", "group": 1},
|
||||
{"id": "CountessdeLo", "group": 1},
|
||||
{"id": "Geborand", "group": 1},
|
||||
{"id": "Champtercier", "group": 1},
|
||||
{"id": "Cravatte", "group": 1},
|
||||
{"id": "Count", "group": 1},
|
||||
{"id": "OldMan", "group": 1},
|
||||
{"id": "Labarre", "group": 2},
|
||||
{"id": "Valjean", "group": 2},
|
||||
{"id": "Marguerite", "group": 3},
|
||||
{"id": "Mme.deR", "group": 2},
|
||||
{"id": "Isabeau", "group": 2},
|
||||
{"id": "Gervais", "group": 2},
|
||||
{"id": "Tholomyes", "group": 3},
|
||||
{"id": "Listolier", "group": 3},
|
||||
{"id": "Fameuil", "group": 3},
|
||||
{"id": "Blacheville", "group": 3},
|
||||
{"id": "Favourite", "group": 3},
|
||||
{"id": "Dahlia", "group": 3},
|
||||
{"id": "Zephine", "group": 3},
|
||||
{"id": "Fantine", "group": 3},
|
||||
{"id": "Mme.Thenardier", "group": 4},
|
||||
{"id": "Thenardier", "group": 4},
|
||||
{"id": "Cosette", "group": 5},
|
||||
{"id": "Javert", "group": 4},
|
||||
{"id": "Fauchelevent", "group": 0},
|
||||
{"id": "Bamatabois", "group": 2},
|
||||
{"id": "Perpetue", "group": 3},
|
||||
{"id": "Simplice", "group": 2},
|
||||
{"id": "Scaufflaire", "group": 2},
|
||||
{"id": "Woman1", "group": 2},
|
||||
{"id": "Judge", "group": 2},
|
||||
{"id": "Champmathieu", "group": 2},
|
||||
{"id": "Brevet", "group": 2},
|
||||
{"id": "Chenildieu", "group": 2},
|
||||
{"id": "Cochepaille", "group": 2},
|
||||
{"id": "Pontmercy", "group": 4},
|
||||
{"id": "Boulatruelle", "group": 6},
|
||||
{"id": "Eponine", "group": 4},
|
||||
{"id": "Anzelma", "group": 4},
|
||||
{"id": "Woman2", "group": 5},
|
||||
{"id": "MotherInnocent", "group": 0},
|
||||
{"id": "Gribier", "group": 0},
|
||||
{"id": "Jondrette", "group": 7},
|
||||
{"id": "Mme.Burgon", "group": 7},
|
||||
{"id": "Gavroche", "group": 8},
|
||||
{"id": "Gillenormand", "group": 5},
|
||||
{"id": "Magnon", "group": 5},
|
||||
{"id": "Mlle.Gillenormand", "group": 5},
|
||||
{"id": "Mme.Pontmercy", "group": 5},
|
||||
{"id": "Mlle.Vaubois", "group": 5},
|
||||
{"id": "Lt.Gillenormand", "group": 5},
|
||||
{"id": "Marius", "group": 8},
|
||||
{"id": "BaronessT", "group": 5},
|
||||
{"id": "Mabeuf", "group": 8},
|
||||
{"id": "Enjolras", "group": 8},
|
||||
{"id": "Combeferre", "group": 8},
|
||||
{"id": "Prouvaire", "group": 8},
|
||||
{"id": "Feuilly", "group": 8},
|
||||
{"id": "Courfeyrac", "group": 8},
|
||||
{"id": "Bahorel", "group": 8},
|
||||
{"id": "Bossuet", "group": 8},
|
||||
{"id": "Joly", "group": 8},
|
||||
{"id": "Grantaire", "group": 8},
|
||||
{"id": "MotherPlutarch", "group": 9},
|
||||
{"id": "Gueulemer", "group": 4},
|
||||
{"id": "Babet", "group": 4},
|
||||
{"id": "Claquesous", "group": 4},
|
||||
{"id": "Montparnasse", "group": 4},
|
||||
{"id": "Toussaint", "group": 5},
|
||||
{"id": "Child1", "group": 10},
|
||||
{"id": "Child2", "group": 10},
|
||||
{"id": "Brujon", "group": 4},
|
||||
{"id": "Mme.Hucheloup", "group": 8}
|
||||
],
|
||||
"links": [
|
||||
{"source": "Napoleon", "target": "Myriel", "value": 1},
|
||||
{"source": "Mlle.Baptistine", "target": "Myriel", "value": 8},
|
||||
{"source": "Mme.Magloire", "target": "Myriel", "value": 10},
|
||||
{"source": "Mme.Magloire", "target": "Mlle.Baptistine", "value": 6},
|
||||
{"source": "CountessdeLo", "target": "Myriel", "value": 1},
|
||||
{"source": "Geborand", "target": "Myriel", "value": 1},
|
||||
{"source": "Champtercier", "target": "Myriel", "value": 1},
|
||||
{"source": "Cravatte", "target": "Myriel", "value": 1},
|
||||
{"source": "Count", "target": "Myriel", "value": 2},
|
||||
{"source": "OldMan", "target": "Myriel", "value": 1},
|
||||
{"source": "Valjean", "target": "Labarre", "value": 1},
|
||||
{"source": "Valjean", "target": "Mme.Magloire", "value": 3},
|
||||
{"source": "Valjean", "target": "Mlle.Baptistine", "value": 3},
|
||||
{"source": "Valjean", "target": "Myriel", "value": 5},
|
||||
{"source": "Marguerite", "target": "Valjean", "value": 1},
|
||||
{"source": "Mme.deR", "target": "Valjean", "value": 1},
|
||||
{"source": "Isabeau", "target": "Valjean", "value": 1},
|
||||
{"source": "Gervais", "target": "Valjean", "value": 1},
|
||||
{"source": "Listolier", "target": "Tholomyes", "value": 4},
|
||||
{"source": "Fameuil", "target": "Tholomyes", "value": 4},
|
||||
{"source": "Fameuil", "target": "Listolier", "value": 4},
|
||||
{"source": "Blacheville", "target": "Tholomyes", "value": 4},
|
||||
{"source": "Blacheville", "target": "Listolier", "value": 4},
|
||||
{"source": "Blacheville", "target": "Fameuil", "value": 4},
|
||||
{"source": "Favourite", "target": "Tholomyes", "value": 3},
|
||||
{"source": "Favourite", "target": "Listolier", "value": 3},
|
||||
{"source": "Favourite", "target": "Fameuil", "value": 3},
|
||||
{"source": "Favourite", "target": "Blacheville", "value": 4},
|
||||
{"source": "Dahlia", "target": "Tholomyes", "value": 3},
|
||||
{"source": "Dahlia", "target": "Listolier", "value": 3},
|
||||
{"source": "Dahlia", "target": "Fameuil", "value": 3},
|
||||
{"source": "Dahlia", "target": "Blacheville", "value": 3},
|
||||
{"source": "Dahlia", "target": "Favourite", "value": 5},
|
||||
{"source": "Zephine", "target": "Tholomyes", "value": 3},
|
||||
{"source": "Zephine", "target": "Listolier", "value": 3},
|
||||
{"source": "Zephine", "target": "Fameuil", "value": 3},
|
||||
{"source": "Zephine", "target": "Blacheville", "value": 3},
|
||||
{"source": "Zephine", "target": "Favourite", "value": 4},
|
||||
{"source": "Zephine", "target": "Dahlia", "value": 4},
|
||||
{"source": "Fantine", "target": "Tholomyes", "value": 3},
|
||||
{"source": "Fantine", "target": "Listolier", "value": 3},
|
||||
{"source": "Fantine", "target": "Fameuil", "value": 3},
|
||||
{"source": "Fantine", "target": "Blacheville", "value": 3},
|
||||
{"source": "Fantine", "target": "Favourite", "value": 4},
|
||||
{"source": "Fantine", "target": "Dahlia", "value": 4},
|
||||
{"source": "Fantine", "target": "Zephine", "value": 4},
|
||||
{"source": "Fantine", "target": "Marguerite", "value": 2},
|
||||
{"source": "Fantine", "target": "Valjean", "value": 9},
|
||||
{"source": "Mme.Thenardier", "target": "Fantine", "value": 2},
|
||||
{"source": "Mme.Thenardier", "target": "Valjean", "value": 7},
|
||||
{"source": "Thenardier", "target": "Mme.Thenardier", "value": 13},
|
||||
{"source": "Thenardier", "target": "Fantine", "value": 1},
|
||||
{"source": "Thenardier", "target": "Valjean", "value": 12},
|
||||
{"source": "Cosette", "target": "Mme.Thenardier", "value": 4},
|
||||
{"source": "Cosette", "target": "Valjean", "value": 31},
|
||||
{"source": "Cosette", "target": "Tholomyes", "value": 1},
|
||||
{"source": "Cosette", "target": "Thenardier", "value": 1},
|
||||
{"source": "Javert", "target": "Valjean", "value": 17},
|
||||
{"source": "Javert", "target": "Fantine", "value": 5},
|
||||
{"source": "Javert", "target": "Thenardier", "value": 5},
|
||||
{"source": "Javert", "target": "Mme.Thenardier", "value": 1},
|
||||
{"source": "Javert", "target": "Cosette", "value": 1},
|
||||
{"source": "Fauchelevent", "target": "Valjean", "value": 8},
|
||||
{"source": "Fauchelevent", "target": "Javert", "value": 1},
|
||||
{"source": "Bamatabois", "target": "Fantine", "value": 1},
|
||||
{"source": "Bamatabois", "target": "Javert", "value": 1},
|
||||
{"source": "Bamatabois", "target": "Valjean", "value": 2},
|
||||
{"source": "Perpetue", "target": "Fantine", "value": 1},
|
||||
{"source": "Simplice", "target": "Perpetue", "value": 2},
|
||||
{"source": "Simplice", "target": "Valjean", "value": 3},
|
||||
{"source": "Simplice", "target": "Fantine", "value": 2},
|
||||
{"source": "Simplice", "target": "Javert", "value": 1},
|
||||
{"source": "Scaufflaire", "target": "Valjean", "value": 1},
|
||||
{"source": "Woman1", "target": "Valjean", "value": 2},
|
||||
{"source": "Woman1", "target": "Javert", "value": 1},
|
||||
{"source": "Judge", "target": "Valjean", "value": 3},
|
||||
{"source": "Judge", "target": "Bamatabois", "value": 2},
|
||||
{"source": "Champmathieu", "target": "Valjean", "value": 3},
|
||||
{"source": "Champmathieu", "target": "Judge", "value": 3},
|
||||
{"source": "Champmathieu", "target": "Bamatabois", "value": 2},
|
||||
{"source": "Brevet", "target": "Judge", "value": 2},
|
||||
{"source": "Brevet", "target": "Champmathieu", "value": 2},
|
||||
{"source": "Brevet", "target": "Valjean", "value": 2},
|
||||
{"source": "Brevet", "target": "Bamatabois", "value": 1},
|
||||
{"source": "Chenildieu", "target": "Judge", "value": 2},
|
||||
{"source": "Chenildieu", "target": "Champmathieu", "value": 2},
|
||||
{"source": "Chenildieu", "target": "Brevet", "value": 2},
|
||||
{"source": "Chenildieu", "target": "Valjean", "value": 2},
|
||||
{"source": "Chenildieu", "target": "Bamatabois", "value": 1},
|
||||
{"source": "Cochepaille", "target": "Judge", "value": 2},
|
||||
{"source": "Cochepaille", "target": "Champmathieu", "value": 2},
|
||||
{"source": "Cochepaille", "target": "Brevet", "value": 2},
|
||||
{"source": "Cochepaille", "target": "Chenildieu", "value": 2},
|
||||
{"source": "Cochepaille", "target": "Valjean", "value": 2},
|
||||
{"source": "Cochepaille", "target": "Bamatabois", "value": 1},
|
||||
{"source": "Pontmercy", "target": "Thenardier", "value": 1},
|
||||
{"source": "Boulatruelle", "target": "Thenardier", "value": 1},
|
||||
{"source": "Eponine", "target": "Mme.Thenardier", "value": 2},
|
||||
{"source": "Eponine", "target": "Thenardier", "value": 3},
|
||||
{"source": "Anzelma", "target": "Eponine", "value": 2},
|
||||
{"source": "Anzelma", "target": "Thenardier", "value": 2},
|
||||
{"source": "Anzelma", "target": "Mme.Thenardier", "value": 1},
|
||||
{"source": "Woman2", "target": "Valjean", "value": 3},
|
||||
{"source": "Woman2", "target": "Cosette", "value": 1},
|
||||
{"source": "Woman2", "target": "Javert", "value": 1},
|
||||
{"source": "MotherInnocent", "target": "Fauchelevent", "value": 3},
|
||||
{"source": "MotherInnocent", "target": "Valjean", "value": 1},
|
||||
{"source": "Gribier", "target": "Fauchelevent", "value": 2},
|
||||
{"source": "Mme.Burgon", "target": "Jondrette", "value": 1},
|
||||
{"source": "Gavroche", "target": "Mme.Burgon", "value": 2},
|
||||
{"source": "Gavroche", "target": "Thenardier", "value": 1},
|
||||
{"source": "Gavroche", "target": "Javert", "value": 1},
|
||||
{"source": "Gavroche", "target": "Valjean", "value": 1},
|
||||
{"source": "Gillenormand", "target": "Cosette", "value": 3},
|
||||
{"source": "Gillenormand", "target": "Valjean", "value": 2},
|
||||
{"source": "Magnon", "target": "Gillenormand", "value": 1},
|
||||
{"source": "Magnon", "target": "Mme.Thenardier", "value": 1},
|
||||
{"source": "Mlle.Gillenormand", "target": "Gillenormand", "value": 9},
|
||||
{"source": "Mlle.Gillenormand", "target": "Cosette", "value": 2},
|
||||
{"source": "Mlle.Gillenormand", "target": "Valjean", "value": 2},
|
||||
{"source": "Mme.Pontmercy", "target": "Mlle.Gillenormand", "value": 1},
|
||||
{"source": "Mme.Pontmercy", "target": "Pontmercy", "value": 1},
|
||||
{"source": "Mlle.Vaubois", "target": "Mlle.Gillenormand", "value": 1},
|
||||
{"source": "Lt.Gillenormand", "target": "Mlle.Gillenormand", "value": 2},
|
||||
{"source": "Lt.Gillenormand", "target": "Gillenormand", "value": 1},
|
||||
{"source": "Lt.Gillenormand", "target": "Cosette", "value": 1},
|
||||
{"source": "Marius", "target": "Mlle.Gillenormand", "value": 6},
|
||||
{"source": "Marius", "target": "Gillenormand", "value": 12},
|
||||
{"source": "Marius", "target": "Pontmercy", "value": 1},
|
||||
{"source": "Marius", "target": "Lt.Gillenormand", "value": 1},
|
||||
{"source": "Marius", "target": "Cosette", "value": 21},
|
||||
{"source": "Marius", "target": "Valjean", "value": 19},
|
||||
{"source": "Marius", "target": "Tholomyes", "value": 1},
|
||||
{"source": "Marius", "target": "Thenardier", "value": 2},
|
||||
{"source": "Marius", "target": "Eponine", "value": 5},
|
||||
{"source": "Marius", "target": "Gavroche", "value": 4},
|
||||
{"source": "BaronessT", "target": "Gillenormand", "value": 1},
|
||||
{"source": "BaronessT", "target": "Marius", "value": 1},
|
||||
{"source": "Mabeuf", "target": "Marius", "value": 1},
|
||||
{"source": "Mabeuf", "target": "Eponine", "value": 1},
|
||||
{"source": "Mabeuf", "target": "Gavroche", "value": 1},
|
||||
{"source": "Enjolras", "target": "Marius", "value": 7},
|
||||
{"source": "Enjolras", "target": "Gavroche", "value": 7},
|
||||
{"source": "Enjolras", "target": "Javert", "value": 6},
|
||||
{"source": "Enjolras", "target": "Mabeuf", "value": 1},
|
||||
{"source": "Enjolras", "target": "Valjean", "value": 4},
|
||||
{"source": "Combeferre", "target": "Enjolras", "value": 15},
|
||||
{"source": "Combeferre", "target": "Marius", "value": 5},
|
||||
{"source": "Combeferre", "target": "Gavroche", "value": 6},
|
||||
{"source": "Combeferre", "target": "Mabeuf", "value": 2},
|
||||
{"source": "Prouvaire", "target": "Gavroche", "value": 1},
|
||||
{"source": "Prouvaire", "target": "Enjolras", "value": 4},
|
||||
{"source": "Prouvaire", "target": "Combeferre", "value": 2},
|
||||
{"source": "Feuilly", "target": "Gavroche", "value": 2},
|
||||
{"source": "Feuilly", "target": "Enjolras", "value": 6},
|
||||
{"source": "Feuilly", "target": "Prouvaire", "value": 2},
|
||||
{"source": "Feuilly", "target": "Combeferre", "value": 5},
|
||||
{"source": "Feuilly", "target": "Mabeuf", "value": 1},
|
||||
{"source": "Feuilly", "target": "Marius", "value": 1},
|
||||
{"source": "Courfeyrac", "target": "Marius", "value": 9},
|
||||
{"source": "Courfeyrac", "target": "Enjolras", "value": 17},
|
||||
{"source": "Courfeyrac", "target": "Combeferre", "value": 13},
|
||||
{"source": "Courfeyrac", "target": "Gavroche", "value": 7},
|
||||
{"source": "Courfeyrac", "target": "Mabeuf", "value": 2},
|
||||
{"source": "Courfeyrac", "target": "Eponine", "value": 1},
|
||||
{"source": "Courfeyrac", "target": "Feuilly", "value": 6},
|
||||
{"source": "Courfeyrac", "target": "Prouvaire", "value": 3},
|
||||
{"source": "Bahorel", "target": "Combeferre", "value": 5},
|
||||
{"source": "Bahorel", "target": "Gavroche", "value": 5},
|
||||
{"source": "Bahorel", "target": "Courfeyrac", "value": 6},
|
||||
{"source": "Bahorel", "target": "Mabeuf", "value": 2},
|
||||
{"source": "Bahorel", "target": "Enjolras", "value": 4},
|
||||
{"source": "Bahorel", "target": "Feuilly", "value": 3},
|
||||
{"source": "Bahorel", "target": "Prouvaire", "value": 2},
|
||||
{"source": "Bahorel", "target": "Marius", "value": 1},
|
||||
{"source": "Bossuet", "target": "Marius", "value": 5},
|
||||
{"source": "Bossuet", "target": "Courfeyrac", "value": 12},
|
||||
{"source": "Bossuet", "target": "Gavroche", "value": 5},
|
||||
{"source": "Bossuet", "target": "Bahorel", "value": 4},
|
||||
{"source": "Bossuet", "target": "Enjolras", "value": 10},
|
||||
{"source": "Bossuet", "target": "Feuilly", "value": 6},
|
||||
{"source": "Bossuet", "target": "Prouvaire", "value": 2},
|
||||
{"source": "Bossuet", "target": "Combeferre", "value": 9},
|
||||
{"source": "Bossuet", "target": "Mabeuf", "value": 1},
|
||||
{"source": "Bossuet", "target": "Valjean", "value": 1},
|
||||
{"source": "Joly", "target": "Bahorel", "value": 5},
|
||||
{"source": "Joly", "target": "Bossuet", "value": 7},
|
||||
{"source": "Joly", "target": "Gavroche", "value": 3},
|
||||
{"source": "Joly", "target": "Courfeyrac", "value": 5},
|
||||
{"source": "Joly", "target": "Enjolras", "value": 5},
|
||||
{"source": "Joly", "target": "Feuilly", "value": 5},
|
||||
{"source": "Joly", "target": "Prouvaire", "value": 2},
|
||||
{"source": "Joly", "target": "Combeferre", "value": 5},
|
||||
{"source": "Joly", "target": "Mabeuf", "value": 1},
|
||||
{"source": "Joly", "target": "Marius", "value": 2},
|
||||
{"source": "Grantaire", "target": "Bossuet", "value": 3},
|
||||
{"source": "Grantaire", "target": "Enjolras", "value": 3},
|
||||
{"source": "Grantaire", "target": "Combeferre", "value": 1},
|
||||
{"source": "Grantaire", "target": "Courfeyrac", "value": 2},
|
||||
{"source": "Grantaire", "target": "Joly", "value": 2},
|
||||
{"source": "Grantaire", "target": "Gavroche", "value": 1},
|
||||
{"source": "Grantaire", "target": "Bahorel", "value": 1},
|
||||
{"source": "Grantaire", "target": "Feuilly", "value": 1},
|
||||
{"source": "Grantaire", "target": "Prouvaire", "value": 1},
|
||||
{"source": "MotherPlutarch", "target": "Mabeuf", "value": 3},
|
||||
{"source": "Gueulemer", "target": "Thenardier", "value": 5},
|
||||
{"source": "Gueulemer", "target": "Valjean", "value": 1},
|
||||
{"source": "Gueulemer", "target": "Mme.Thenardier", "value": 1},
|
||||
{"source": "Gueulemer", "target": "Javert", "value": 1},
|
||||
{"source": "Gueulemer", "target": "Gavroche", "value": 1},
|
||||
{"source": "Gueulemer", "target": "Eponine", "value": 1},
|
||||
{"source": "Babet", "target": "Thenardier", "value": 6},
|
||||
{"source": "Babet", "target": "Gueulemer", "value": 6},
|
||||
{"source": "Babet", "target": "Valjean", "value": 1},
|
||||
{"source": "Babet", "target": "Mme.Thenardier", "value": 1},
|
||||
{"source": "Babet", "target": "Javert", "value": 2},
|
||||
{"source": "Babet", "target": "Gavroche", "value": 1},
|
||||
{"source": "Babet", "target": "Eponine", "value": 1},
|
||||
{"source": "Claquesous", "target": "Thenardier", "value": 4},
|
||||
{"source": "Claquesous", "target": "Babet", "value": 4},
|
||||
{"source": "Claquesous", "target": "Gueulemer", "value": 4},
|
||||
{"source": "Claquesous", "target": "Valjean", "value": 1},
|
||||
{"source": "Claquesous", "target": "Mme.Thenardier", "value": 1},
|
||||
{"source": "Claquesous", "target": "Javert", "value": 1},
|
||||
{"source": "Claquesous", "target": "Eponine", "value": 1},
|
||||
{"source": "Claquesous", "target": "Enjolras", "value": 1},
|
||||
{"source": "Montparnasse", "target": "Javert", "value": 1},
|
||||
{"source": "Montparnasse", "target": "Babet", "value": 2},
|
||||
{"source": "Montparnasse", "target": "Gueulemer", "value": 2},
|
||||
{"source": "Montparnasse", "target": "Claquesous", "value": 2},
|
||||
{"source": "Montparnasse", "target": "Valjean", "value": 1},
|
||||
{"source": "Montparnasse", "target": "Gavroche", "value": 1},
|
||||
{"source": "Montparnasse", "target": "Eponine", "value": 1},
|
||||
{"source": "Montparnasse", "target": "Thenardier", "value": 1},
|
||||
{"source": "Toussaint", "target": "Cosette", "value": 2},
|
||||
{"source": "Toussaint", "target": "Javert", "value": 1},
|
||||
{"source": "Toussaint", "target": "Valjean", "value": 1},
|
||||
{"source": "Child1", "target": "Gavroche", "value": 2},
|
||||
{"source": "Child2", "target": "Gavroche", "value": 2},
|
||||
{"source": "Child2", "target": "Child1", "value": 3},
|
||||
{"source": "Brujon", "target": "Babet", "value": 3},
|
||||
{"source": "Brujon", "target": "Gueulemer", "value": 3},
|
||||
{"source": "Brujon", "target": "Thenardier", "value": 3},
|
||||
{"source": "Brujon", "target": "Gavroche", "value": 1},
|
||||
{"source": "Brujon", "target": "Eponine", "value": 1},
|
||||
{"source": "Brujon", "target": "Claquesous", "value": 1},
|
||||
{"source": "Brujon", "target": "Montparnasse", "value": 1},
|
||||
{"source": "Mme.Hucheloup", "target": "Bossuet", "value": 1},
|
||||
{"source": "Mme.Hucheloup", "target": "Joly", "value": 1},
|
||||
{"source": "Mme.Hucheloup", "target": "Grantaire", "value": 1},
|
||||
{"source": "Mme.Hucheloup", "target": "Bahorel", "value": 1},
|
||||
{"source": "Mme.Hucheloup", "target": "Courfeyrac", "value": 1},
|
||||
{"source": "Mme.Hucheloup", "target": "Gavroche", "value": 1},
|
||||
{"source": "Mme.Hucheloup", "target": "Enjolras", "value": 1}
|
||||
]
|
||||
}
|
||||
74090
VISUALIZACION/node_modules/force-graph/example/datasets/mplate.mtx
generated
vendored
Executable file
29
VISUALIZACION/node_modules/force-graph/example/directional-links-arrows/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,29 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
// Random tree
|
||||
const N = 40;
|
||||
const gData = {
|
||||
nodes: [...Array(N).keys()].map(i => ({ id: i })),
|
||||
links: [...Array(N).keys()]
|
||||
.filter(id => id)
|
||||
.map(id => ({
|
||||
source: id,
|
||||
target: Math.round(Math.random() * (id-1))
|
||||
}))
|
||||
};
|
||||
|
||||
const Graph = ForceGraph()
|
||||
(document.getElementById('graph'))
|
||||
.graphData(gData)
|
||||
.linkDirectionalArrowLength(6);
|
||||
</script>
|
||||
</body>
|
||||
22
VISUALIZACION/node_modules/force-graph/example/directional-links-particles/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,22 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
fetch('../datasets/miserables.json').then(res => res.json()).then(data => {
|
||||
const Graph = ForceGraph()
|
||||
(document.getElementById('graph'))
|
||||
.graphData(data)
|
||||
.nodeLabel('id')
|
||||
.nodeAutoColorBy('group')
|
||||
.linkDirectionalParticles("value")
|
||||
.linkDirectionalParticleSpeed(d => d.value * 0.001);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
42
VISUALIZACION/node_modules/force-graph/example/dynamic/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,42 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
const initData = {
|
||||
nodes: [ {id: 0 } ],
|
||||
links: []
|
||||
};
|
||||
|
||||
const elem = document.getElementById("graph");
|
||||
|
||||
const Graph = ForceGraph()(elem)
|
||||
.onNodeClick(removeNode)
|
||||
.graphData(initData);
|
||||
|
||||
setInterval(() => {
|
||||
const { nodes, links } = Graph.graphData();
|
||||
const id = nodes.length;
|
||||
Graph.graphData({
|
||||
nodes: [...nodes, { id }],
|
||||
links: [...links, { source: id, target: Math.round(Math.random() * (id-1)) }]
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
//
|
||||
|
||||
function removeNode(node) {
|
||||
let { nodes, links } = Graph.graphData();
|
||||
links = links.filter(l => l.source !== node && l.target !== node); // Remove links attached to node
|
||||
nodes.splice(node.id, 1); // Remove node
|
||||
nodes.forEach((n, idx) => { n.id = idx; }); // Reset node ids to array index
|
||||
Graph.graphData({ nodes, links });
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
50
VISUALIZACION/node_modules/force-graph/example/emit-particles/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,50 @@
|
|||
<head>
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
|
||||
#emit-particles-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
<button id="emit-particles-btn">Emit 10 Random Particles</button>
|
||||
|
||||
<script>
|
||||
// Random tree
|
||||
const N = 50;
|
||||
const links = [...Array(N).keys()]
|
||||
.filter(id => id)
|
||||
.map(id => ({
|
||||
source: id,
|
||||
target: Math.round(Math.random() * (id-1))
|
||||
}));
|
||||
const gData = {
|
||||
nodes: [...Array(N).keys()].map(i => ({ id: i })),
|
||||
links
|
||||
};
|
||||
|
||||
const Graph = ForceGraph()
|
||||
(document.getElementById('graph'))
|
||||
.linkDirectionalParticleColor(() => 'red')
|
||||
.linkHoverPrecision(10)
|
||||
.graphData(gData);
|
||||
|
||||
Graph.onLinkClick(Graph.emitParticle); // emit particles on link click
|
||||
|
||||
document.getElementById('emit-particles-btn').addEventListener('click', () => {
|
||||
[...Array(10).keys()].forEach(() => {
|
||||
const link = links[Math.floor(Math.random() * links.length)];
|
||||
Graph.emitParticle(link);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
66
VISUALIZACION/node_modules/force-graph/example/expandable-nodes/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,66 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!-- <script src="../../dist/force-graph.js"></script>-->
|
||||
|
||||
<style>
|
||||
.clickable { cursor: unset !important }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
const rootId = 0;
|
||||
|
||||
// Random tree
|
||||
const N = 300;
|
||||
const gData = {
|
||||
nodes: [...Array(N).keys()].map(i => ({ id: i, collapsed: i !== rootId, childLinks: [] })),
|
||||
links: [...Array(N).keys()]
|
||||
.filter(id => id)
|
||||
.map(id => ({
|
||||
source: Math.round(Math.random() * (id - 1)),
|
||||
target: id
|
||||
}))
|
||||
};
|
||||
|
||||
// link parent/children
|
||||
const nodesById = Object.fromEntries(gData.nodes.map(node => [node.id, node]));
|
||||
gData.links.forEach(link => {
|
||||
nodesById[link.source].childLinks.push(link);
|
||||
});
|
||||
|
||||
const getPrunedTree = () => {
|
||||
const visibleNodes = [];
|
||||
const visibleLinks = [];
|
||||
|
||||
(function traverseTree(node = nodesById[rootId]) {
|
||||
visibleNodes.push(node);
|
||||
if (node.collapsed) return;
|
||||
visibleLinks.push(...node.childLinks);
|
||||
node.childLinks
|
||||
.map(link => ((typeof link.target) === 'object') ? link.target : nodesById[link.target]) // get child node
|
||||
.forEach(traverseTree);
|
||||
})(); // IIFE
|
||||
|
||||
return { nodes: visibleNodes, links: visibleLinks };
|
||||
};
|
||||
|
||||
const elem = document.getElementById('graph');
|
||||
const Graph = ForceGraph()(elem)
|
||||
.graphData(getPrunedTree())
|
||||
.onNodeHover(node => elem.style.cursor = node && node.childLinks.length ? 'pointer' : null)
|
||||
.onNodeClick(node => {
|
||||
if (node.childLinks.length) {
|
||||
node.collapsed = !node.collapsed; // toggle collapse state
|
||||
Graph.graphData(getPrunedTree());
|
||||
}
|
||||
})
|
||||
.linkDirectionalParticles(1)
|
||||
.linkDirectionalParticleWidth(2.5)
|
||||
.nodeColor(node => !node.childLinks.length ? 'green' : node.collapsed ? 'red' : 'yellow');
|
||||
</script>
|
||||
</body>
|
||||
85
VISUALIZACION/node_modules/force-graph/example/expandable-tree/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,85 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/d3-dsv"></script>
|
||||
<script src="//unpkg.com/d3-quadtree"></script>
|
||||
<script src="//unpkg.com/d3-force"></script>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
|
||||
<style>
|
||||
.clickable { cursor: unset !important }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
fetch('../datasets/d3-dependencies.csv').then(r => r.text()).then(d3.csvParse).then(data => {
|
||||
const nodes = [], links = [];
|
||||
data.forEach(({ size, path }) => {
|
||||
const levels = path.split('/'),
|
||||
level = levels.length - 1,
|
||||
module = level > 0 ? levels[1] : null,
|
||||
leaf = levels.pop(),
|
||||
parent = levels.join('/');
|
||||
|
||||
const node = {
|
||||
id: path,
|
||||
leaf,
|
||||
module,
|
||||
collapsed: level > 0,
|
||||
childLinks: []
|
||||
};
|
||||
|
||||
nodes.push(node);
|
||||
|
||||
if (parent) {
|
||||
links.push({ source: parent, target: path });
|
||||
}
|
||||
});
|
||||
|
||||
const rootId = 'd3';
|
||||
|
||||
// link parent/children
|
||||
const nodesById = Object.fromEntries(nodes.map(node => [node.id, node]));
|
||||
links.forEach(link => {
|
||||
nodesById[link.source].childLinks.push(link);
|
||||
});
|
||||
|
||||
const getPrunedTree = () => {
|
||||
const visibleNodes = [];
|
||||
const visibleLinks = [];
|
||||
|
||||
(function traverseTree(node = nodesById[rootId]) {
|
||||
visibleNodes.push(node);
|
||||
if (node.collapsed) return;
|
||||
visibleLinks.push(...node.childLinks);
|
||||
node.childLinks
|
||||
.map(link => ((typeof link.target) === 'object') ? link.target : nodesById[link.target]) // get child node
|
||||
.forEach(traverseTree);
|
||||
})(); // IIFE
|
||||
|
||||
return { nodes: visibleNodes, links: visibleLinks };
|
||||
};
|
||||
|
||||
const elem = document.getElementById('graph');
|
||||
const Graph = ForceGraph()
|
||||
(elem)
|
||||
.graphData(getPrunedTree())
|
||||
.nodeLabel('id')
|
||||
.nodeColor(node => !node.childLinks.length ? 'green' : node.collapsed ? 'red' : 'yellow')
|
||||
.onNodeHover(node => elem.style.cursor = node && node.childLinks.length ? 'pointer' : null)
|
||||
.onNodeClick(node => {
|
||||
node.collapsed = !node.collapsed; // toggle collapse state
|
||||
Graph.graphData(getPrunedTree());
|
||||
})
|
||||
.dagMode('td')
|
||||
.dagLevelDistance(90)
|
||||
.d3Force('collision', d3.forceCollide(node => Graph.nodeRelSize()))
|
||||
.warmupTicks(250);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
34
VISUALIZACION/node_modules/force-graph/example/fit-to-canvas/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,34 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!-- <script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
// Random tree
|
||||
const N = 100;
|
||||
const gData = {
|
||||
nodes: [...Array(N).keys()].map(i => ({ id: i })),
|
||||
links: [...Array(N).keys()]
|
||||
.filter(id => id)
|
||||
.map(id => ({
|
||||
source: id,
|
||||
target: Math.round(Math.random() * (id-1))
|
||||
}))
|
||||
};
|
||||
|
||||
const Graph = ForceGraph()
|
||||
(document.getElementById('graph'))
|
||||
.cooldownTicks(100)
|
||||
.graphData(gData);
|
||||
|
||||
Graph.d3Force('center', null);
|
||||
|
||||
// fit to canvas when engine stops
|
||||
Graph.onEngineStop(() => Graph.zoomToFit(400));
|
||||
</script>
|
||||
</body>
|
||||
24
VISUALIZACION/node_modules/force-graph/example/fix-dragged-nodes/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,24 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
fetch('../datasets/miserables.json').then(res => res.json()).then(data => {
|
||||
const Graph = ForceGraph()
|
||||
(document.getElementById('graph'))
|
||||
.graphData(data)
|
||||
.nodeLabel('id')
|
||||
.nodeAutoColorBy('group')
|
||||
.onNodeDragEnd(node => {
|
||||
node.fx = node.x;
|
||||
node.fy = node.y;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
84
VISUALIZACION/node_modules/force-graph/example/highlight/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,84 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
// Random tree
|
||||
const N = 80;
|
||||
const gData = {
|
||||
nodes: [...Array(N).keys()].map(i => ({ id: i })),
|
||||
links: [...Array(N).keys()]
|
||||
.filter(id => id)
|
||||
.map(id => ({
|
||||
source: id,
|
||||
target: Math.round(Math.random() * (id-1))
|
||||
}))
|
||||
};
|
||||
|
||||
// cross-link node objects
|
||||
gData.links.forEach(link => {
|
||||
const a = gData.nodes[link.source];
|
||||
const b = gData.nodes[link.target];
|
||||
!a.neighbors && (a.neighbors = []);
|
||||
!b.neighbors && (b.neighbors = []);
|
||||
a.neighbors.push(b);
|
||||
b.neighbors.push(a);
|
||||
|
||||
!a.links && (a.links = []);
|
||||
!b.links && (b.links = []);
|
||||
a.links.push(link);
|
||||
b.links.push(link);
|
||||
});
|
||||
|
||||
const NODE_R = 8;
|
||||
|
||||
const highlightNodes = new Set();
|
||||
const highlightLinks = new Set();
|
||||
let hoverNode = null;
|
||||
|
||||
const elem = document.getElementById('graph');
|
||||
|
||||
ForceGraph()(elem)
|
||||
.graphData(gData)
|
||||
.nodeRelSize(NODE_R)
|
||||
.onNodeHover(node => {
|
||||
highlightNodes.clear();
|
||||
highlightLinks.clear();
|
||||
if (node) {
|
||||
highlightNodes.add(node);
|
||||
node.neighbors.forEach(neighbor => highlightNodes.add(neighbor));
|
||||
node.links.forEach(link => highlightLinks.add(link));
|
||||
}
|
||||
|
||||
hoverNode = node || null;
|
||||
})
|
||||
.onLinkHover(link => {
|
||||
highlightNodes.clear();
|
||||
highlightLinks.clear();
|
||||
|
||||
if (link) {
|
||||
highlightLinks.add(link);
|
||||
highlightNodes.add(link.source);
|
||||
highlightNodes.add(link.target);
|
||||
}
|
||||
})
|
||||
.autoPauseRedraw(false) // keep redrawing after engine has stopped
|
||||
.linkWidth(link => highlightLinks.has(link) ? 5 : 1)
|
||||
.linkDirectionalParticles(4)
|
||||
.linkDirectionalParticleWidth(link => highlightLinks.has(link) ? 4 : 0)
|
||||
.nodeCanvasObjectMode(node => highlightNodes.has(node) ? 'before' : undefined)
|
||||
.nodeCanvasObject((node, ctx) => {
|
||||
// add ring just for highlighted nodes
|
||||
ctx.beginPath();
|
||||
ctx.arc(node.x, node.y, NODE_R * 1.4, 0, 2 * Math.PI, false);
|
||||
ctx.fillStyle = node === hoverNode ? 'red' : 'orange';
|
||||
ctx.fill();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
37
VISUALIZACION/node_modules/force-graph/example/huge-1M/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,37 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
window.devicePixelRatio = 1; // use standard resolution in retina displays
|
||||
|
||||
// Random tree
|
||||
const N = 500000;
|
||||
const gData = {
|
||||
nodes: [...Array(N).keys()].map(i => ({ id: i })),
|
||||
links: [...Array(N).keys()]
|
||||
.filter(id => id)
|
||||
.map(id => ({
|
||||
source: id,
|
||||
target: Math.round(Math.random() * (id-1))
|
||||
}))
|
||||
};
|
||||
|
||||
const Graph = ForceGraph()
|
||||
(document.getElementById('graph'))
|
||||
.linkColor(() => 'rgba(0,0,0,0.04)')
|
||||
.enablePointerInteraction(false)
|
||||
.d3AlphaDecay(0)
|
||||
.d3VelocityDecay(0.08)
|
||||
.warmupTicks(20)
|
||||
.cooldownTicks(0)
|
||||
.zoom(0.01)
|
||||
.graphData(gData);
|
||||
</script>
|
||||
</body>
|
||||
BIN
VISUALIZACION/node_modules/force-graph/example/img-nodes/imgs/cat.jpg
generated
vendored
Executable file
|
After Width: | Height: | Size: 35 KiB |
BIN
VISUALIZACION/node_modules/force-graph/example/img-nodes/imgs/dog.jpg
generated
vendored
Executable file
|
After Width: | Height: | Size: 40 KiB |
BIN
VISUALIZACION/node_modules/force-graph/example/img-nodes/imgs/eagle.jpg
generated
vendored
Executable file
|
After Width: | Height: | Size: 30 KiB |
BIN
VISUALIZACION/node_modules/force-graph/example/img-nodes/imgs/elephant.jpg
generated
vendored
Executable file
|
After Width: | Height: | Size: 45 KiB |
BIN
VISUALIZACION/node_modules/force-graph/example/img-nodes/imgs/grasshopper.jpg
generated
vendored
Executable file
|
After Width: | Height: | Size: 68 KiB |
BIN
VISUALIZACION/node_modules/force-graph/example/img-nodes/imgs/octopus.jpg
generated
vendored
Executable file
|
After Width: | Height: | Size: 42 KiB |
BIN
VISUALIZACION/node_modules/force-graph/example/img-nodes/imgs/owl.jpg
generated
vendored
Executable file
|
After Width: | Height: | Size: 57 KiB |
BIN
VISUALIZACION/node_modules/force-graph/example/img-nodes/imgs/panda.jpg
generated
vendored
Executable file
|
After Width: | Height: | Size: 45 KiB |
BIN
VISUALIZACION/node_modules/force-graph/example/img-nodes/imgs/squirrel.jpg
generated
vendored
Executable file
|
After Width: | Height: | Size: 86 KiB |
BIN
VISUALIZACION/node_modules/force-graph/example/img-nodes/imgs/tiger.jpg
generated
vendored
Executable file
|
After Width: | Height: | Size: 44 KiB |
BIN
VISUALIZACION/node_modules/force-graph/example/img-nodes/imgs/whale.jpg
generated
vendored
Executable file
|
After Width: | Height: | Size: 179 KiB |
43
VISUALIZACION/node_modules/force-graph/example/img-nodes/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,43 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
const imgs = ['cat.jpg', 'dog.jpg', 'eagle.jpg', 'elephant.jpg', 'grasshopper.jpg', 'octopus.jpg', 'owl.jpg', 'panda.jpg', 'squirrel.jpg', 'tiger.jpg', 'whale.jpg']
|
||||
.map(src => {
|
||||
const img = new Image();
|
||||
img.src = `./imgs/${src}`;
|
||||
return img;
|
||||
});
|
||||
|
||||
// Random connected graph
|
||||
const gData = {
|
||||
nodes: imgs.map((img, id) => ({ id, img })),
|
||||
links: [...Array(imgs.length).keys()]
|
||||
.filter(id => id)
|
||||
.map(id => ({
|
||||
source: id,
|
||||
target: Math.round(Math.random() * (id-1))
|
||||
}))
|
||||
};
|
||||
|
||||
const Graph = ForceGraph()
|
||||
(document.getElementById('graph'))
|
||||
.nodeCanvasObject(({ img, x, y }, ctx) => {
|
||||
const size = 12;
|
||||
ctx.drawImage(img, x - size / 2, y - size / 2, size, size);
|
||||
})
|
||||
.nodePointerAreaPaint((node, color, ctx) => {
|
||||
const size = 12;
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillRect(node.x - size / 2, node.y - size / 2, size, size); // draw square as pointer trap
|
||||
})
|
||||
.graphData(gData);
|
||||
</script>
|
||||
</body>
|
||||
41
VISUALIZACION/node_modules/force-graph/example/large-graph/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,41 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
window.devicePixelRatio = 1; // use standard resolution in retina displays
|
||||
|
||||
fetch('../datasets/mplate.mtx').then(res => res.text()).then(mtxData => {
|
||||
let nodeSet = new Set();
|
||||
|
||||
const pairs = mtxData.split('\n')
|
||||
.slice(14, -1)
|
||||
.map(d => d.split(' '));
|
||||
|
||||
pairs.forEach(d => {
|
||||
nodeSet.add(d[0]);
|
||||
nodeSet.add(d[1]);
|
||||
});
|
||||
|
||||
const nodes = Array.from(nodeSet).map(d => ({ id: d }));
|
||||
const links = pairs.filter(d => d[0] !== d[1])
|
||||
.map(d => ({ source: d[0], target: d[1] }));
|
||||
|
||||
const Graph = ForceGraph()
|
||||
(document.getElementById('graph'))
|
||||
.graphData({ nodes, links })
|
||||
.d3AlphaDecay(0)
|
||||
.d3VelocityDecay(0.08)
|
||||
.cooldownTime(60000)
|
||||
.linkColor(() => 'rgba(0,0,0,0.05)')
|
||||
.zoom(0.05)
|
||||
.enablePointerInteraction(false);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
24
VISUALIZACION/node_modules/force-graph/example/load-json/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,24 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
fetch('../datasets/miserables.json').then(res => res.json()).then(data => {
|
||||
const Graph = ForceGraph()
|
||||
(document.getElementById('graph'))
|
||||
.graphData(data)
|
||||
.nodeId('id')
|
||||
.nodeVal('val')
|
||||
.nodeLabel('id')
|
||||
.nodeAutoColorBy('group')
|
||||
.linkSource('source')
|
||||
.linkTarget('target')
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
26
VISUALIZACION/node_modules/force-graph/example/medium-graph/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,26 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
fetch('../datasets/blocks.json').then(res => res.json()).then(data => {
|
||||
const elem = document.getElementById('graph');
|
||||
|
||||
const Graph = ForceGraph()(elem)
|
||||
.backgroundColor('#101020')
|
||||
.nodeRelSize(6)
|
||||
.nodeAutoColorBy('user')
|
||||
.nodeLabel(node => `${node.user}: ${node.description}`)
|
||||
.linkColor(() => 'rgba(255,255,255,0.2)')
|
||||
.linkDirectionalParticles(1)
|
||||
.onNodeClick(node => window.open(`https://bl.ocks.org/${node.user}/${node.id}`, '_blank'))
|
||||
.graphData(data);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
BIN
VISUALIZACION/node_modules/force-graph/example/medium-graph/preview.png
generated
vendored
Executable file
|
After Width: | Height: | Size: 160 KiB |
42
VISUALIZACION/node_modules/force-graph/example/move-viewport/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,42 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
// Random tree
|
||||
const N = 300;
|
||||
const gData = {
|
||||
nodes: [...Array(N).keys()].map(i => ({ id: i })),
|
||||
links: [...Array(N).keys()]
|
||||
.filter(id => id)
|
||||
.map(id => ({
|
||||
source: id,
|
||||
target: Math.round(Math.random() * (id-1))
|
||||
}))
|
||||
};
|
||||
|
||||
const Graph = ForceGraph()
|
||||
(document.getElementById('graph'))
|
||||
.graphData(gData);
|
||||
|
||||
let k = 0, angle = 0, radius = 300;
|
||||
setInterval(() => {
|
||||
// zoom in
|
||||
Graph.zoom(k);
|
||||
k += 0.001;
|
||||
|
||||
// pan around
|
||||
Graph.centerAt(
|
||||
radius * Math.cos(angle),
|
||||
radius * Math.sin(angle)
|
||||
);
|
||||
angle += Math.PI / 300;
|
||||
}, 10);
|
||||
</script>
|
||||
</body>
|
||||
57
VISUALIZACION/node_modules/force-graph/example/multi-selection/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,57 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!-- <script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
// Random tree
|
||||
const N = 30;
|
||||
const gData = {
|
||||
nodes: [...Array(N).keys()].map(i => ({ id: i })),
|
||||
links: [...Array(N).keys()]
|
||||
.filter(id => id)
|
||||
.map(id => ({
|
||||
source: id,
|
||||
target: Math.round(Math.random() * (id-1))
|
||||
}))
|
||||
};
|
||||
|
||||
let selectedNodes = new Set();
|
||||
|
||||
const Graph = ForceGraph()
|
||||
(document.getElementById('graph'))
|
||||
.graphData(gData)
|
||||
.nodeRelSize(7)
|
||||
.nodeColor(node => selectedNodes.has(node) ? 'darkorange' : 'grey')
|
||||
.onNodeClick((node, event) => {
|
||||
if (event.ctrlKey || event.shiftKey || event.altKey) { // multi-selection
|
||||
selectedNodes.has(node) ? selectedNodes.delete(node) : selectedNodes.add(node);
|
||||
} else { // single-selection
|
||||
const untoggle = selectedNodes.has(node) && selectedNodes.size === 1;
|
||||
selectedNodes.clear();
|
||||
!untoggle && selectedNodes.add(node);
|
||||
}
|
||||
|
||||
Graph.nodeColor(Graph.nodeColor()); // update color of selected nodes
|
||||
})
|
||||
.onNodeDrag((node, translate) => {
|
||||
if (selectedNodes.has(node)) { // moving a selected node
|
||||
[...selectedNodes]
|
||||
.filter(selNode => selNode !== node) // don't touch node being dragged
|
||||
.forEach(node => ['x', 'y'].forEach(coord => node[`f${coord}`] = node[coord] + translate[coord])); // translate other nodes by same amount
|
||||
}
|
||||
})
|
||||
.onNodeDragEnd(node => {
|
||||
if (selectedNodes.has(node)) { // finished moving a selected node
|
||||
[...selectedNodes]
|
||||
.filter(selNode => selNode !== node) // don't touch node being dragged
|
||||
.forEach(node => ['x', 'y'].forEach(coord => node[`f${coord}`] = undefined)); // unfix controlled nodes
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
37
VISUALIZACION/node_modules/force-graph/example/responsive/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,37 @@
|
|||
<head>
|
||||
<style> body { margin: 30px; } </style>
|
||||
|
||||
<script src="//unpkg.com/element-resize-detector/dist/element-resize-detector.min.js"></script>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
// Random tree
|
||||
const N = 200;
|
||||
const gData = {
|
||||
nodes: [...Array(N).keys()].map(i => ({ id: i })),
|
||||
links: [...Array(N).keys()]
|
||||
.filter(id => id)
|
||||
.map(id => ({
|
||||
source: id,
|
||||
target: Math.round(Math.random() * (id-1))
|
||||
}))
|
||||
};
|
||||
|
||||
const Graph = ForceGraph()
|
||||
(document.getElementById('graph'))
|
||||
.backgroundColor('#F5F5FF')
|
||||
.height(window.innerHeight - 60)
|
||||
.graphData(gData);
|
||||
|
||||
elementResizeDetectorMaker().listenTo(
|
||||
document.getElementById('graph'),
|
||||
el => Graph.width(el.offsetWidth)
|
||||
);
|
||||
</script>
|
||||
</body>
|
||||
69
VISUALIZACION/node_modules/force-graph/example/text-links/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,69 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
fetch('../datasets/miserables.json').then(res => res.json()).then(data => {
|
||||
const Graph = ForceGraph()
|
||||
(document.getElementById('graph'))
|
||||
.graphData(data)
|
||||
.nodeId('id')
|
||||
.nodeLabel('id')
|
||||
.nodeAutoColorBy('group')
|
||||
.linkCanvasObjectMode(() => 'after')
|
||||
.linkCanvasObject((link, ctx) => {
|
||||
const MAX_FONT_SIZE = 4;
|
||||
const LABEL_NODE_MARGIN = Graph.nodeRelSize() * 1.5;
|
||||
|
||||
const start = link.source;
|
||||
const end = link.target;
|
||||
|
||||
// ignore unbound links
|
||||
if (typeof start !== 'object' || typeof end !== 'object') return;
|
||||
|
||||
// calculate label positioning
|
||||
const textPos = Object.assign(...['x', 'y'].map(c => ({
|
||||
[c]: start[c] + (end[c] - start[c]) / 2 // calc middle point
|
||||
})));
|
||||
|
||||
const relLink = { x: end.x - start.x, y: end.y - start.y };
|
||||
|
||||
const maxTextLength = Math.sqrt(Math.pow(relLink.x, 2) + Math.pow(relLink.y, 2)) - LABEL_NODE_MARGIN * 2;
|
||||
|
||||
let textAngle = Math.atan2(relLink.y, relLink.x);
|
||||
// maintain label vertical orientation for legibility
|
||||
if (textAngle > Math.PI / 2) textAngle = -(Math.PI - textAngle);
|
||||
if (textAngle < -Math.PI / 2) textAngle = -(-Math.PI - textAngle);
|
||||
|
||||
const label = `${link.source.id} > ${link.target.id}`;
|
||||
|
||||
// estimate fontSize to fit in link length
|
||||
ctx.font = '1px Sans-Serif';
|
||||
const fontSize = Math.min(MAX_FONT_SIZE, maxTextLength / ctx.measureText(label).width);
|
||||
ctx.font = `${fontSize}px Sans-Serif`;
|
||||
const textWidth = ctx.measureText(label).width;
|
||||
const bckgDimensions = [textWidth, fontSize].map(n => n + fontSize * 0.2); // some padding
|
||||
|
||||
// draw text label (with background rect)
|
||||
ctx.save();
|
||||
ctx.translate(textPos.x, textPos.y);
|
||||
ctx.rotate(textAngle);
|
||||
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
|
||||
ctx.fillRect(- bckgDimensions[0] / 2, - bckgDimensions[1] / 2, ...bckgDimensions);
|
||||
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillStyle = 'darkgrey';
|
||||
ctx.fillText(label, 0, 0);
|
||||
ctx.restore();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
42
VISUALIZACION/node_modules/force-graph/example/text-nodes/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,42 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
fetch('../datasets/miserables.json').then(res => res.json()).then(data => {
|
||||
const Graph = ForceGraph()
|
||||
(document.getElementById('graph'))
|
||||
.graphData(data)
|
||||
.nodeId('id')
|
||||
.nodeAutoColorBy('group')
|
||||
.nodeCanvasObject((node, ctx, globalScale) => {
|
||||
const label = node.id;
|
||||
const fontSize = 12/globalScale;
|
||||
ctx.font = `${fontSize}px Sans-Serif`;
|
||||
const textWidth = ctx.measureText(label).width;
|
||||
const bckgDimensions = [textWidth, fontSize].map(n => n + fontSize * 0.2); // some padding
|
||||
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
|
||||
ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
|
||||
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillStyle = node.color;
|
||||
ctx.fillText(label, node.x, node.y);
|
||||
|
||||
node.__bckgDimensions = bckgDimensions; // to re-use in nodePointerAreaPaint
|
||||
})
|
||||
.nodePointerAreaPaint((node, color, ctx) => {
|
||||
ctx.fillStyle = color;
|
||||
const bckgDimensions = node.__bckgDimensions;
|
||||
bckgDimensions && ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
71
VISUALIZACION/node_modules/force-graph/example/tree/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,71 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/d3-dsv"></script>
|
||||
<script src="//unpkg.com/dat.gui"></script>
|
||||
<script src="//unpkg.com/d3-quadtree"></script>
|
||||
<script src="//unpkg.com/d3-force"></script>
|
||||
|
||||
<script src="//unpkg.com/force-graph"></script>
|
||||
<!--<script src="../../dist/force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script>
|
||||
// controls
|
||||
const controls = { 'DAG Orientation': 'td'};
|
||||
const gui = new dat.GUI();
|
||||
gui.add(controls, 'DAG Orientation', ['td', 'bu', 'lr', 'rl', 'radialout', 'radialin', null])
|
||||
.onChange(orientation => graph && graph.dagMode(orientation));
|
||||
|
||||
// graph config
|
||||
const NODE_REL_SIZE = 1;
|
||||
const graph = ForceGraph()
|
||||
.dagMode('td')
|
||||
.dagLevelDistance(300)
|
||||
.backgroundColor('#101020')
|
||||
.linkColor(() => 'rgba(255,255,255,0.2)')
|
||||
.nodeRelSize(NODE_REL_SIZE)
|
||||
.nodeId('path')
|
||||
.nodeVal(node => 100 / (node.level + 1))
|
||||
.nodeLabel('path')
|
||||
.nodeAutoColorBy('module')
|
||||
.linkDirectionalParticles(2)
|
||||
.linkDirectionalParticleWidth(2)
|
||||
.d3Force('collision', d3.forceCollide(node => Math.sqrt(100 / (node.level + 1)) * NODE_REL_SIZE))
|
||||
.d3VelocityDecay(0.3);
|
||||
|
||||
fetch('../datasets/d3-dependencies.csv')
|
||||
.then(r => r.text())
|
||||
.then(d3.csvParse)
|
||||
.then(data => {
|
||||
const nodes = [], links = [];
|
||||
data.forEach(({ size, path }) => {
|
||||
const levels = path.split('/'),
|
||||
level = levels.length - 1,
|
||||
module = level > 0 ? levels[1] : null,
|
||||
leaf = levels.pop(),
|
||||
parent = levels.join('/');
|
||||
|
||||
const node = {
|
||||
path,
|
||||
leaf,
|
||||
module,
|
||||
size: +size || 20,
|
||||
level
|
||||
};
|
||||
|
||||
nodes.push(node);
|
||||
|
||||
if (parent) {
|
||||
links.push({source: parent, target: path, targetNode: node});
|
||||
}
|
||||
});
|
||||
|
||||
graph(document.getElementById('graph'))
|
||||
.graphData({ nodes, links });
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||