flow like the river
This commit is contained in:
root
commit
013fe673f3
42435 changed files with 5764238 additions and 0 deletions
0
VISUALIZACION/controllers/postController.js
Executable file
0
VISUALIZACION/controllers/postController.js
Executable file
0
VISUALIZACION/controllers/userController.js
Executable file
0
VISUALIZACION/controllers/userController.js
Executable file
63
VISUALIZACION/graphql/resolvers.js
Executable file
63
VISUALIZACION/graphql/resolvers.js
Executable file
|
|
@ -0,0 +1,63 @@
|
|||
const User = require('../models/User');
|
||||
const Post = require('../models/Post');
|
||||
const Node = require('../models/Node');
|
||||
const Flow = require('../models/Flow');
|
||||
const Project = require('../models/Project');
|
||||
|
||||
module.exports = {
|
||||
users: async () => {
|
||||
//... tu código existente para obtener usuarios
|
||||
},
|
||||
|
||||
posts: async () => {
|
||||
//... tu código existente para obtener posts
|
||||
},
|
||||
|
||||
nodes: async () => {
|
||||
try {
|
||||
const nodes = await Node.find();
|
||||
return nodes.map(node => {
|
||||
return {
|
||||
...node._doc,
|
||||
_id: node._id.toString(),
|
||||
flow: getFlow.bind(this, node._doc.flow)
|
||||
};
|
||||
});
|
||||
} catch (err) {
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
|
||||
flows: async () => {
|
||||
try {
|
||||
const flows = await Flow.find();
|
||||
return flows.map(flow => {
|
||||
return {
|
||||
...flow._doc,
|
||||
_id: flow._id.toString(),
|
||||
nodes: getNodes.bind(this, flow._doc.nodes),
|
||||
project: getProject.bind(this, flow._doc.project)
|
||||
};
|
||||
});
|
||||
} catch (err) {
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
|
||||
projects: async () => {
|
||||
try {
|
||||
const projects = await Project.find();
|
||||
return projects.map(project => {
|
||||
return {
|
||||
...project._doc,
|
||||
_id: project._id.toString(),
|
||||
flows: getFlows.bind(this, project._doc.flows)
|
||||
};
|
||||
});
|
||||
} catch (err) {
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
// Aquí necesitarías implementar las funciones auxiliares getPosts, getUser, getFlow, getNodes, getFlows y getProject.
|
||||
104
VISUALIZACION/graphql/schema.js
Executable file
104
VISUALIZACION/graphql/schema.js
Executable file
|
|
@ -0,0 +1,104 @@
|
|||
const { buildSchema } = require('graphql');
|
||||
|
||||
module.exports = buildSchema(`
|
||||
type User {
|
||||
_id: ID!
|
||||
name: String!
|
||||
email: String!
|
||||
posts: [Post!]
|
||||
}
|
||||
|
||||
type Post {
|
||||
_id: ID!
|
||||
title: String!
|
||||
content: String!
|
||||
creator: User!
|
||||
}
|
||||
|
||||
type Node {
|
||||
_id: ID!
|
||||
name: String!
|
||||
flow: Flow!
|
||||
}
|
||||
|
||||
type Flow {
|
||||
_id: ID!
|
||||
nodes: [Node!]!
|
||||
project: Project!
|
||||
}
|
||||
|
||||
type Project {
|
||||
_id: ID!
|
||||
flows: [Flow!]!
|
||||
}
|
||||
|
||||
type RootQuery {
|
||||
users: [User!]!
|
||||
posts: [Post!]!
|
||||
nodes: [Node!]!
|
||||
flows: [Flow!]!
|
||||
projects: [Project!]!
|
||||
}
|
||||
|
||||
schema {
|
||||
query: RootQuery
|
||||
}
|
||||
`);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// export const newsData = [
|
||||
// {
|
||||
// "id": "1",
|
||||
// "title": "BlackRock adquiere empresa de tecnología financiera",
|
||||
// "shares": 3500
|
||||
// },
|
||||
// {
|
||||
// "id": "2",
|
||||
// "title": "BlackRock lanza nuevo fondo de inversión en energías renovables",
|
||||
// "shares": 2900
|
||||
// },
|
||||
// {
|
||||
// "id": "3",
|
||||
// "title": "BlackRock reporta ganancias record en el último trimestre",
|
||||
// "shares": 4000
|
||||
// },
|
||||
// {
|
||||
// "id": "4",
|
||||
// "title": "BlackRock lidera ronda de financiamiento en startup de inteligencia artificial",
|
||||
// "shares": 2100
|
||||
// },
|
||||
// {
|
||||
// "id": "5",
|
||||
// "title": "CEO de BlackRock promueve inversiones sostenibles en cumbre global",
|
||||
// "shares": 2600
|
||||
// },
|
||||
// {
|
||||
// "id": "6",
|
||||
// "title": "BlackRock apunta a mercados emergentes con nuevo producto de inversión",
|
||||
// "shares": 2800
|
||||
// },
|
||||
// {
|
||||
// "id": "7",
|
||||
// "title": "BlackRock se compromete a reducir su huella de carbono en un 50% para 2030",
|
||||
// "shares": 3500
|
||||
// },
|
||||
// {
|
||||
// "id": "8",
|
||||
// "title": "BlackRock lidera el mercado de ETFs con fuerte crecimiento en el último año",
|
||||
// "shares": 3900
|
||||
// },
|
||||
// {
|
||||
// "id": "9",
|
||||
// "title": "BlackRock anuncia inversión millonaria en infraestructura de blockchain",
|
||||
// "shares": 3300
|
||||
// },
|
||||
// {
|
||||
// "id": "10",
|
||||
// "title": "BlackRock apoya iniciativa de transparencia financiera en G20",
|
||||
// "shares": 3000
|
||||
// }
|
||||
// ];
|
||||
|
||||
11
VISUALIZACION/models/Flow.js
Executable file
11
VISUALIZACION/models/Flow.js
Executable file
|
|
@ -0,0 +1,11 @@
|
|||
const mongoose = require('mongoose');
|
||||
const Schema = mongoose.Schema;
|
||||
|
||||
const FlowSchema = new Schema({
|
||||
sourceNode: { type: Schema.Types.ObjectId, ref: 'Node' },
|
||||
targetNode: { type: Schema.Types.ObjectId, ref: 'Node' },
|
||||
intensity: Number,
|
||||
// Aquí puedes incluir cualquier metadato del flujo que necesites.
|
||||
});
|
||||
|
||||
module.exports = mongoose.model('Flow', FlowSchema);
|
||||
10
VISUALIZACION/models/Node.js
Executable file
10
VISUALIZACION/models/Node.js
Executable file
|
|
@ -0,0 +1,10 @@
|
|||
const mongoose = require('mongoose');
|
||||
const Schema = mongoose.Schema;
|
||||
|
||||
const NodeSchema = new Schema({
|
||||
coordinates: { x: Number, y: Number, z: Number },
|
||||
type: String,
|
||||
// Aquí puedes incluir cualquier metadato del nodo que necesites.
|
||||
});
|
||||
|
||||
module.exports = mongoose.model('Node', NodeSchema);
|
||||
0
VISUALIZACION/models/Post.js
Executable file
0
VISUALIZACION/models/Post.js
Executable file
13
VISUALIZACION/models/Project.js
Executable file
13
VISUALIZACION/models/Project.js
Executable file
|
|
@ -0,0 +1,13 @@
|
|||
const mongoose = require('mongoose');
|
||||
const Schema = mongoose.Schema;
|
||||
|
||||
const ProjectSchema = new Schema({
|
||||
user: { type: Schema.Types.ObjectId, ref: 'User' },
|
||||
nodes: [{ type: Schema.Types.ObjectId, ref: 'Node' }],
|
||||
flows: [{ type: Schema.Types.ObjectId, ref: 'Flow' }],
|
||||
// Aquí puedes incluir cualquier metadato del proyecto que necesites.
|
||||
});
|
||||
|
||||
module.exports = mongoose.model('Project', ProjectSchema);
|
||||
|
||||
|
||||
10
VISUALIZACION/models/User.js
Executable file
10
VISUALIZACION/models/User.js
Executable file
|
|
@ -0,0 +1,10 @@
|
|||
const mongoose = require('mongoose');
|
||||
const Schema = mongoose.Schema;
|
||||
|
||||
const UserSchema = new Schema({
|
||||
username: String,
|
||||
password: String,
|
||||
// Aquí puedes incluir cualquier metadato del usuario que necesites.
|
||||
});
|
||||
|
||||
module.exports = mongoose.model('User', UserSchema);
|
||||
1
VISUALIZACION/node_modules/.bin/acorn
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/acorn
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../acorn/bin/acorn
|
||||
1
VISUALIZACION/node_modules/.bin/atob
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/atob
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../atob/bin/atob.js
|
||||
1
VISUALIZACION/node_modules/.bin/babylon
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/babylon
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../babylon/bin/babylon.js
|
||||
1
VISUALIZACION/node_modules/.bin/brfs
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/brfs
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../brfs/bin/cmd.js
|
||||
1
VISUALIZACION/node_modules/.bin/browserslist
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/browserslist
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../browserslist/cli.js
|
||||
1
VISUALIZACION/node_modules/.bin/css-beautify
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/css-beautify
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../js-beautify/js/bin/css-beautify.js
|
||||
1
VISUALIZACION/node_modules/.bin/editorconfig
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/editorconfig
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../editorconfig/bin/editorconfig
|
||||
1
VISUALIZACION/node_modules/.bin/escodegen
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/escodegen
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../escodegen/bin/escodegen.js
|
||||
1
VISUALIZACION/node_modules/.bin/esgenerate
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/esgenerate
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../escodegen/bin/esgenerate.js
|
||||
1
VISUALIZACION/node_modules/.bin/esparse
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/esparse
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../esprima/bin/esparse.js
|
||||
1
VISUALIZACION/node_modules/.bin/esvalidate
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/esvalidate
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../esprima/bin/esvalidate.js
|
||||
1
VISUALIZACION/node_modules/.bin/html-beautify
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/html-beautify
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../js-beautify/js/bin/html-beautify.js
|
||||
1
VISUALIZACION/node_modules/.bin/js-beautify
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/js-beautify
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../js-beautify/js/bin/js-beautify.js
|
||||
1
VISUALIZACION/node_modules/.bin/js-yaml
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/js-yaml
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../js-yaml/bin/js-yaml.js
|
||||
1
VISUALIZACION/node_modules/.bin/jsesc
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/jsesc
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../jsesc/bin/jsesc
|
||||
1
VISUALIZACION/node_modules/.bin/json5
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/json5
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../json5/lib/cli.js
|
||||
1
VISUALIZACION/node_modules/.bin/loose-envify
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/loose-envify
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../loose-envify/cli.js
|
||||
1
VISUALIZACION/node_modules/.bin/miller-rabin
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/miller-rabin
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../miller-rabin/bin/miller-rabin
|
||||
1
VISUALIZACION/node_modules/.bin/mime
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/mime
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../mime/cli.js
|
||||
1
VISUALIZACION/node_modules/.bin/mkdirp
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/mkdirp
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../mkdirp/bin/cmd.js
|
||||
1
VISUALIZACION/node_modules/.bin/nopt
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/nopt
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../nopt/bin/nopt.js
|
||||
1
VISUALIZACION/node_modules/.bin/parcel
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/parcel
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../parcel-bundler/bin/cli.js
|
||||
1
VISUALIZACION/node_modules/.bin/quote-stream
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/quote-stream
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../quote-stream/bin/cmd.js
|
||||
1
VISUALIZACION/node_modules/.bin/regjsparser
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/regjsparser
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../regjsparser/bin/parser
|
||||
1
VISUALIZACION/node_modules/.bin/resolve
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/resolve
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../resolve/bin/resolve
|
||||
1
VISUALIZACION/node_modules/.bin/semver
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/semver
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../semver/bin/semver
|
||||
1
VISUALIZACION/node_modules/.bin/sha.js
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/sha.js
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../sha.js/bin.js
|
||||
1
VISUALIZACION/node_modules/.bin/svgo
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/svgo
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../svgo/bin/svgo
|
||||
1
VISUALIZACION/node_modules/.bin/terser
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/terser
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../terser/bin/uglifyjs
|
||||
1
VISUALIZACION/node_modules/.bin/uglifyjs
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/uglifyjs
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../uglify-es/bin/uglifyjs
|
||||
1
VISUALIZACION/node_modules/.bin/which
generated
vendored
Symbolic link
1
VISUALIZACION/node_modules/.bin/which
generated
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../which/bin/which
|
||||
10720
VISUALIZACION/node_modules/.package-lock.json
generated
vendored
Executable file
10720
VISUALIZACION/node_modules/.package-lock.json
generated
vendored
Executable file
File diff suppressed because it is too large
Load diff
21
VISUALIZACION/node_modules/3d-force-graph/LICENSE
generated
vendored
Executable file
21
VISUALIZACION/node_modules/3d-force-graph/LICENSE
generated
vendored
Executable file
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2017 Vasco Asturiano
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
248
VISUALIZACION/node_modules/3d-force-graph/README.md
generated
vendored
Executable file
248
VISUALIZACION/node_modules/3d-force-graph/README.md
generated
vendored
Executable file
|
|
@ -0,0 +1,248 @@
|
|||
3D Force-Directed Graph
|
||||
=======================
|
||||
|
||||
[![NPM package][npm-img]][npm-url]
|
||||
[![Build Size][build-size-img]][build-size-url]
|
||||
[![NPM Downloads][npm-downloads-img]][npm-downloads-url]
|
||||
|
||||
<p align="center">
|
||||
<a href="https://vasturiano.github.io/3d-force-graph/example/large-graph/"><img width="80%" src="https://vasturiano.github.io/3d-force-graph/example/preview.png"></a>
|
||||
</p>
|
||||
|
||||
A web component to represent a graph data structure in a 3-dimensional space using a [force-directed](https://en.wikipedia.org/wiki/Force-directed_graph_drawing) iterative layout.
|
||||
Uses [ThreeJS](https://github.com/mrdoob/three.js/)/WebGL for 3D rendering and either [d3-force-3d](https://github.com/vasturiano/d3-force-3d) or [ngraph](https://github.com/anvaka/ngraph.forcelayout3d) for the underlying physics engine.
|
||||
|
||||
See also the [2D canvas version](https://github.com/vasturiano/force-graph), [VR version](https://github.com/vasturiano/3d-force-graph-vr) and [AR version](https://github.com/vasturiano/3d-force-graph-ar).
|
||||
|
||||
And check out the [React bindings](https://github.com/vasturiano/react-force-graph).
|
||||
|
||||
## Examples
|
||||
|
||||
* [Basic](https://vasturiano.github.io/3d-force-graph/example/basic/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/basic/index.html))
|
||||
* [Asynchronous load](https://vasturiano.github.io/3d-force-graph/example/async-load/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/async-load/index.html))
|
||||
* [Larger graph (~4k elements)](https://vasturiano.github.io/3d-force-graph/example/large-graph/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/large-graph/index.html))
|
||||
* [Directional arrows](https://vasturiano.github.io/3d-force-graph/example/directional-links-arrows/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/directional-links-arrows/index.html))
|
||||
* [Directional moving particles](https://vasturiano.github.io/3d-force-graph/example/directional-links-particles/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/directional-links-particles/index.html))
|
||||
* [Curved lines and self links](https://vasturiano.github.io/3d-force-graph/example/curved-links/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/curved-links/index.html))
|
||||
* [Auto-colored nodes/links](https://vasturiano.github.io/3d-force-graph/example/auto-colored/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/auto-colored/index.html))
|
||||
* [Text as nodes](https://vasturiano.github.io/3d-force-graph/example/text-nodes/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/text-nodes/index.html))
|
||||
* [Images as nodes](https://vasturiano.github.io/3d-force-graph/example/img-nodes/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/img-nodes/index.html))
|
||||
* [HTML in nodes](https://vasturiano.github.io/3d-force-graph/example/html-nodes/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/html-nodes/index.html))
|
||||
* [Custom node geometries](https://vasturiano.github.io/3d-force-graph/example/custom-node-geometry/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/custom-node-geometry/index.html))
|
||||
* [Gradient Links](https://vasturiano.github.io/3d-force-graph/example/gradient-links/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/gradient-links/index.html))
|
||||
* [Text in Links](https://vasturiano.github.io/3d-force-graph/example/text-links/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/text-links/index.html))
|
||||
* [Orbit controls](https://vasturiano.github.io/3d-force-graph/example/controls-orbit/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/controls-orbit/index.html))
|
||||
* [Fly controls](https://vasturiano.github.io/3d-force-graph/example/controls-fly/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/controls-fly/index.html))
|
||||
* [Camera automatic orbitting](https://vasturiano.github.io/3d-force-graph/example/camera-auto-orbit/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/camera-auto-orbit/index.html))
|
||||
* [Click to focus on node](https://vasturiano.github.io/3d-force-graph/example/click-to-focus/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/click-to-focus/index.html))
|
||||
* [Click to expand/collapse nodes](https://vasturiano.github.io/3d-force-graph/example/expandable-nodes/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/expandable-nodes/index.html))
|
||||
* [Fix nodes after dragging](https://vasturiano.github.io/3d-force-graph/example/fix-dragged-nodes/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/fix-dragged-nodes/index.html))
|
||||
* [Fit graph to canvas](https://vasturiano.github.io/3d-force-graph/example/fit-to-canvas/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/fit-to-canvas/index.html))
|
||||
* [Highlight nodes/links](https://vasturiano.github.io/3d-force-graph/example/highlight/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/highlight/index.html))
|
||||
* [Multiple Node Selection](https://vasturiano.github.io/3d-force-graph/example/multi-selection/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/multi-selection/index.html))
|
||||
* [Dynamic data changes](https://vasturiano.github.io/3d-force-graph/example/dynamic/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/dynamic/index.html))
|
||||
* [Node collision detection](https://vasturiano.github.io/3d-force-graph/example/collision-detection/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/collision-detection/index.html))
|
||||
* [Manipulate link force distance](https://vasturiano.github.io/3d-force-graph/example/manipulate-link-force/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/manipulate-link-force/index.html))
|
||||
* [Emit link particles on demand](https://vasturiano.github.io/3d-force-graph/example/emit-particles/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/emit-particles/index.html))
|
||||
* [Force-directed tree (DAG mode)](https://vasturiano.github.io/3d-force-graph/example/tree/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/tree/index.html))
|
||||
* [yarn.lock dependency graph (DAG mode)](https://vasturiano.github.io/3d-force-graph/example/dag-yarn/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/dag-yarn/index.html))
|
||||
* [Add external objects to scene](https://vasturiano.github.io/3d-force-graph/example/scene/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/scene/index.html))
|
||||
* [Bloom Post-Processing Effect](https://vasturiano.github.io/3d-force-graph/example/bloom-effect/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/bloom-effect/index.html))
|
||||
* [Pause / Resume animation](https://vasturiano.github.io/3d-force-graph/example/pause-resume/) ([source](https://github.com/vasturiano/3d-force-graph/blob/master/example/pause-resume/index.html))
|
||||
|
||||
## Quick start
|
||||
|
||||
```js
|
||||
import ForceGraph3D from '3d-force-graph';
|
||||
```
|
||||
|
||||
or using a *script* tag
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
```
|
||||
|
||||
then
|
||||
|
||||
```js
|
||||
const myGraph = ForceGraph3D();
|
||||
myGraph(<myDOMElement>)
|
||||
.graphData(<myData>);
|
||||
```
|
||||
|
||||
## API reference
|
||||
|
||||
### Initialisation
|
||||
```js
|
||||
ForceGraph3d({ configOptions })(<domElement>)
|
||||
```
|
||||
|
||||
| Config options | Description | Default |
|
||||
| --- | --- | :--: |
|
||||
| <b>controlType</b>: <i>str</i> | Which type of control to use to control the camera. Choice between [trackball](https://threejs.org/examples/misc_controls_trackball.html), [orbit](https://threejs.org/examples/#misc_controls_orbit) or [fly](https://threejs.org/examples/misc_controls_fly.html). | `trackball` |
|
||||
| <b>rendererConfig</b>: <i>object</i> | Configuration parameters to pass to the [ThreeJS WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer) constructor. | `{ antialias: true, alpha: true }` |
|
||||
| <b>extraRenderers</b>: <i>array</i> | If you wish to include custom objects that require a dedicated renderer besides `WebGL`, such as [CSS3DRenderer](https://threejs.org/docs/#examples/en/renderers/CSS3DRenderer), include in this array those extra renderer instances. | `[]` |
|
||||
|
||||
### Data input
|
||||
|
||||
| Method | Description | Default |
|
||||
| --- | --- | :--: |
|
||||
| <b>graphData</b>([<i>data</i>]) | Getter/setter for graph data structure (see below for syntax details). Can also be used to apply [incremental updates](https://bl.ocks.org/vasturiano/2f602ea6c51c664c29ec56cbe2d6a5f6). | `{ nodes: [], links: [] }` |
|
||||
| <b>jsonUrl</b>([<i>url</i>]) | URL of JSON file to load graph data directly from, as an alternative to specifying <i>graphData</i> directly. | |
|
||||
| <b>nodeId</b>([<i>str</i>]) | Node object accessor attribute for unique node id (used in link objects source/target). | `id` |
|
||||
| <b>linkSource</b>([<i>str</i>]) | Link object accessor attribute referring to id of source node. | `source` |
|
||||
| <b>linkTarget</b>([<i>str</i>]) | Link object accessor attribute referring to id of target node. | `target` |
|
||||
|
||||
### Container layout
|
||||
|
||||
| Method | Description | Default |
|
||||
| --- | --- | :--: |
|
||||
| <b>width</b>([<i>px</i>]) | Getter/setter for the canvas width. | *<window width>* |
|
||||
| <b>height</b>([<i>px</i>]) | Getter/setter for the canvas height. | *<window height>* |
|
||||
| <b>backgroundColor</b>([<i>str</i>]) | Getter/setter for the chart background color. | `#000011` |
|
||||
| <b>showNavInfo</b>([<i>boolean</i>]) | Getter/setter for whether to show the navigation controls footer info. | `true` |
|
||||
|
||||
### Node styling
|
||||
|
||||
| Method | Description | Default |
|
||||
| --- | --- | :--: |
|
||||
| <b>nodeRelSize</b>([<i>num</i>]) | Getter/setter for the ratio of node sphere volume (cubic px) per value unit. | 4 |
|
||||
| <b>nodeVal</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Node object accessor function, attribute or a numeric constant for the node numeric value (affects sphere volume). | `val` |
|
||||
| <b>nodeLabel</b>([<i>str</i> or <i>fn</i>]) | Node object accessor function or attribute for name (shown in label). Supports plain text or HTML content. Note that this method uses `innerHTML` internally, so make sure to pre-sanitize any user-input content to prevent XSS vulnerabilities. | `name` |
|
||||
| <b>nodeVisibility</b>([<i>boolean</i>, <i>str</i> or <i>fn</i>]) | Node object accessor function, attribute or a boolean constant for whether to display the node. | `true` |
|
||||
| <b>nodeColor</b>([<i>str</i> or <i>fn</i>]) | Node object accessor function or attribute for node color (affects sphere color). | `color` |
|
||||
| <b>nodeAutoColorBy</b>([<i>str</i> or <i>fn</i>]) | Node object accessor function (`fn(node)`) or attribute (e.g. `'type'`) to automatically group colors by. Only affects nodes without a color attribute. | |
|
||||
| <b>nodeOpacity</b>([<i>num</i>]) | Getter/setter for the nodes sphere opacity, between [0,1]. | 0.75 |
|
||||
| <b>nodeResolution</b>([<i>num</i>]) | Getter/setter for the geometric resolution of each node, expressed in how many slice segments to divide the circumference. Higher values yield smoother spheres. | 8 |
|
||||
| <b>nodeThreeObject</b>([<i>Object3d</i>, <i>str</i> or <i>fn</i>]) | Node object accessor function or attribute for generating a custom 3d object to render as graph nodes. Should return an instance of [ThreeJS Object3d](https://threejs.org/docs/index.html#api/core/Object3D). If a <i>falsy</i> value is returned, the default 3d object type will be used instead for that node. | *default node object is a sphere, sized according to `val` and styled according to `color`.* |
|
||||
| <b>nodeThreeObjectExtend</b>([<i>bool</i>, <i>str</i> or <i>fn</i>]) | Node object accessor function, attribute or a boolean value for whether to replace the default node when using a custom `nodeThreeObject` (`false`) or to extend it (`true`). | `false` |
|
||||
|
||||
### Link styling
|
||||
|
||||
| Method | Description | Default |
|
||||
| --- | --- | :--: |
|
||||
| <b>linkLabel</b>([<i>str</i> or <i>fn</i>]) | Link object accessor function or attribute for name (shown in label). Supports plain text or HTML content. Note that this method uses `innerHTML` internally, so make sure to pre-sanitize any user-input content to prevent XSS vulnerabilities. | `name` |
|
||||
| <b>linkVisibility</b>([<i>boolean</i>, <i>str</i> or <i>fn</i>]) | Link object accessor function, attribute or a boolean constant for whether to display the link line. A value of `false` maintains the link force without rendering it. | `true` |
|
||||
| <b>linkColor</b>([<i>str</i> or <i>fn</i>]) | Link object accessor function or attribute for line color. | `color` |
|
||||
| <b>linkAutoColorBy</b>([<i>str</i> or <i>fn</i>]) | Link object accessor function (`fn(link)`) or attribute (e.g. `'type'`) to automatically group colors by. Only affects links without a color attribute. | |
|
||||
| <b>linkOpacity</b>([<i>num</i>]) | Getter/setter for line opacity of links, between [0,1]. | 0.2 |
|
||||
| <b>linkWidth</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Link object accessor function, attribute or a numeric constant for the link line width. A value of zero will render a [ThreeJS Line](https://threejs.org/docs/#api/objects/Line) whose width is constant (`1px`) regardless of distance. Values are rounded to the nearest decimal for indexing purposes. | 0 |
|
||||
| <b>linkResolution</b>([<i>num</i>]) | Getter/setter for the geometric resolution of each link, expressed in how many radial segments to divide the cylinder. Higher values yield smoother cylinders. Applicable only to links with positive width. | 6 |
|
||||
| <b>linkCurvature</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Link object accessor function, attribute or a numeric constant for the curvature radius of the link line. Curved lines are represented as 3D bezier curves, and any numeric value is accepted. A value of `0` renders a straight line. `1` indicates a radius equal to half of the line length, causing the curve to approximate a semi-circle. For self-referencing links (`source` equal to `target`) the curve is represented as a loop around the node, with length proportional to the curvature value. Lines are curved clockwise for positive values, and counter-clockwise for negative values. Note that rendering curved lines is purely a visual effect and does not affect the behavior of the underlying forces. | 0 |
|
||||
| <b>linkCurveRotation</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Link object accessor function, attribute or a numeric constant for the rotation along the line axis to apply to the curve. Has no effect on straight lines. At `0` rotation, the curve is oriented in the direction of the intersection with the `XY` plane. The rotation angle (in radians) will rotate the curved line clockwise around the "start-to-end" axis from this reference orientation. | 0 |
|
||||
| <b>linkMaterial</b>([<i>Material</i>, <i>str</i> or <i>fn</i>]) | Link object accessor function or attribute for specifying a custom material to style the graph links with. Should return an instance of [ThreeJS Material](https://threejs.org/docs/#api/materials/Material). If a <i>falsy</i> value is returned, the default material will be used instead for that link. | *default link material is [MeshLambertMaterial](https://threejs.org/docs/#api/materials/MeshLambertMaterial) styled according to `color` and `opacity`.* |
|
||||
| <b>linkThreeObject</b>([<i>Object3d</i>, <i>str</i> or <i>fn</i>]) | Link object accessor function or attribute for generating a custom 3d object to render as graph links. Should return an instance of [ThreeJS Object3d](https://threejs.org/docs/index.html#api/core/Object3D). If a <i>falsy</i> value is returned, the default 3d object type will be used instead for that link. | *default link object is a line or cylinder, sized according to `width` and styled according to `material`.* |
|
||||
| <b>linkThreeObjectExtend</b>([<i>bool</i>, <i>str</i> or <i>fn</i>]) | Link object accessor function, attribute or a boolean value for whether to replace the default link when using a custom `linkThreeObject` (`false`) or to extend it (`true`). | `false` |
|
||||
| <b>linkPositionUpdate</b>([<i>fn(linkObject, { start, end }, link)</i>]) | Getter/setter for the custom function to call for updating the position of links at every render iteration. It receives the respective link `ThreeJS Object3d`, the `start` and `end` coordinates of the link (`{x,y,z}` each), and the link's `data`. If the function returns a truthy value, the regular position update function will not run for that link. | |
|
||||
| <b>linkDirectionalArrowLength</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Link object accessor function, attribute or a numeric constant for the length of the arrow head indicating the link directionality. The arrow is displayed directly over the link line, and points in the direction of `source` > `target`. A value of `0` hides the arrow. | 0 |
|
||||
| <b>linkDirectionalArrowColor</b>([<i>str</i> or <i>fn</i>]) | Link object accessor function or attribute for the color of the arrow head. | `color` |
|
||||
| <b>linkDirectionalArrowRelPos</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Link object accessor function, attribute or a numeric constant for the longitudinal position of the arrow head along the link line, expressed as a ratio between `0` and `1`, where `0` indicates immediately next to the `source` node, `1` next to the `target` node, and `0.5` right in the middle. | 0.5 |
|
||||
| <b>linkDirectionalArrowResolution</b>([<i>num</i>]) | Getter/setter for the geometric resolution of the arrow head, expressed in how many slice segments to divide the cone base circumference. Higher values yield smoother arrows. | 8 |
|
||||
| <b>linkDirectionalParticles</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Link object accessor function, attribute or a numeric constant for the number of particles (small spheres) to display over the link line. The particles are distributed equi-spaced along the line, travel in the direction `source` > `target`, and can be used to indicate link directionality. | 0 |
|
||||
| <b>linkDirectionalParticleSpeed</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Link object accessor function, attribute or a numeric constant for the directional particles speed, expressed as the ratio of the link length to travel per frame. Values above `0.5` are discouraged. | 0.01 |
|
||||
| <b>linkDirectionalParticleWidth</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Link object accessor function, attribute or a numeric constant for the directional particles width. Values are rounded to the nearest decimal for indexing purposes. | 0.5 |
|
||||
| <b>linkDirectionalParticleColor</b>([<i>str</i> or <i>fn</i>]) | Link object accessor function or attribute for the directional particles color. | `color` |
|
||||
| <b>linkDirectionalParticleResolution</b>([<i>num</i>]) | Getter/setter for the geometric resolution of each directional particle, expressed in how many slice segments to divide the circumference. Higher values yield smoother particles. | 4 |
|
||||
| <b>emitParticle</b>(<i>link</i>) | An alternative mechanism for generating particles, this method emits a non-cyclical single particle within a specific link. The emitted particle shares the styling (speed, width, color) of the regular particle props. A valid `link` object that is included in `graphData` should be passed as a single parameter. ||
|
||||
|
||||
### Render control
|
||||
|
||||
| Method | Description | Default |
|
||||
| --- | --- | :--: |
|
||||
| <b>pauseAnimation</b>() | Pauses the rendering cycle of the component, effectively freezing the current view and cancelling all user interaction. This method can be used to save performance in circumstances when a static image is sufficient. | |
|
||||
| <b>resumeAnimation</b>() | Resumes the rendering cycle of the component, and re-enables the user interaction. This method can be used together with `pauseAnimation` for performance optimization purposes. | |
|
||||
| <b>cameraPosition</b>([<i>{x,y,z}</i>], [<i>lookAt</i>], [<i>ms</i>]) | Getter/setter for the camera position, in terms of `x`, `y`, `z` coordinates. Each of the coordinates is optional, allowing for motion in just some dimensions. The optional second argument can be used to define the direction that the camera should aim at, in terms of an `{x,y,z}` point in the 3D space. The 3rd optional argument defines the duration of the transition (in ms) to animate the camera motion. A value of 0 (default) moves the camera immediately to the final position. | By default the camera will face the center of the graph at a `z` distance proportional to the amount of nodes in the system. |
|
||||
| <b>zoomToFit</b>([<i>ms</i>], [<i>px</i>], [<i>nodeFilterFn</i>]) | Automatically moves the camera so that all of the nodes become visible within its field of view, aiming at the graph center (0,0,0). If no nodes are found no action is taken. It accepts three optional arguments: the first defines the duration of the transition (in ms) to animate the camera motion (default: 0ms). The second argument is the amount of padding (in px) between the edge of the canvas and the outermost node location (default: 10px). The third argument specifies a custom node filter: `node => <boolean>`, which should return a truthy value if the node is to be included. This can be useful for focusing on a portion of the graph. | `(0, 10, node => true)` |
|
||||
| <b>postProcessingComposer</b>() | Access the [post-processing composer](https://threejs.org/docs/#examples/en/postprocessing/EffectComposer). Use this to add post-processing [rendering effects](https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing) to the scene. By default the composer has a single pass ([RenderPass](https://github.com/mrdoob/three.js/blob/dev/examples/jsm/postprocessing/RenderPass.js)) that directly renders the scene without any effects. ||
|
||||
| <b>lights</b>([<i>array</i>]) | Getter/setter for the list of lights to use in the scene. Each item should be an instance of [Light](https://threejs.org/docs/#api/en/lights/Light). | [AmbientLight](https://threejs.org/docs/?q=ambient#api/en/lights/AmbientLight) + [DirectionalLight](https://threejs.org/docs/#api/en/lights/DirectionalLight) (from above) |
|
||||
| <b>scene</b>() | Access the internal ThreeJS [Scene](https://threejs.org/docs/#api/scenes/Scene). Can be used to extend the current scene with additional objects not related to 3d-force-graph. | |
|
||||
| <b>camera</b>() | Access the internal ThreeJS [Camera](https://threejs.org/docs/#api/cameras/PerspectiveCamera). | |
|
||||
| <b>renderer</b>() | Access the internal ThreeJS [WebGL renderer](https://threejs.org/docs/#api/renderers/WebGLRenderer). ||
|
||||
| <b>controls</b>() | Access the internal ThreeJS controls object. ||
|
||||
| <b>refresh</b>() | Redraws all the nodes/links. |
|
||||
|
||||
### Force engine configuration
|
||||
|
||||
| Method | Description | Default |
|
||||
| --- | --- | :--: |
|
||||
| <b>forceEngine</b>([<i>str</i>]) | Getter/setter for which force-simulation engine to use ([*d3*](https://github.com/vasturiano/d3-force-3d) or [*ngraph*](https://github.com/anvaka/ngraph.forcelayout)). | `d3` |
|
||||
| <b>numDimensions</b>([<i>int</i>]) | Getter/setter for number of dimensions to run the force simulation on (1, 2 or 3). | 3 |
|
||||
| <b>dagMode</b>([<i>str</i>]) | Apply layout constraints based on the graph directionality. Only works correctly for [DAG](https://en.wikipedia.org/wiki/Directed_acyclic_graph) graph structures (without cycles). Choice between `td` (top-down), `bu` (bottom-up), `lr` (left-to-right), `rl` (right-to-left), `zout` (near-to-far), `zin` (far-to-near), `radialout` (outwards-radially) or `radialin` (inwards-radially). | |
|
||||
| <b>dagLevelDistance</b>([<i>num</i>]) | If `dagMode` is engaged, this specifies the distance between the different graph depths. | *auto-derived from the number of nodes* |
|
||||
| <b>dagNodeFilter</b>([<i>fn</i>]) | Node accessor function to specify nodes to ignore during the DAG layout processing. This accessor method receives a node object and should return a `boolean` value indicating whether the node is to be included. Excluded nodes will be left unconstrained and free to move in any direction. | `node => true` |
|
||||
| <b>onDagError</b>([<i>fn</i>]) | Callback to invoke if a cycle is encountered while processing the data structure for a DAG layout. The loop segment of the graph is included for information, as an array of node ids. By default an exception will be thrown whenever a loop is encountered. You can override this method to handle this case externally and allow the graph to continue the DAG processing. Strict graph directionality is not guaranteed if a loop is encountered and the result is a best effort to establish a hierarchy. | *throws exception* |
|
||||
| <b>d3AlphaMin</b>([<i>num</i>]) | Getter/setter for the [simulation alpha min](https://github.com/vasturiano/d3-force-3d#simulation_alphaMin) parameter, only applicable if using the d3 simulation engine. | `0` |
|
||||
| <b>d3AlphaDecay</b>([<i>num</i>]) | Getter/setter for the [simulation intensity decay](https://github.com/vasturiano/d3-force-3d#simulation_alphaDecay) parameter, only applicable if using the d3 simulation engine. | `0.0228` |
|
||||
| <b>d3VelocityDecay</b>([<i>num</i>]) | Getter/setter for the nodes' [velocity decay](https://github.com/vasturiano/d3-force-3d#simulation_velocityDecay) that simulates the medium resistance, only applicable if using the d3 simulation engine. | `0.4` |
|
||||
| <b>d3Force</b>(<i>str</i>, [<i>fn</i>]) | Getter/setter for the internal forces that control the d3 simulation engine. Follows the same interface as `d3-force-3d`'s [simulation.force](https://github.com/vasturiano/d3-force-3d#simulation_force). Three forces are included by default: `'link'` (based on [forceLink](https://github.com/vasturiano/d3-force-3d#forceLink)), `'charge'` (based on [forceManyBody](https://github.com/vasturiano/d3-force-3d#forceManyBody)) and `'center'` (based on [forceCenter](https://github.com/vasturiano/d3-force-3d#forceCenter)). Each of these forces can be reconfigured, or new forces can be added to the system. This method is only applicable if using the d3 simulation engine. | |
|
||||
| <b>d3ReheatSimulation</b>() | Reheats the force simulation engine, by setting the `alpha` value to `1`. Only applicable if using the d3 simulation engine. | |
|
||||
| <b>ngraphPhysics</b>([<i>object</i>]) | Specify custom physics configuration for ngraph, according to its [configuration object](https://github.com/anvaka/ngraph.forcelayout#configuring-physics) syntax. This method is only applicable if using the ngraph simulation engine. | *ngraph default* |
|
||||
| <b>warmupTicks</b>([<i>int</i>]) | Getter/setter for number of layout engine cycles to dry-run at ignition before starting to render. | 0 |
|
||||
| <b>cooldownTicks</b>([<i>int</i>]) | Getter/setter for how many build-in frames to render before stopping and freezing the layout engine. | Infinity |
|
||||
| <b>cooldownTime</b>([<i>num</i>]) | Getter/setter for how long (ms) to render for before stopping and freezing the layout engine. | 15000 |
|
||||
| <b>onEngineTick</b>(<i>fn</i>) | Callback function invoked at every tick of the simulation engine. | - |
|
||||
| <b>onEngineStop</b>(<i>fn</i>) | Callback function invoked when the simulation engine stops and the layout is frozen. | - |
|
||||
|
||||
### Interaction
|
||||
|
||||
| Method | Description | Default |
|
||||
| --- | --- | :--: |
|
||||
| <b>onNodeClick</b>(<i>fn</i>) | Callback function for node (left-button) clicks. The node object and the event object are included as arguments `onNodeClick(node, event)`. | - |
|
||||
| <b>onNodeRightClick</b>(<i>fn</i>) | Callback function for node right-clicks. The node object and the event object are included as arguments `onNodeRightClick(node, event)`. | - |
|
||||
| <b>onNodeHover</b>(<i>fn</i>) | Callback function for node mouse over events. The node object (or `null` if there's no node under the mouse line of sight) is included as the first argument, and the previous node object (or null) as second argument: `onNodeHover(node, prevNode)`. | - |
|
||||
| <b>onNodeDrag</b>(<i>fn</i>) | Callback function for node drag interactions. This function is invoked repeatedly while dragging a node, every time its position is updated. The node object is included as the first argument, and the change in coordinates since the last iteration of this function are included as the second argument in format {x,y,z}: `onNodeDrag(node, translate)`. | - |
|
||||
| <b>onNodeDragEnd</b>(<i>fn</i>) | Callback function for the end of node drag interactions. This function is invoked when the node is released. The node object is included as the first argument, and the entire change in coordinates from initial location are included as the second argument in format {x,y,z}: `onNodeDragEnd(node, translate)`. | - |
|
||||
| <b>onLinkClick</b>(<i>fn</i>) | Callback function for link (left-button) clicks. The link object and the event object are included as arguments `onLinkClick(link, event)`. | - |
|
||||
| <b>onLinkRightClick</b>(<i>fn</i>) | Callback function for link right-clicks. The link object and the event object are included as arguments `onLinkRightClick(link, event)`. | - |
|
||||
| <b>onLinkHover</b>(<i>fn</i>) | Callback function for link mouse over events. The link object (or `null` if there's no link under the mouse line of sight) is included as the first argument, and the previous link object (or null) as second argument: `onLinkHover(link, prevLink)`. | - |
|
||||
| <b>onBackgroundClick</b>(<i>fn</i>) | Callback function for click events on the empty space between the nodes and links. The event object is included as single argument `onBackgroundClick(event)`. | - |
|
||||
| <b>onBackgroundRightClick</b>(<i>fn</i>) | Callback function for right-click events on the empty space between the nodes and links. The event object is included as single argument `onBackgroundRightClick(event)`. | - |
|
||||
| <b>linkHoverPrecision</b>([<i>int</i>]) | Whether to display the link label when gazing the link closely (low value) or from far away (high value). | 1 |
|
||||
| <b>enablePointerInteraction</b>([<i>boolean</i>]) | Getter/setter for whether to enable the mouse tracking events. This activates an internal tracker of the canvas mouse position and enables the functionality of object hover/click and tooltip labels, at the cost of performance. If you're looking for maximum gain in your graph performance it's recommended to switch off this property. | `true` |
|
||||
| <b>enableNodeDrag</b>([<i>boolean</i>]) | Getter/setter for whether to enable the user interaction to drag nodes by click-dragging. Only supported on the `d3` force engine. If enabled, every time a node is dragged the simulation is re-heated so the other nodes react to the changes. Only applicable if enablePointerInteraction is `true` and using the `d3` force engine. | `true` |
|
||||
| <b>enableNavigationControls</b>([<i>boolean</i>]) | Getter/setter for whether to enable the trackball navigation controls used to move the camera using mouse interactions (rotate/zoom/pan). | `true` |
|
||||
|
||||
### Utility
|
||||
|
||||
| Method | Description |
|
||||
| --- | --- |
|
||||
| <b>getGraphBbox</b>([<i>nodeFilterFn</i>]) | Returns the current bounding box of the nodes in the graph, formatted as `{ x: [<num>, <num>], y: [<num>, <num>], z: [<num>, <num>] }`. If no nodes are found, returns `null`. Accepts an optional argument to define a custom node filter: `node => <boolean>`, which should return a truthy value if the node is to be included. This can be useful to calculate the bounding box of a portion of the graph. ||
|
||||
| <b>graph2ScreenCoords</b>(<i>x</i>, <i>y</i>, <i>z</i>) | Utility method to translate node coordinates to the viewport domain. Given a set of `x`,`y`,`z` graph coordinates, returns the current equivalent `{x, y}` in viewport coordinates. |
|
||||
| <b>screen2GraphCoords</b>(<i>x</i>, <i>y</i>, <i>distance</i>) | Utility method to translate viewport distance coordinates to the graph domain. Given a pair of `x`,`y` screen coordinates and distance from the camera, returns the current equivalent `{x, y, z}` in the domain of graph node coordinates. |
|
||||
|
||||
### Input JSON syntax
|
||||
```json
|
||||
{
|
||||
"nodes": [
|
||||
{
|
||||
"id": "id1",
|
||||
"name": "name1",
|
||||
"val": 1
|
||||
},
|
||||
{
|
||||
"id": "id2",
|
||||
"name": "name2",
|
||||
"val": 10
|
||||
},
|
||||
...
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
"source": "id1",
|
||||
"target": "id2"
|
||||
},
|
||||
...
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Giving Back
|
||||
|
||||
[](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8¤cy_code=USD&source=url) If this project has helped you and you'd like to contribute back, you can always [buy me a ☕](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8¤cy_code=USD&source=url)!
|
||||
|
||||
[npm-img]: https://img.shields.io/npm/v/3d-force-graph
|
||||
[npm-url]: https://npmjs.org/package/3d-force-graph
|
||||
[build-size-img]: https://img.shields.io/bundlephobia/minzip/3d-force-graph
|
||||
[build-size-url]: https://bundlephobia.com/result?p=3d-force-graph
|
||||
[npm-downloads-img]: https://img.shields.io/npm/dt/3d-force-graph
|
||||
[npm-downloads-url]: https://www.npmtrends.com/3d-force-graph
|
||||
83
VISUALIZACION/node_modules/3d-force-graph/dist/3d-force-graph.d.ts
generated
vendored
Executable file
83
VISUALIZACION/node_modules/3d-force-graph/dist/3d-force-graph.d.ts
generated
vendored
Executable file
|
|
@ -0,0 +1,83 @@
|
|||
import { WebGLRendererParameters, Renderer, Light, Scene, Camera, WebGLRenderer } from 'three';
|
||||
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
|
||||
import { ThreeForceGraphGeneric } from 'three-forcegraph';
|
||||
|
||||
interface ConfigOptions {
|
||||
controlType?: 'trackball' | 'orbit' | 'fly'
|
||||
rendererConfig?: WebGLRendererParameters,
|
||||
extraRenderers?: Renderer[]
|
||||
}
|
||||
|
||||
type Accessor<In, Out> = Out | string | ((obj: In) => Out);
|
||||
type ObjAccessor<T> = Accessor<object, T>;
|
||||
|
||||
type Coords = { x: number; y: number; z: number; };
|
||||
|
||||
// don't surface these internal props from inner ThreeForceGraph
|
||||
type ExcludedInnerProps = 'onLoading' | 'onFinishLoading' | 'onUpdate' | 'onFinishUpdate' | 'tickFrame' | 'd3AlphaTarget' | 'resetCountdown';
|
||||
|
||||
interface ForceGraph3DGenericInstance<ChainableInstance>
|
||||
extends Omit<ThreeForceGraphGeneric<ChainableInstance>, ExcludedInnerProps> {
|
||||
(element: HTMLElement): ChainableInstance;
|
||||
_destructor(): void;
|
||||
|
||||
// Container layout
|
||||
width(): number;
|
||||
width(width: number): ChainableInstance;
|
||||
height(): number;
|
||||
height(height: number): ChainableInstance;
|
||||
backgroundColor(): string;
|
||||
backgroundColor(color: string): ChainableInstance;
|
||||
showNavInfo(): boolean;
|
||||
showNavInfo(enabled: boolean): ChainableInstance;
|
||||
|
||||
// Labels
|
||||
nodeLabel(): ObjAccessor<string>;
|
||||
nodeLabel(textAccessor: ObjAccessor<string>): ChainableInstance;
|
||||
linkLabel(): ObjAccessor<string>;
|
||||
linkLabel(textAccessor: ObjAccessor<string>): ChainableInstance;
|
||||
|
||||
// Interaction
|
||||
onNodeClick(callback: (node: object, event: MouseEvent) => void): ChainableInstance;
|
||||
onNodeRightClick(callback: (node: object, event: MouseEvent) => void): ChainableInstance;
|
||||
onNodeHover(callback: (node: object | null, previousNode: object | null) => void): ChainableInstance;
|
||||
onNodeDrag(callback: (node: object, translate: Coords) => void): ChainableInstance;
|
||||
onNodeDragEnd(callback: (node: object, translate: Coords) => void): ChainableInstance;
|
||||
onLinkClick(callback: (link: object, event: MouseEvent) => void): ChainableInstance;
|
||||
onLinkRightClick(callback: (link: object, event: MouseEvent) => void): ChainableInstance;
|
||||
onLinkHover(callback: (link: object | null, previousLink: object | null) => void): ChainableInstance;
|
||||
onBackgroundClick(callback: (event: MouseEvent) => void): ChainableInstance;
|
||||
onBackgroundRightClick(callback: (event: MouseEvent) => void): ChainableInstance;
|
||||
linkHoverPrecision(): number;
|
||||
linkHoverPrecision(precision: number): ChainableInstance;
|
||||
enablePointerInteraction(): boolean;
|
||||
enablePointerInteraction(enable: boolean): ChainableInstance;
|
||||
enableNodeDrag(): boolean;
|
||||
enableNodeDrag(enable: boolean): ChainableInstance;
|
||||
enableNavigationControls(): boolean;
|
||||
enableNavigationControls(enable: boolean): ChainableInstance;
|
||||
|
||||
// Render control
|
||||
pauseAnimation(): ChainableInstance;
|
||||
resumeAnimation(): ChainableInstance;
|
||||
cameraPosition(): Coords;
|
||||
cameraPosition(position: Partial<Coords>, lookAt?: Coords, transitionMs?: number): ChainableInstance;
|
||||
zoomToFit(durationMs?: number, padding?: number, nodeFilter?: (node: object) => boolean): ChainableInstance;
|
||||
postProcessingComposer(): EffectComposer;
|
||||
lights(): Light[];
|
||||
lights(lights: Light[]): ChainableInstance;
|
||||
scene(): Scene;
|
||||
camera(): Camera;
|
||||
renderer(): WebGLRenderer;
|
||||
controls(): object;
|
||||
|
||||
// Utility
|
||||
graph2ScreenCoords(x: number, y: number, z: number): Coords;
|
||||
screen2GraphCoords(screenX: number, screenY: number, distance: number): Coords;
|
||||
}
|
||||
|
||||
type ForceGraph3DInstance = ForceGraph3DGenericInstance<ForceGraph3DInstance>;
|
||||
|
||||
declare function ForceGraph3D(configOptions?: ConfigOptions): ForceGraph3DInstance;
|
||||
|
||||
export { type ConfigOptions, type ForceGraph3DGenericInstance, type ForceGraph3DInstance, ForceGraph3D as default };
|
||||
49642
VISUALIZACION/node_modules/3d-force-graph/dist/3d-force-graph.js
generated
vendored
Executable file
49642
VISUALIZACION/node_modules/3d-force-graph/dist/3d-force-graph.js
generated
vendored
Executable file
File diff suppressed because one or more lines are too long
1
VISUALIZACION/node_modules/3d-force-graph/dist/3d-force-graph.js.map
generated
vendored
Executable file
1
VISUALIZACION/node_modules/3d-force-graph/dist/3d-force-graph.js.map
generated
vendored
Executable file
File diff suppressed because one or more lines are too long
5
VISUALIZACION/node_modules/3d-force-graph/dist/3d-force-graph.min.js
generated
vendored
Executable file
5
VISUALIZACION/node_modules/3d-force-graph/dist/3d-force-graph.min.js
generated
vendored
Executable file
File diff suppressed because one or more lines are too long
557
VISUALIZACION/node_modules/3d-force-graph/dist/3d-force-graph.mjs
generated
vendored
Executable file
557
VISUALIZACION/node_modules/3d-force-graph/dist/3d-force-graph.mjs
generated
vendored
Executable file
|
|
@ -0,0 +1,557 @@
|
|||
import { AmbientLight, DirectionalLight, Vector3, REVISION } from 'three';
|
||||
import { DragControls } from 'three/examples/jsm/controls/DragControls.js';
|
||||
import ThreeForceGraph from 'three-forcegraph';
|
||||
import ThreeRenderObjects from 'three-render-objects';
|
||||
import accessorFn from 'accessor-fn';
|
||||
import Kapsule from 'kapsule';
|
||||
|
||||
function styleInject(css, ref) {
|
||||
if (ref === void 0) ref = {};
|
||||
var insertAt = ref.insertAt;
|
||||
if (!css || typeof document === 'undefined') {
|
||||
return;
|
||||
}
|
||||
var head = document.head || document.getElementsByTagName('head')[0];
|
||||
var style = document.createElement('style');
|
||||
style.type = 'text/css';
|
||||
if (insertAt === 'top') {
|
||||
if (head.firstChild) {
|
||||
head.insertBefore(style, head.firstChild);
|
||||
} else {
|
||||
head.appendChild(style);
|
||||
}
|
||||
} else {
|
||||
head.appendChild(style);
|
||||
}
|
||||
if (style.styleSheet) {
|
||||
style.styleSheet.cssText = css;
|
||||
} else {
|
||||
style.appendChild(document.createTextNode(css));
|
||||
}
|
||||
}
|
||||
|
||||
var css_248z = ".graph-info-msg {\n top: 50%;\n width: 100%;\n text-align: center;\n color: lavender;\n opacity: 0.7;\n font-size: 22px;\n position: absolute;\n font-family: Sans-serif;\n}\n\n.scene-container .clickable {\n cursor: pointer;\n}\n\n.scene-container .grabbable {\n cursor: move;\n cursor: grab;\n cursor: -moz-grab;\n cursor: -webkit-grab;\n}\n\n.scene-container .grabbable:active {\n cursor: grabbing;\n cursor: -moz-grabbing;\n cursor: -webkit-grabbing;\n}";
|
||||
styleInject(css_248z);
|
||||
|
||||
function ownKeys(e, r) {
|
||||
var t = Object.keys(e);
|
||||
if (Object.getOwnPropertySymbols) {
|
||||
var o = Object.getOwnPropertySymbols(e);
|
||||
r && (o = o.filter(function (r) {
|
||||
return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
||||
})), t.push.apply(t, o);
|
||||
}
|
||||
return t;
|
||||
}
|
||||
function _objectSpread2(e) {
|
||||
for (var r = 1; r < arguments.length; r++) {
|
||||
var t = null != arguments[r] ? arguments[r] : {};
|
||||
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
|
||||
_defineProperty(e, r, t[r]);
|
||||
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
|
||||
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
||||
});
|
||||
}
|
||||
return e;
|
||||
}
|
||||
function _toPrimitive(t, r) {
|
||||
if ("object" != typeof t || !t) return t;
|
||||
var e = t[Symbol.toPrimitive];
|
||||
if (void 0 !== e) {
|
||||
var i = e.call(t, r || "default");
|
||||
if ("object" != typeof i) return i;
|
||||
throw new TypeError("@@toPrimitive must return a primitive value.");
|
||||
}
|
||||
return ("string" === r ? String : Number)(t);
|
||||
}
|
||||
function _toPropertyKey(t) {
|
||||
var i = _toPrimitive(t, "string");
|
||||
return "symbol" == typeof i ? i : i + "";
|
||||
}
|
||||
function _defineProperty(obj, key, value) {
|
||||
key = _toPropertyKey(key);
|
||||
if (key in obj) {
|
||||
Object.defineProperty(obj, key, {
|
||||
value: value,
|
||||
enumerable: true,
|
||||
configurable: true,
|
||||
writable: true
|
||||
});
|
||||
} else {
|
||||
obj[key] = value;
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
function _toConsumableArray(arr) {
|
||||
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
|
||||
}
|
||||
function _arrayWithoutHoles(arr) {
|
||||
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
|
||||
}
|
||||
function _iterableToArray(iter) {
|
||||
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
|
||||
}
|
||||
function _unsupportedIterableToArray(o, minLen) {
|
||||
if (!o) return;
|
||||
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
||||
var n = Object.prototype.toString.call(o).slice(8, -1);
|
||||
if (n === "Object" && o.constructor) n = o.constructor.name;
|
||||
if (n === "Map" || n === "Set") return Array.from(o);
|
||||
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
||||
}
|
||||
function _arrayLikeToArray(arr, len) {
|
||||
if (len == null || len > arr.length) len = arr.length;
|
||||
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
||||
return arr2;
|
||||
}
|
||||
function _nonIterableSpread() {
|
||||
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
||||
}
|
||||
|
||||
function linkKapsule (kapsulePropName, kapsuleType) {
|
||||
var dummyK = new kapsuleType(); // To extract defaults
|
||||
dummyK._destructor && dummyK._destructor();
|
||||
return {
|
||||
linkProp: function linkProp(prop) {
|
||||
// link property config
|
||||
return {
|
||||
"default": dummyK[prop](),
|
||||
onChange: function onChange(v, state) {
|
||||
state[kapsulePropName][prop](v);
|
||||
},
|
||||
triggerUpdate: false
|
||||
};
|
||||
},
|
||||
linkMethod: function linkMethod(method) {
|
||||
// link method pass-through
|
||||
return function (state) {
|
||||
var kapsuleInstance = state[kapsulePropName];
|
||||
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
||||
args[_key - 1] = arguments[_key];
|
||||
}
|
||||
var returnVal = kapsuleInstance[method].apply(kapsuleInstance, args);
|
||||
return returnVal === kapsuleInstance ? this // chain based on the parent object, not the inner kapsule
|
||||
: returnVal;
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
var three = window.THREE ? window.THREE // Prefer consumption from global THREE, if exists
|
||||
: {
|
||||
AmbientLight: AmbientLight,
|
||||
DirectionalLight: DirectionalLight,
|
||||
Vector3: Vector3,
|
||||
REVISION: REVISION
|
||||
};
|
||||
|
||||
//
|
||||
|
||||
var CAMERA_DISTANCE2NODES_FACTOR = 170;
|
||||
|
||||
//
|
||||
|
||||
// Expose config from forceGraph
|
||||
var bindFG = linkKapsule('forceGraph', ThreeForceGraph);
|
||||
var linkedFGProps = Object.assign.apply(Object, _toConsumableArray(['jsonUrl', 'graphData', 'numDimensions', 'dagMode', 'dagLevelDistance', 'dagNodeFilter', 'onDagError', 'nodeRelSize', 'nodeId', 'nodeVal', 'nodeResolution', 'nodeColor', 'nodeAutoColorBy', 'nodeOpacity', 'nodeVisibility', 'nodeThreeObject', 'nodeThreeObjectExtend', 'linkSource', 'linkTarget', 'linkVisibility', 'linkColor', 'linkAutoColorBy', 'linkOpacity', 'linkWidth', 'linkResolution', 'linkCurvature', 'linkCurveRotation', 'linkMaterial', 'linkThreeObject', 'linkThreeObjectExtend', 'linkPositionUpdate', 'linkDirectionalArrowLength', 'linkDirectionalArrowColor', 'linkDirectionalArrowRelPos', 'linkDirectionalArrowResolution', 'linkDirectionalParticles', 'linkDirectionalParticleSpeed', 'linkDirectionalParticleWidth', 'linkDirectionalParticleColor', 'linkDirectionalParticleResolution', 'forceEngine', 'd3AlphaDecay', 'd3VelocityDecay', 'd3AlphaMin', 'ngraphPhysics', 'warmupTicks', 'cooldownTicks', 'cooldownTime', 'onEngineTick', 'onEngineStop'].map(function (p) {
|
||||
return _defineProperty({}, p, bindFG.linkProp(p));
|
||||
})));
|
||||
var linkedFGMethods = Object.assign.apply(Object, _toConsumableArray(['refresh', 'getGraphBbox', 'd3Force', 'd3ReheatSimulation', 'emitParticle'].map(function (p) {
|
||||
return _defineProperty({}, p, bindFG.linkMethod(p));
|
||||
})));
|
||||
|
||||
// Expose config from renderObjs
|
||||
var bindRenderObjs = linkKapsule('renderObjs', ThreeRenderObjects);
|
||||
var linkedRenderObjsProps = Object.assign.apply(Object, _toConsumableArray(['width', 'height', 'backgroundColor', 'showNavInfo', 'enablePointerInteraction'].map(function (p) {
|
||||
return _defineProperty({}, p, bindRenderObjs.linkProp(p));
|
||||
})));
|
||||
var linkedRenderObjsMethods = Object.assign.apply(Object, _toConsumableArray(['lights', 'cameraPosition', 'postProcessingComposer'].map(function (p) {
|
||||
return _defineProperty({}, p, bindRenderObjs.linkMethod(p));
|
||||
})).concat([{
|
||||
graph2ScreenCoords: bindRenderObjs.linkMethod('getScreenCoords'),
|
||||
screen2GraphCoords: bindRenderObjs.linkMethod('getSceneCoords')
|
||||
}]));
|
||||
|
||||
//
|
||||
|
||||
var _3dForceGraph = Kapsule({
|
||||
props: _objectSpread2(_objectSpread2({
|
||||
nodeLabel: {
|
||||
"default": 'name',
|
||||
triggerUpdate: false
|
||||
},
|
||||
linkLabel: {
|
||||
"default": 'name',
|
||||
triggerUpdate: false
|
||||
},
|
||||
linkHoverPrecision: {
|
||||
"default": 1,
|
||||
onChange: function onChange(p, state) {
|
||||
return state.renderObjs.lineHoverPrecision(p);
|
||||
},
|
||||
triggerUpdate: false
|
||||
},
|
||||
enableNavigationControls: {
|
||||
"default": true,
|
||||
onChange: function onChange(enable, state) {
|
||||
var controls = state.renderObjs.controls();
|
||||
if (controls) {
|
||||
controls.enabled = enable;
|
||||
// trigger mouseup on re-enable to prevent sticky controls
|
||||
enable && controls.domElement && controls.domElement.dispatchEvent(new PointerEvent('pointerup'));
|
||||
}
|
||||
},
|
||||
triggerUpdate: false
|
||||
},
|
||||
enableNodeDrag: {
|
||||
"default": true,
|
||||
triggerUpdate: false
|
||||
},
|
||||
onNodeDrag: {
|
||||
"default": function _default() {},
|
||||
triggerUpdate: false
|
||||
},
|
||||
onNodeDragEnd: {
|
||||
"default": function _default() {},
|
||||
triggerUpdate: false
|
||||
},
|
||||
onNodeClick: {
|
||||
triggerUpdate: false
|
||||
},
|
||||
onNodeRightClick: {
|
||||
triggerUpdate: false
|
||||
},
|
||||
onNodeHover: {
|
||||
triggerUpdate: false
|
||||
},
|
||||
onLinkClick: {
|
||||
triggerUpdate: false
|
||||
},
|
||||
onLinkRightClick: {
|
||||
triggerUpdate: false
|
||||
},
|
||||
onLinkHover: {
|
||||
triggerUpdate: false
|
||||
},
|
||||
onBackgroundClick: {
|
||||
triggerUpdate: false
|
||||
},
|
||||
onBackgroundRightClick: {
|
||||
triggerUpdate: false
|
||||
}
|
||||
}, linkedFGProps), linkedRenderObjsProps),
|
||||
methods: _objectSpread2(_objectSpread2({
|
||||
zoomToFit: function zoomToFit(state, transitionDuration, padding) {
|
||||
var _state$forceGraph;
|
||||
for (var _len = arguments.length, bboxArgs = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
|
||||
bboxArgs[_key - 3] = arguments[_key];
|
||||
}
|
||||
state.renderObjs.fitToBbox((_state$forceGraph = state.forceGraph).getGraphBbox.apply(_state$forceGraph, bboxArgs), transitionDuration, padding);
|
||||
return this;
|
||||
},
|
||||
pauseAnimation: function pauseAnimation(state) {
|
||||
if (state.animationFrameRequestId !== null) {
|
||||
cancelAnimationFrame(state.animationFrameRequestId);
|
||||
state.animationFrameRequestId = null;
|
||||
}
|
||||
return this;
|
||||
},
|
||||
resumeAnimation: function resumeAnimation(state) {
|
||||
if (state.animationFrameRequestId === null) {
|
||||
this._animationCycle();
|
||||
}
|
||||
return this;
|
||||
},
|
||||
_animationCycle: function _animationCycle(state) {
|
||||
if (state.enablePointerInteraction) {
|
||||
// reset canvas cursor (override dragControls cursor)
|
||||
this.renderer().domElement.style.cursor = null;
|
||||
}
|
||||
|
||||
// Frame cycle
|
||||
state.forceGraph.tickFrame();
|
||||
state.renderObjs.tick();
|
||||
state.animationFrameRequestId = requestAnimationFrame(this._animationCycle);
|
||||
},
|
||||
scene: function scene(state) {
|
||||
return state.renderObjs.scene();
|
||||
},
|
||||
// Expose scene
|
||||
camera: function camera(state) {
|
||||
return state.renderObjs.camera();
|
||||
},
|
||||
// Expose camera
|
||||
renderer: function renderer(state) {
|
||||
return state.renderObjs.renderer();
|
||||
},
|
||||
// Expose renderer
|
||||
controls: function controls(state) {
|
||||
return state.renderObjs.controls();
|
||||
},
|
||||
// Expose controls
|
||||
tbControls: function tbControls(state) {
|
||||
return state.renderObjs.tbControls();
|
||||
},
|
||||
// To be deprecated
|
||||
_destructor: function _destructor() {
|
||||
this.pauseAnimation();
|
||||
this.graphData({
|
||||
nodes: [],
|
||||
links: []
|
||||
});
|
||||
}
|
||||
}, linkedFGMethods), linkedRenderObjsMethods),
|
||||
stateInit: function stateInit(_ref5) {
|
||||
var controlType = _ref5.controlType,
|
||||
rendererConfig = _ref5.rendererConfig,
|
||||
extraRenderers = _ref5.extraRenderers;
|
||||
var forceGraph = new ThreeForceGraph();
|
||||
return {
|
||||
forceGraph: forceGraph,
|
||||
renderObjs: ThreeRenderObjects({
|
||||
controlType: controlType,
|
||||
rendererConfig: rendererConfig,
|
||||
extraRenderers: extraRenderers
|
||||
}).objects([forceGraph]) // Populate scene
|
||||
.lights([new three.AmbientLight(0xcccccc, Math.PI), new three.DirectionalLight(0xffffff, 0.6 * Math.PI)])
|
||||
};
|
||||
},
|
||||
init: function init(domNode, state) {
|
||||
// Wipe DOM
|
||||
domNode.innerHTML = '';
|
||||
|
||||
// Add relative container
|
||||
domNode.appendChild(state.container = document.createElement('div'));
|
||||
state.container.style.position = 'relative';
|
||||
|
||||
// Add renderObjs
|
||||
var roDomNode = document.createElement('div');
|
||||
state.container.appendChild(roDomNode);
|
||||
state.renderObjs(roDomNode);
|
||||
var camera = state.renderObjs.camera();
|
||||
var renderer = state.renderObjs.renderer();
|
||||
var controls = state.renderObjs.controls();
|
||||
controls.enabled = !!state.enableNavigationControls;
|
||||
state.lastSetCameraZ = camera.position.z;
|
||||
|
||||
// Add info space
|
||||
var infoElem;
|
||||
state.container.appendChild(infoElem = document.createElement('div'));
|
||||
infoElem.className = 'graph-info-msg';
|
||||
infoElem.textContent = '';
|
||||
|
||||
// config forcegraph
|
||||
state.forceGraph.onLoading(function () {
|
||||
infoElem.textContent = 'Loading...';
|
||||
}).onFinishLoading(function () {
|
||||
infoElem.textContent = '';
|
||||
}).onUpdate(function () {
|
||||
// sync graph data structures
|
||||
state.graphData = state.forceGraph.graphData();
|
||||
|
||||
// re-aim camera, if still in default position (not user modified)
|
||||
if (camera.position.x === 0 && camera.position.y === 0 && camera.position.z === state.lastSetCameraZ && state.graphData.nodes.length) {
|
||||
camera.lookAt(state.forceGraph.position);
|
||||
state.lastSetCameraZ = camera.position.z = Math.cbrt(state.graphData.nodes.length) * CAMERA_DISTANCE2NODES_FACTOR;
|
||||
}
|
||||
}).onFinishUpdate(function () {
|
||||
// Setup node drag interaction
|
||||
if (state._dragControls) {
|
||||
var curNodeDrag = state.graphData.nodes.find(function (node) {
|
||||
return node.__initialFixedPos && !node.__disposeControlsAfterDrag;
|
||||
}); // detect if there's a node being dragged using the existing drag controls
|
||||
if (curNodeDrag) {
|
||||
curNodeDrag.__disposeControlsAfterDrag = true; // postpone previous controls disposal until drag ends
|
||||
} else {
|
||||
state._dragControls.dispose(); // cancel previous drag controls
|
||||
}
|
||||
state._dragControls = undefined;
|
||||
}
|
||||
if (state.enableNodeDrag && state.enablePointerInteraction && state.forceEngine === 'd3') {
|
||||
// Can't access node positions programmatically in ngraph
|
||||
var dragControls = state._dragControls = new DragControls(state.graphData.nodes.map(function (node) {
|
||||
return node.__threeObj;
|
||||
}).filter(function (obj) {
|
||||
return obj;
|
||||
}), camera, renderer.domElement);
|
||||
dragControls.addEventListener('dragstart', function (event) {
|
||||
controls.enabled = false; // Disable controls while dragging
|
||||
|
||||
// track drag object movement
|
||||
event.object.__initialPos = event.object.position.clone();
|
||||
event.object.__prevPos = event.object.position.clone();
|
||||
var node = getGraphObj(event.object).__data;
|
||||
!node.__initialFixedPos && (node.__initialFixedPos = {
|
||||
fx: node.fx,
|
||||
fy: node.fy,
|
||||
fz: node.fz
|
||||
});
|
||||
!node.__initialPos && (node.__initialPos = {
|
||||
x: node.x,
|
||||
y: node.y,
|
||||
z: node.z
|
||||
});
|
||||
|
||||
// lock node
|
||||
['x', 'y', 'z'].forEach(function (c) {
|
||||
return node["f".concat(c)] = node[c];
|
||||
});
|
||||
|
||||
// drag cursor
|
||||
renderer.domElement.classList.add('grabbable');
|
||||
});
|
||||
dragControls.addEventListener('drag', function (event) {
|
||||
var nodeObj = getGraphObj(event.object);
|
||||
if (!event.object.hasOwnProperty('__graphObjType')) {
|
||||
// If dragging a child of the node, update the node object instead
|
||||
var initPos = event.object.__initialPos;
|
||||
var prevPos = event.object.__prevPos;
|
||||
var _newPos = event.object.position;
|
||||
nodeObj.position.add(_newPos.clone().sub(prevPos)); // translate node object by the motion delta
|
||||
prevPos.copy(_newPos);
|
||||
_newPos.copy(initPos); // reset child back to its initial position
|
||||
}
|
||||
var node = nodeObj.__data;
|
||||
var newPos = nodeObj.position;
|
||||
var translate = {
|
||||
x: newPos.x - node.x,
|
||||
y: newPos.y - node.y,
|
||||
z: newPos.z - node.z
|
||||
};
|
||||
// Move fx/fy/fz (and x/y/z) of nodes based on object new position
|
||||
['x', 'y', 'z'].forEach(function (c) {
|
||||
return node["f".concat(c)] = node[c] = newPos[c];
|
||||
});
|
||||
state.forceGraph.d3AlphaTarget(0.3) // keep engine running at low intensity throughout drag
|
||||
.resetCountdown(); // prevent freeze while dragging
|
||||
|
||||
node.__dragged = true;
|
||||
state.onNodeDrag(node, translate);
|
||||
});
|
||||
dragControls.addEventListener('dragend', function (event) {
|
||||
delete event.object.__initialPos; // remove tracking attributes
|
||||
delete event.object.__prevPos;
|
||||
var node = getGraphObj(event.object).__data;
|
||||
|
||||
// dispose previous controls if needed
|
||||
if (node.__disposeControlsAfterDrag) {
|
||||
dragControls.dispose();
|
||||
delete node.__disposeControlsAfterDrag;
|
||||
}
|
||||
var initFixedPos = node.__initialFixedPos;
|
||||
var initPos = node.__initialPos;
|
||||
var translate = {
|
||||
x: initPos.x - node.x,
|
||||
y: initPos.y - node.y,
|
||||
z: initPos.z - node.z
|
||||
};
|
||||
if (initFixedPos) {
|
||||
['x', 'y', 'z'].forEach(function (c) {
|
||||
var fc = "f".concat(c);
|
||||
if (initFixedPos[fc] === undefined) {
|
||||
delete node[fc];
|
||||
}
|
||||
});
|
||||
delete node.__initialFixedPos;
|
||||
delete node.__initialPos;
|
||||
if (node.__dragged) {
|
||||
delete node.__dragged;
|
||||
state.onNodeDragEnd(node, translate);
|
||||
}
|
||||
}
|
||||
state.forceGraph.d3AlphaTarget(0) // release engine low intensity
|
||||
.resetCountdown(); // let the engine readjust after releasing fixed nodes
|
||||
|
||||
if (state.enableNavigationControls) {
|
||||
controls.enabled = true; // Re-enable controls
|
||||
controls.domElement && controls.domElement.ownerDocument && controls.domElement.ownerDocument.dispatchEvent(
|
||||
// simulate mouseup to ensure the controls don't take over after dragend
|
||||
new PointerEvent('pointerup', {
|
||||
pointerType: 'touch'
|
||||
}));
|
||||
}
|
||||
|
||||
// clear cursor
|
||||
renderer.domElement.classList.remove('grabbable');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// config renderObjs
|
||||
three.REVISION < 155 && (state.renderObjs.renderer().useLegacyLights = false); // force behavior for three < 155
|
||||
state.renderObjs.hoverOrderComparator(function (a, b) {
|
||||
// Prioritize graph objects
|
||||
var aObj = getGraphObj(a);
|
||||
if (!aObj) return 1;
|
||||
var bObj = getGraphObj(b);
|
||||
if (!bObj) return -1;
|
||||
|
||||
// Prioritize nodes over links
|
||||
var isNode = function isNode(o) {
|
||||
return o.__graphObjType === 'node';
|
||||
};
|
||||
return isNode(bObj) - isNode(aObj);
|
||||
}).tooltipContent(function (obj) {
|
||||
var graphObj = getGraphObj(obj);
|
||||
return graphObj ? accessorFn(state["".concat(graphObj.__graphObjType, "Label")])(graphObj.__data) || '' : '';
|
||||
}).hoverDuringDrag(false).onHover(function (obj) {
|
||||
// Update tooltip and trigger onHover events
|
||||
var hoverObj = getGraphObj(obj);
|
||||
if (hoverObj !== state.hoverObj) {
|
||||
var prevObjType = state.hoverObj ? state.hoverObj.__graphObjType : null;
|
||||
var prevObjData = state.hoverObj ? state.hoverObj.__data : null;
|
||||
var objType = hoverObj ? hoverObj.__graphObjType : null;
|
||||
var objData = hoverObj ? hoverObj.__data : null;
|
||||
if (prevObjType && prevObjType !== objType) {
|
||||
// Hover out
|
||||
var fn = state["on".concat(prevObjType === 'node' ? 'Node' : 'Link', "Hover")];
|
||||
fn && fn(null, prevObjData);
|
||||
}
|
||||
if (objType) {
|
||||
// Hover in
|
||||
var _fn = state["on".concat(objType === 'node' ? 'Node' : 'Link', "Hover")];
|
||||
_fn && _fn(objData, prevObjType === objType ? prevObjData : null);
|
||||
}
|
||||
|
||||
// set pointer if hovered object is clickable
|
||||
renderer.domElement.classList[hoverObj && state["on".concat(objType === 'node' ? 'Node' : 'Link', "Click")] || !hoverObj && state.onBackgroundClick ? 'add' : 'remove']('clickable');
|
||||
state.hoverObj = hoverObj;
|
||||
}
|
||||
}).clickAfterDrag(false).onClick(function (obj, ev) {
|
||||
var graphObj = getGraphObj(obj);
|
||||
if (graphObj) {
|
||||
var fn = state["on".concat(graphObj.__graphObjType === 'node' ? 'Node' : 'Link', "Click")];
|
||||
fn && fn(graphObj.__data, ev);
|
||||
} else {
|
||||
state.onBackgroundClick && state.onBackgroundClick(ev);
|
||||
}
|
||||
}).onRightClick(function (obj, ev) {
|
||||
// Handle right-click events
|
||||
var graphObj = getGraphObj(obj);
|
||||
if (graphObj) {
|
||||
var fn = state["on".concat(graphObj.__graphObjType === 'node' ? 'Node' : 'Link', "RightClick")];
|
||||
fn && fn(graphObj.__data, ev);
|
||||
} else {
|
||||
state.onBackgroundRightClick && state.onBackgroundRightClick(ev);
|
||||
}
|
||||
});
|
||||
|
||||
//
|
||||
|
||||
// Kick-off renderer
|
||||
this._animationCycle();
|
||||
}
|
||||
});
|
||||
|
||||
//
|
||||
|
||||
function getGraphObj(object) {
|
||||
var obj = object;
|
||||
// recurse up object chain until finding the graph object
|
||||
while (obj && !obj.hasOwnProperty('__graphObjType')) {
|
||||
obj = obj.parent;
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
|
||||
export { _3dForceGraph as default };
|
||||
18
VISUALIZACION/node_modules/3d-force-graph/example/async-load/index.html
generated
vendored
Executable file
18
VISUALIZACION/node_modules/3d-force-graph/example/async-load/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,18 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
|
||||
<script>
|
||||
const Graph = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.jsonUrl('../datasets/miserables.json')
|
||||
.nodeLabel('id')
|
||||
.nodeAutoColorBy('group');
|
||||
</script>
|
||||
</body>
|
||||
35
VISUALIZACION/node_modules/3d-force-graph/example/auto-colored/index.html
generated
vendored
Executable file
35
VISUALIZACION/node_modules/3d-force-graph/example/auto-colored/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,35 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-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 = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.nodeAutoColorBy('group')
|
||||
.linkAutoColorBy(d => gData.nodes[d.source].group)
|
||||
.linkOpacity(0.5)
|
||||
.graphData(gData);
|
||||
</script>
|
||||
</body>
|
||||
28
VISUALIZACION/node_modules/3d-force-graph/example/basic/index.html
generated
vendored
Executable file
28
VISUALIZACION/node_modules/3d-force-graph/example/basic/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,28 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-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 = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.graphData(gData);
|
||||
</script>
|
||||
</body>
|
||||
28
VISUALIZACION/node_modules/3d-force-graph/example/bloom-effect/index.html
generated
vendored
Executable file
28
VISUALIZACION/node_modules/3d-force-graph/example/bloom-effect/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,28 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!-- <script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
|
||||
<script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script>
|
||||
<script type="module">
|
||||
import { UnrealBloomPass } from '//unpkg.com/three/examples/jsm/postprocessing/UnrealBloomPass.js';
|
||||
|
||||
const Graph = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.backgroundColor('#000003')
|
||||
.jsonUrl('../datasets/miserables.json')
|
||||
.nodeLabel('id')
|
||||
.nodeAutoColorBy('group');
|
||||
|
||||
const bloomPass = new UnrealBloomPass();
|
||||
bloomPass.strength = 4;
|
||||
bloomPass.radius = 1;
|
||||
bloomPass.threshold = 0;
|
||||
Graph.postProcessingComposer().addPass(bloomPass);
|
||||
</script>
|
||||
</body>
|
||||
44
VISUALIZACION/node_modules/3d-force-graph/example/camera-auto-orbit/index.html
generated
vendored
Executable file
44
VISUALIZACION/node_modules/3d-force-graph/example/camera-auto-orbit/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,44 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-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 distance = 1400;
|
||||
|
||||
const Graph = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.enableNodeDrag(false)
|
||||
.enableNavigationControls(false)
|
||||
.showNavInfo(false)
|
||||
.cameraPosition({ z: distance })
|
||||
.graphData(gData);
|
||||
|
||||
// camera orbit
|
||||
let angle = 0;
|
||||
setInterval(() => {
|
||||
Graph.cameraPosition({
|
||||
x: distance * Math.sin(angle),
|
||||
z: distance * Math.cos(angle)
|
||||
});
|
||||
angle += Math.PI / 300;
|
||||
}, 10);
|
||||
</script>
|
||||
</body>
|
||||
35
VISUALIZACION/node_modules/3d-force-graph/example/click-to-focus/index.html
generated
vendored
Executable file
35
VISUALIZACION/node_modules/3d-force-graph/example/click-to-focus/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,35 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
|
||||
<script>
|
||||
const elem = document.getElementById('3d-graph');
|
||||
|
||||
const Graph = ForceGraph3D()
|
||||
(elem)
|
||||
.jsonUrl('../datasets/miserables.json')
|
||||
.nodeLabel('id')
|
||||
.nodeAutoColorBy('group')
|
||||
.onNodeClick(node => {
|
||||
// Aim at node from outside it
|
||||
const distance = 40;
|
||||
const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);
|
||||
|
||||
const newPos = node.x || node.y || node.z
|
||||
? { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }
|
||||
: { x: 0, y: 0, z: distance }; // special case if node is in (0,0,0)
|
||||
|
||||
Graph.cameraPosition(
|
||||
newPos, // new position
|
||||
node, // lookAt ({ x, y, z })
|
||||
3000 // ms transition duration
|
||||
);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
52
VISUALIZACION/node_modules/3d-force-graph/example/collision-detection/index.html
generated
vendored
Executable file
52
VISUALIZACION/node_modules/3d-force-graph/example/collision-detection/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,52 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
|
||||
<script src="//unpkg.com/d3-octree"></script>
|
||||
<script src="//unpkg.com/d3-force-3d"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
|
||||
<script>
|
||||
const N = 50;
|
||||
const nodes = [...Array(N).keys()].map(() => ({
|
||||
// Initial velocity in random direction
|
||||
vx: Math.random(),
|
||||
vy: Math.random(),
|
||||
vz: Math.random()
|
||||
}));
|
||||
|
||||
const Graph = ForceGraph3D()
|
||||
(document.getElementById('3d-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 CUBE_HALF_SIDE = Graph.nodeRelSize() * N * 0.5;
|
||||
|
||||
nodes.forEach(node => {
|
||||
const x = node.x || 0, y = node.y || 0, z = node.z || 0;
|
||||
|
||||
// bounce on box walls
|
||||
if (Math.abs(x) > CUBE_HALF_SIDE) { node.vx *= -1; }
|
||||
if (Math.abs(y) > CUBE_HALF_SIDE) { node.vy *= -1; }
|
||||
if (Math.abs(z) > CUBE_HALF_SIDE) { node.vz *= -1; }
|
||||
});
|
||||
})
|
||||
|
||||
// Add nodes
|
||||
.graphData({ nodes, links: [] });
|
||||
</script>
|
||||
</body>
|
||||
18
VISUALIZACION/node_modules/3d-force-graph/example/controls-fly/index.html
generated
vendored
Executable file
18
VISUALIZACION/node_modules/3d-force-graph/example/controls-fly/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,18 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
|
||||
<script>
|
||||
const Graph = ForceGraph3D({ controlType: 'fly' })
|
||||
(document.getElementById('3d-graph'))
|
||||
.jsonUrl('../datasets/miserables.json')
|
||||
.nodeLabel('id')
|
||||
.nodeAutoColorBy('group');
|
||||
</script>
|
||||
</body>
|
||||
18
VISUALIZACION/node_modules/3d-force-graph/example/controls-orbit/index.html
generated
vendored
Executable file
18
VISUALIZACION/node_modules/3d-force-graph/example/controls-orbit/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,18 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
|
||||
<script>
|
||||
const Graph = ForceGraph3D({ controlType: 'orbit' })
|
||||
(document.getElementById('3d-graph'))
|
||||
.jsonUrl('../datasets/miserables.json')
|
||||
.nodeLabel('id')
|
||||
.nodeAutoColorBy('group');
|
||||
</script>
|
||||
</body>
|
||||
59
VISUALIZACION/node_modules/3d-force-graph/example/curved-links/index.html
generated
vendored
Executable file
59
VISUALIZACION/node_modules/3d-force-graph/example/curved-links/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,59 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
|
||||
<script>
|
||||
const gData = {
|
||||
nodes: [...Array(14).keys()].map(i => ({ id: i })),
|
||||
links: [
|
||||
{ source: 0, target: 1, curvature: 0, rotation: 0 },
|
||||
{ source: 0, target: 1, curvature: 0.8, rotation: 0 },
|
||||
{ source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 1 / 6 },
|
||||
{ source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 2 / 6 },
|
||||
{ source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 3 / 6 },
|
||||
{ source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 4 / 6 },
|
||||
{ source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 5 / 6 },
|
||||
{ source: 0, target: 1, curvature: 0.8, rotation: Math.PI },
|
||||
{ source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 7 / 6 },
|
||||
{ source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 8 / 6 },
|
||||
{ source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 9 / 6 },
|
||||
{ source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 10 / 6 },
|
||||
{ source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 11 / 6 },
|
||||
{ source: 2, target: 3, curvature: 0.4, rotation: 0 },
|
||||
{ source: 3, target: 2, curvature: 0.4, rotation: Math.PI / 2 },
|
||||
{ source: 2, target: 3, curvature: 0.4, rotation: Math.PI },
|
||||
{ source: 3, target: 2, curvature: 0.4, rotation: -Math.PI / 2 },
|
||||
{ source: 4, target: 4, curvature: 0.3, rotation: 0 },
|
||||
{ source: 4, target: 4, curvature: 0.3, rotation: Math.PI * 2 / 3 },
|
||||
{ source: 4, target: 4, curvature: 0.3, rotation: Math.PI * 4 / 3 },
|
||||
{ source: 5, target: 6, curvature: 0, rotation: 0 },
|
||||
{ source: 5, target: 5, curvature: 0.5, rotation: 0 },
|
||||
{ source: 6, target: 6, curvature: -0.5, rotation: 0 },
|
||||
{ source: 7, target: 8, curvature: 0.2, rotation: 0 },
|
||||
{ source: 8, target: 9, curvature: 0.5, rotation: 0 },
|
||||
{ source: 9, target: 10, curvature: 0.7, rotation: 0 },
|
||||
{ source: 10, target: 11, curvature: 1, rotation: 0 },
|
||||
{ source: 11, target: 12, curvature: 2, rotation: 0 },
|
||||
{ source: 12, target: 7, curvature: 4, rotation: 0 },
|
||||
{ source: 13, target: 13, curvature: 0.1, rotation: 0 },
|
||||
{ source: 13, target: 13, curvature: 0.2, rotation: 0 },
|
||||
{ source: 13, target: 13, curvature: 0.5, rotation: 0 },
|
||||
{ source: 13, target: 13, curvature: 0.7, rotation: 0 },
|
||||
{ source: 13, target: 13, curvature: 1, rotation: 0 }
|
||||
]
|
||||
};
|
||||
|
||||
const Graph = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.linkCurvature('curvature')
|
||||
.linkCurveRotation('rotation')
|
||||
.linkDirectionalParticles(2)
|
||||
.graphData(gData);
|
||||
</script>
|
||||
</body>
|
||||
46
VISUALIZACION/node_modules/3d-force-graph/example/custom-node-geometry/index.html
generated
vendored
Executable file
46
VISUALIZACION/node_modules/3d-force-graph/example/custom-node-geometry/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,46 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
|
||||
<script type="module">
|
||||
import * as THREE from '//unpkg.com/three/build/three.module.js';
|
||||
|
||||
// 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 = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.nodeThreeObject(({ id }) => new THREE.Mesh(
|
||||
[
|
||||
new THREE.BoxGeometry(Math.random() * 20, Math.random() * 20, Math.random() * 20),
|
||||
new THREE.ConeGeometry(Math.random() * 10, Math.random() * 20),
|
||||
new THREE.CylinderGeometry(Math.random() * 10, Math.random() * 10, Math.random() * 20),
|
||||
new THREE.DodecahedronGeometry(Math.random() * 10),
|
||||
new THREE.SphereGeometry(Math.random() * 10),
|
||||
new THREE.TorusGeometry(Math.random() * 10, Math.random() * 2),
|
||||
new THREE.TorusKnotGeometry(Math.random() * 10, Math.random() * 2)
|
||||
][id%7],
|
||||
new THREE.MeshLambertMaterial({
|
||||
color: Math.round(Math.random() * Math.pow(2, 24)),
|
||||
transparent: true,
|
||||
opacity: 0.75
|
||||
})
|
||||
))
|
||||
.graphData(gData);
|
||||
</script>
|
||||
</body>
|
||||
74
VISUALIZACION/node_modules/3d-force-graph/example/dag-yarn/index.html
generated
vendored
Executable file
74
VISUALIZACION/node_modules/3d-force-graph/example/dag-yarn/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,74 @@
|
|||
<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-octree"></script>
|
||||
<script src="//unpkg.com/d3-force-3d"></script>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script>
|
||||
<script type="module">
|
||||
import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
|
||||
|
||||
// controls
|
||||
const controls = { 'DAG Orientation': 'lr'};
|
||||
const gui = new dat.GUI();
|
||||
gui.add(controls, 'DAG Orientation', ['lr', 'td', 'zout', 'radialout', null])
|
||||
.onChange(orientation => graph && graph.dagMode(orientation));
|
||||
|
||||
// graph config
|
||||
const graph = ForceGraph3D()
|
||||
.backgroundColor('#101020')
|
||||
.linkColor(() => 'rgba(255, 255, 255, 0.6)')
|
||||
.dagMode('lr')
|
||||
.onDagError(() => false)
|
||||
.dagLevelDistance(180)
|
||||
.nodeId('package')
|
||||
.linkCurvature(0.07)
|
||||
.nodeThreeObject(node => {
|
||||
const sprite = new SpriteText(node.package);
|
||||
sprite.material.depthWrite = false;
|
||||
sprite.color = 'lightsteelblue';
|
||||
sprite.textHeight = 8;
|
||||
return sprite;
|
||||
})
|
||||
.d3Force('collide', d3.forceCollide(13))
|
||||
.d3AlphaDecay(0.02)
|
||||
.d3VelocityDecay(0.3);
|
||||
|
||||
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(([pkg, details]) => {
|
||||
nodes.push({
|
||||
package: pkg,
|
||||
version: details.version
|
||||
});
|
||||
|
||||
if (details.dependencies) {
|
||||
Object.entries(details.dependencies).forEach(([dep, version]) => {
|
||||
links.push({source: pkg, target: `${dep}@${version}`});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
graph(document.getElementById('graph'))
|
||||
.graphData({ nodes, links });
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
1
VISUALIZACION/node_modules/3d-force-graph/example/datasets/blocks.json
generated
vendored
Executable file
1
VISUALIZACION/node_modules/3d-force-graph/example/datasets/blocks.json
generated
vendored
Executable file
File diff suppressed because one or more lines are too long
464
VISUALIZACION/node_modules/3d-force-graph/example/datasets/d3-dependencies.csv
generated
vendored
Executable file
464
VISUALIZACION/node_modules/3d-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/3d-force-graph/example/datasets/miserables.json
generated
vendored
Executable file
337
VISUALIZACION/node_modules/3d-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}
|
||||
]
|
||||
}
|
||||
31
VISUALIZACION/node_modules/3d-force-graph/example/directional-links-arrows/index.html
generated
vendored
Executable file
31
VISUALIZACION/node_modules/3d-force-graph/example/directional-links-arrows/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,31 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-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 = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.graphData(gData)
|
||||
.linkDirectionalArrowLength(3.5)
|
||||
.linkDirectionalArrowRelPos(1)
|
||||
.linkCurvature(0.25);
|
||||
</script>
|
||||
</body>
|
||||
20
VISUALIZACION/node_modules/3d-force-graph/example/directional-links-particles/index.html
generated
vendored
Executable file
20
VISUALIZACION/node_modules/3d-force-graph/example/directional-links-particles/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,20 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
|
||||
<script>
|
||||
const Graph = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.jsonUrl('../datasets/miserables.json')
|
||||
.nodeLabel('id')
|
||||
.nodeAutoColorBy('group')
|
||||
.linkDirectionalParticles("value")
|
||||
.linkDirectionalParticleSpeed(d => d.value * 0.001);
|
||||
</script>
|
||||
</body>
|
||||
43
VISUALIZACION/node_modules/3d-force-graph/example/dynamic/index.html
generated
vendored
Executable file
43
VISUALIZACION/node_modules/3d-force-graph/example/dynamic/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,43 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
|
||||
<script>
|
||||
const initData = {
|
||||
nodes: [ {id: 0 } ],
|
||||
links: []
|
||||
};
|
||||
|
||||
const elem = document.getElementById("3d-graph");
|
||||
|
||||
const Graph = ForceGraph3D()(elem)
|
||||
.enableNodeDrag(false)
|
||||
.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/3d-force-graph/example/emit-particles/index.html
generated
vendored
Executable file
50
VISUALIZACION/node_modules/3d-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/3d-force-graph"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
<button id="emit-particles-btn">Emit 10 Random Particles</button>
|
||||
|
||||
<script>
|
||||
// Random tree
|
||||
const N = 50;
|
||||
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 = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.linkDirectionalParticleColor(() => 'red')
|
||||
.linkDirectionalParticleWidth(4)
|
||||
.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 = gData.links[Math.floor(Math.random() * gData.links.length)];
|
||||
Graph.emitParticle(link);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
65
VISUALIZACION/node_modules/3d-force-graph/example/expandable-nodes/index.html
generated
vendored
Executable file
65
VISUALIZACION/node_modules/3d-force-graph/example/expandable-nodes/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,65 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!-- <script src="../../dist/3d-force-graph.js"></script>-->
|
||||
|
||||
<style>
|
||||
.clickable { cursor: unset !important }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-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('3d-graph');
|
||||
const Graph = ForceGraph3D()(elem)
|
||||
.graphData(getPrunedTree())
|
||||
.linkDirectionalParticles(2)
|
||||
.nodeColor(node => !node.childLinks.length ? 'green' : node.collapsed ? 'red' : 'yellow')
|
||||
.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());
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
32
VISUALIZACION/node_modules/3d-force-graph/example/fit-to-canvas/index.html
generated
vendored
Executable file
32
VISUALIZACION/node_modules/3d-force-graph/example/fit-to-canvas/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,32 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!-- <script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-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 = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.cooldownTicks(100)
|
||||
.graphData(gData);
|
||||
|
||||
// fit to canvas when engine stops
|
||||
Graph.onEngineStop(() => Graph.zoomToFit(400));
|
||||
</script>
|
||||
</body>
|
||||
23
VISUALIZACION/node_modules/3d-force-graph/example/fix-dragged-nodes/index.html
generated
vendored
Executable file
23
VISUALIZACION/node_modules/3d-force-graph/example/fix-dragged-nodes/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,23 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
|
||||
<script>
|
||||
const Graph = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.jsonUrl('../datasets/miserables.json')
|
||||
.nodeLabel('id')
|
||||
.nodeAutoColorBy('group')
|
||||
.onNodeDragEnd(node => {
|
||||
node.fx = node.x;
|
||||
node.fy = node.y;
|
||||
node.fz = node.z;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
70
VISUALIZACION/node_modules/3d-force-graph/example/gradient-links/index.html
generated
vendored
Executable file
70
VISUALIZACION/node_modules/3d-force-graph/example/gradient-links/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,70 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/d3"></script>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
|
||||
<script type="module">
|
||||
import * as THREE from '//unpkg.com/three/build/three.module.js';
|
||||
|
||||
// Random tree
|
||||
const N = 25;
|
||||
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 nodeColorScale = d3.scaleOrdinal(d3.schemeRdYlGn[4]);
|
||||
|
||||
const Graph = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.nodeColor(node => nodeColorScale(node.id))
|
||||
.linkThreeObject(link => {
|
||||
// 2 (nodes) x 3 (r+g+b) bytes between [0, 1]
|
||||
// For example:
|
||||
// new Float32Array([
|
||||
// 1, 0, 0, // source node: red
|
||||
// 0, 1, 0 // target node: green
|
||||
// ]);
|
||||
const colors = new Float32Array([].concat(
|
||||
...[link.source, link.target]
|
||||
.map(nodeColorScale)
|
||||
.map(d3.color)
|
||||
.map(({ r, g, b }) => [r, g, b].map(v => v / 255)
|
||||
)));
|
||||
|
||||
const material = new THREE.LineBasicMaterial({ vertexColors: true });
|
||||
const geometry = new THREE.BufferGeometry();
|
||||
geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(2 * 3), 3));
|
||||
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
|
||||
|
||||
return new THREE.Line(geometry, material);
|
||||
})
|
||||
.linkPositionUpdate((line, { start, end }) => {
|
||||
const startR = Graph.nodeRelSize();
|
||||
const endR = Graph.nodeRelSize();
|
||||
const lineLen = Math.sqrt(['x', 'y', 'z'].map(dim => Math.pow((end[dim] || 0) - (start[dim] || 0), 2)).reduce((acc, v) => acc + v, 0));
|
||||
|
||||
const linePos = line.geometry.getAttribute('position');
|
||||
|
||||
// calculate coordinate on the node's surface instead of center
|
||||
linePos.set([startR / lineLen, 1 - endR / lineLen].map(t =>
|
||||
['x', 'y', 'z'].map(dim => start[dim] + (end[dim] - start[dim]) * t)
|
||||
).flat());
|
||||
linePos.needsUpdate = true;
|
||||
return true;
|
||||
})
|
||||
.graphData(gData);
|
||||
</script>
|
||||
</body>
|
||||
87
VISUALIZACION/node_modules/3d-force-graph/example/highlight/index.html
generated
vendored
Executable file
87
VISUALIZACION/node_modules/3d-force-graph/example/highlight/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,87 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-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 highlightNodes = new Set();
|
||||
const highlightLinks = new Set();
|
||||
let hoverNode = null;
|
||||
|
||||
const Graph = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.graphData(gData)
|
||||
.nodeColor(node => highlightNodes.has(node) ? node === hoverNode ? 'rgb(255,0,0,1)' : 'rgba(255,160,0,0.8)' : 'rgba(0,255,255,0.6)')
|
||||
.linkWidth(link => highlightLinks.has(link) ? 4 : 1)
|
||||
.linkDirectionalParticles(link => highlightLinks.has(link) ? 4 : 0)
|
||||
.linkDirectionalParticleWidth(4)
|
||||
.onNodeHover(node => {
|
||||
// no state change
|
||||
if ((!node && !highlightNodes.size) || (node && hoverNode === node)) return;
|
||||
|
||||
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;
|
||||
|
||||
updateHighlight();
|
||||
})
|
||||
.onLinkHover(link => {
|
||||
highlightNodes.clear();
|
||||
highlightLinks.clear();
|
||||
|
||||
if (link) {
|
||||
highlightLinks.add(link);
|
||||
highlightNodes.add(link.source);
|
||||
highlightNodes.add(link.target);
|
||||
}
|
||||
|
||||
updateHighlight();
|
||||
});
|
||||
|
||||
function updateHighlight() {
|
||||
// trigger update of highlighted objects in scene
|
||||
Graph
|
||||
.nodeColor(Graph.nodeColor())
|
||||
.linkWidth(Graph.linkWidth())
|
||||
.linkDirectionalParticles(Graph.linkDirectionalParticles());
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
41
VISUALIZACION/node_modules/3d-force-graph/example/html-nodes/index.html
generated
vendored
Executable file
41
VISUALIZACION/node_modules/3d-force-graph/example/html-nodes/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,41 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!-- <script src="../../dist/3d-force-graph.js"></script>-->
|
||||
|
||||
<style>
|
||||
.node-label {
|
||||
font-size: 12px;
|
||||
padding: 1px 4px;
|
||||
border-radius: 4px;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
|
||||
<script type="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js" }}</script>
|
||||
<script type="module">
|
||||
import { CSS2DRenderer, CSS2DObject } from '//unpkg.com/three/examples/jsm/renderers/CSS2DRenderer.js';
|
||||
|
||||
const Graph = ForceGraph3D({
|
||||
extraRenderers: [new CSS2DRenderer()]
|
||||
})
|
||||
(document.getElementById('3d-graph'))
|
||||
.jsonUrl('../datasets/miserables.json')
|
||||
.nodeAutoColorBy('group')
|
||||
.nodeThreeObject(node => {
|
||||
const nodeEl = document.createElement('div');
|
||||
nodeEl.textContent = node.id;
|
||||
nodeEl.style.color = node.color;
|
||||
nodeEl.className = 'node-label';
|
||||
return new CSS2DObject(nodeEl);
|
||||
})
|
||||
.nodeThreeObjectExtend(true)
|
||||
;
|
||||
</script>
|
||||
</body>
|
||||
BIN
VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/cat.jpg
generated
vendored
Executable file
BIN
VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/cat.jpg
generated
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/dog.jpg
generated
vendored
Executable file
BIN
VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/dog.jpg
generated
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/eagle.jpg
generated
vendored
Executable file
BIN
VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/eagle.jpg
generated
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/elephant.jpg
generated
vendored
Executable file
BIN
VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/elephant.jpg
generated
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/grasshopper.jpg
generated
vendored
Executable file
BIN
VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/grasshopper.jpg
generated
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/octopus.jpg
generated
vendored
Executable file
BIN
VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/octopus.jpg
generated
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/owl.jpg
generated
vendored
Executable file
BIN
VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/owl.jpg
generated
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/panda.jpg
generated
vendored
Executable file
BIN
VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/panda.jpg
generated
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/squirrel.jpg
generated
vendored
Executable file
BIN
VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/squirrel.jpg
generated
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/tiger.jpg
generated
vendored
Executable file
BIN
VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/tiger.jpg
generated
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/whale.jpg
generated
vendored
Executable file
BIN
VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/whale.jpg
generated
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 179 KiB |
39
VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/index.html
generated
vendored
Executable file
39
VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,39 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
|
||||
<script type="module">
|
||||
import * as THREE from '//unpkg.com/three/build/three.module.js';
|
||||
|
||||
const imgs = ['cat.jpg', 'dog.jpg', 'eagle.jpg', 'elephant.jpg', 'grasshopper.jpg', 'octopus.jpg', 'owl.jpg', 'panda.jpg', 'squirrel.jpg', 'tiger.jpg', 'whale.jpg'];
|
||||
|
||||
// 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 = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.nodeThreeObject(({ img }) => {
|
||||
const imgTexture = new THREE.TextureLoader().load(`./imgs/${img}`);
|
||||
imgTexture.colorSpace = THREE.SRGBColorSpace;
|
||||
const material = new THREE.SpriteMaterial({ map: imgTexture });
|
||||
const sprite = new THREE.Sprite(material);
|
||||
sprite.scale.set(12, 12);
|
||||
return sprite;
|
||||
})
|
||||
.graphData(gData);
|
||||
</script>
|
||||
</body>
|
||||
21
VISUALIZACION/node_modules/3d-force-graph/example/large-graph/index.html
generated
vendored
Executable file
21
VISUALIZACION/node_modules/3d-force-graph/example/large-graph/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,21 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!-- <script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="3d-graph"></div>
|
||||
|
||||
<script>
|
||||
const elem = document.getElementById('3d-graph');
|
||||
|
||||
const Graph = ForceGraph3D()(elem)
|
||||
.jsonUrl('../datasets/blocks.json')
|
||||
.nodeAutoColorBy('user')
|
||||
.nodeLabel(node => `${node.user}: ${node.description}`)
|
||||
.onNodeClick(node => window.open(`https://bl.ocks.org/${node.user}/${node.id}`, '_blank'));
|
||||
</script>
|
||||
</body>
|
||||
57
VISUALIZACION/node_modules/3d-force-graph/example/manipulate-link-force/index.html
generated
vendored
Executable file
57
VISUALIZACION/node_modules/3d-force-graph/example/manipulate-link-force/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,57 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/dat.gui"></script>
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!-- <script src="../../dist/3d-force-graph.js"></script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
|
||||
<script>
|
||||
// Create 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)),
|
||||
color: id % 2
|
||||
}))
|
||||
};
|
||||
|
||||
const graph = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.nodeLabel(node => node.id)
|
||||
.linkColor(link => link.color ? 'red' : 'green' )
|
||||
.linkOpacity(1)
|
||||
.graphData(gData);
|
||||
|
||||
const linkForce = graph
|
||||
.d3Force('link')
|
||||
.distance(link => link.color ? settings.redDistance : settings.greenDistance);
|
||||
|
||||
//Define GUI
|
||||
const Settings = function() {
|
||||
this.redDistance = 20;
|
||||
this.greenDistance = 20;
|
||||
};
|
||||
|
||||
const settings = new Settings();
|
||||
const gui = new dat.GUI();
|
||||
|
||||
const controllerOne = gui.add(settings, 'redDistance', 0, 100);
|
||||
const controllerTwo = gui.add(settings, 'greenDistance', 0, 100);
|
||||
|
||||
controllerOne.onChange(updateLinkDistance);
|
||||
controllerTwo.onChange(updateLinkDistance);
|
||||
|
||||
function updateLinkDistance() {
|
||||
linkForce.distance(link => link.color ? settings.redDistance : settings.greenDistance);
|
||||
graph.numDimensions(3); // Re-heat simulation
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
57
VISUALIZACION/node_modules/3d-force-graph/example/multi-selection/index.html
generated
vendored
Executable file
57
VISUALIZACION/node_modules/3d-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/3d-force-graph"></script>
|
||||
<!-- <script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-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))
|
||||
}))
|
||||
};
|
||||
|
||||
let selectedNodes = new Set();
|
||||
|
||||
const Graph = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.graphData(gData)
|
||||
.nodeRelSize(9)
|
||||
.nodeColor(node => selectedNodes.has(node) ? 'yellow' : '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', 'z'].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', 'z'].forEach(coord => node[`f${coord}`] = undefined)); // unfix controlled nodes
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
67
VISUALIZACION/node_modules/3d-force-graph/example/pause-resume/index.html
generated
vendored
Executable file
67
VISUALIZACION/node_modules/3d-force-graph/example/pause-resume/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,67 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
|
||||
<div style="position: absolute; top: 5px; right: 5px;">
|
||||
<button id="animationToggle" style="margin: 8px; height: 25px; width: 150px;">
|
||||
Pause Animation
|
||||
</button>
|
||||
<button id="rotationToggle" style="margin: 8px; height: 25px; width: 150px;">
|
||||
Pause Rotation
|
||||
</button>
|
||||
</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 distance = 1400;
|
||||
|
||||
let isRotationActive = true;
|
||||
const Graph = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.enableNodeDrag(false)
|
||||
.enableNavigationControls(false)
|
||||
.showNavInfo(false)
|
||||
.cameraPosition({ z: distance })
|
||||
.graphData(gData);
|
||||
// camera orbit
|
||||
let angle = 0;
|
||||
setInterval(() => {
|
||||
if (isRotationActive) {
|
||||
Graph.cameraPosition({
|
||||
x: distance * Math.sin(angle),
|
||||
z: distance * Math.cos(angle)
|
||||
});
|
||||
angle += Math.PI / 300;
|
||||
}
|
||||
}, 10);
|
||||
|
||||
document.getElementById('rotationToggle').addEventListener('click', event => {
|
||||
isRotationActive = !isRotationActive;
|
||||
event.target.innerHTML = `${(isRotationActive ? 'Pause' : 'Resume')} Rotation`;
|
||||
});
|
||||
|
||||
let isAnimationActive = true;
|
||||
document.getElementById('animationToggle').addEventListener('click', event => {
|
||||
isAnimationActive ? Graph.pauseAnimation() : Graph.resumeAnimation();
|
||||
|
||||
isAnimationActive = !isAnimationActive;
|
||||
event.target.innerHTML = `${(isAnimationActive ? 'Pause' : 'Resume')} Animation`;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
BIN
VISUALIZACION/node_modules/3d-force-graph/example/preview.png
generated
vendored
Executable file
BIN
VISUALIZACION/node_modules/3d-force-graph/example/preview.png
generated
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 194 KiB |
36
VISUALIZACION/node_modules/3d-force-graph/example/responsive/index.html
generated
vendored
Executable file
36
VISUALIZACION/node_modules/3d-force-graph/example/responsive/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,36 @@
|
|||
<head>
|
||||
<style> body { margin: 30px; } </style>
|
||||
|
||||
<script src="//unpkg.com/element-resize-detector/dist/element-resize-detector.min.js"></script>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!-- <script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-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 = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.height(window.innerHeight - 60)
|
||||
.graphData(gData);
|
||||
|
||||
elementResizeDetectorMaker().listenTo(
|
||||
document.getElementById('3d-graph'),
|
||||
el => Graph.width(el.offsetWidth)
|
||||
);
|
||||
</script>
|
||||
</body>
|
||||
38
VISUALIZACION/node_modules/3d-force-graph/example/scene/index.html
generated
vendored
Executable file
38
VISUALIZACION/node_modules/3d-force-graph/example/scene/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,38 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!-- <script src="../../dist/3d-force-graph.js"></script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
|
||||
<script type="module">
|
||||
import * as THREE from '//unpkg.com/three/build/three.module.js';
|
||||
|
||||
// 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))
|
||||
}))
|
||||
};
|
||||
|
||||
const graph = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.graphData(gData);
|
||||
|
||||
const planeGeometry = new THREE.PlaneGeometry(1000, 1000, 1, 1);
|
||||
const planeMaterial = new THREE.MeshLambertMaterial({color: 0xFF0000, side: THREE.DoubleSide});
|
||||
const mesh = new THREE.Mesh(planeGeometry, planeMaterial);
|
||||
mesh.position.set(-100, -200, -100);
|
||||
mesh.rotation.set(0.5 * Math.PI, 0, 0);
|
||||
|
||||
graph.scene().add(mesh);
|
||||
</script>
|
||||
</body>
|
||||
41
VISUALIZACION/node_modules/3d-force-graph/example/text-links/index.html
generated
vendored
Executable file
41
VISUALIZACION/node_modules/3d-force-graph/example/text-links/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,41 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
|
||||
<script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script>
|
||||
<script type="module">
|
||||
import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
|
||||
|
||||
const Graph = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.jsonUrl('../datasets/miserables.json')
|
||||
.nodeLabel('id')
|
||||
.nodeAutoColorBy('group')
|
||||
.linkThreeObjectExtend(true)
|
||||
.linkThreeObject(link => {
|
||||
// extend link with text sprite
|
||||
const sprite = new SpriteText(`${link.source} > ${link.target}`);
|
||||
sprite.color = 'lightgrey';
|
||||
sprite.textHeight = 1.5;
|
||||
return sprite;
|
||||
})
|
||||
.linkPositionUpdate((sprite, { start, end }) => {
|
||||
const middlePos = Object.assign(...['x', 'y', 'z'].map(c => ({
|
||||
[c]: start[c] + (end[c] - start[c]) / 2 // calc middle point
|
||||
})));
|
||||
|
||||
// Position sprite
|
||||
Object.assign(sprite.position, middlePos);
|
||||
});
|
||||
|
||||
// Spread nodes a little wider
|
||||
Graph.d3Force('charge').strength(-120);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
31
VISUALIZACION/node_modules/3d-force-graph/example/text-nodes/index.html
generated
vendored
Executable file
31
VISUALIZACION/node_modules/3d-force-graph/example/text-nodes/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,31 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
|
||||
<script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script>
|
||||
<script type="module">
|
||||
import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
|
||||
|
||||
const Graph = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.jsonUrl('../datasets/miserables.json')
|
||||
.nodeAutoColorBy('group')
|
||||
.nodeThreeObject(node => {
|
||||
const sprite = new SpriteText(node.id);
|
||||
sprite.material.depthWrite = false; // make sprite background transparent
|
||||
sprite.color = node.color;
|
||||
sprite.textHeight = 8;
|
||||
return sprite;
|
||||
});
|
||||
|
||||
// Spread nodes a little wider
|
||||
Graph.d3Force('charge').strength(-120);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
76
VISUALIZACION/node_modules/3d-force-graph/example/tree/index.html
generated
vendored
Executable file
76
VISUALIZACION/node_modules/3d-force-graph/example/tree/index.html
generated
vendored
Executable file
|
|
@ -0,0 +1,76 @@
|
|||
<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-octree"></script>
|
||||
<script src="//unpkg.com/d3-force-3d"></script>
|
||||
|
||||
<script src="//unpkg.com/3d-force-graph"></script>
|
||||
<!--<script src="../../dist/3d-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', 'zout', 'zin', 'radialout', 'radialin', null])
|
||||
.onChange(orientation => graph && graph.dagMode(orientation));
|
||||
|
||||
// graph config
|
||||
const NODE_REL_SIZE = 1;
|
||||
const graph = ForceGraph3D()
|
||||
.dagMode('td')
|
||||
.dagLevelDistance(200)
|
||||
.backgroundColor('#101020')
|
||||
.linkColor(() => 'rgba(255,255,255,0.2)')
|
||||
.nodeRelSize(NODE_REL_SIZE)
|
||||
.nodeId('path')
|
||||
.nodeVal('size')
|
||||
.nodeLabel('path')
|
||||
.nodeAutoColorBy('module')
|
||||
.nodeOpacity(0.9)
|
||||
.linkDirectionalParticles(2)
|
||||
.linkDirectionalParticleWidth(0.8)
|
||||
.linkDirectionalParticleSpeed(0.006)
|
||||
.d3Force('collision', d3.forceCollide(node => Math.cbrt(node.size) * NODE_REL_SIZE))
|
||||
.d3VelocityDecay(0.3);
|
||||
|
||||
// Decrease repel intensity
|
||||
graph.d3Force('charge').strength(-15);
|
||||
|
||||
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>
|
||||
72
VISUALIZACION/node_modules/3d-force-graph/package.json
generated
vendored
Executable file
72
VISUALIZACION/node_modules/3d-force-graph/package.json
generated
vendored
Executable file
|
|
@ -0,0 +1,72 @@
|
|||
{
|
||||
"name": "3d-force-graph",
|
||||
"version": "1.73.3",
|
||||
"description": "UI component for a 3D force-directed graph using ThreeJS and d3-force-3d layout engine",
|
||||
"type": "module",
|
||||
"unpkg": "dist/3d-force-graph.min.js",
|
||||
"main": "dist/3d-force-graph.mjs",
|
||||
"module": "dist/3d-force-graph.mjs",
|
||||
"types": "dist/3d-force-graph.d.ts",
|
||||
"exports": {
|
||||
"types": "./dist/3d-force-graph.d.ts",
|
||||
"umd": "./dist/3d-force-graph.min.js",
|
||||
"default": "./dist/3d-force-graph.mjs"
|
||||
},
|
||||
"sideEffects": [
|
||||
"./src/*.css"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/vasturiano/3d-force-graph.git"
|
||||
},
|
||||
"homepage": "https://github.com/vasturiano/3d-force-graph",
|
||||
"keywords": [
|
||||
"3d",
|
||||
"force",
|
||||
"graph",
|
||||
"three",
|
||||
"ngraph",
|
||||
"webgl"
|
||||
],
|
||||
"author": {
|
||||
"name": "Vasco Asturiano",
|
||||
"url": "https://github.com/vasturiano"
|
||||
},
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/vasturiano/3d-force-graph/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "rimraf dist && rollup -c",
|
||||
"dev": "rollup -w -c rollup.config.dev.js",
|
||||
"prepare": "npm run build"
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"example/**/*"
|
||||
],
|
||||
"dependencies": {
|
||||
"accessor-fn": "1",
|
||||
"kapsule": "1",
|
||||
"three": ">=0.118 <1",
|
||||
"three-forcegraph": "1",
|
||||
"three-render-objects": "^1.29"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.24.3",
|
||||
"@babel/preset-env": "^7.24.3",
|
||||
"@rollup/plugin-babel": "^6.0.4",
|
||||
"@rollup/plugin-commonjs": "^25.0.7",
|
||||
"@rollup/plugin-node-resolve": "^15.2.3",
|
||||
"@rollup/plugin-terser": "^0.4.4",
|
||||
"postcss": "^8.4.38",
|
||||
"rimraf": "^5.0.5",
|
||||
"rollup": "^4.13.1",
|
||||
"rollup-plugin-dts": "^6.1.0",
|
||||
"rollup-plugin-postcss": "^4.0.2",
|
||||
"typescript": "^5.4.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
}
|
||||
22
VISUALIZACION/node_modules/@babel/runtime/LICENSE
generated
vendored
Executable file
22
VISUALIZACION/node_modules/@babel/runtime/LICENSE
generated
vendored
Executable file
|
|
@ -0,0 +1,22 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2014-present Sebastian McKenzie and other contributors
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
"Software"), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
19
VISUALIZACION/node_modules/@babel/runtime/README.md
generated
vendored
Executable file
19
VISUALIZACION/node_modules/@babel/runtime/README.md
generated
vendored
Executable file
|
|
@ -0,0 +1,19 @@
|
|||
# @babel/runtime
|
||||
|
||||
> babel's modular runtime helpers
|
||||
|
||||
See our website [@babel/runtime](https://babeljs.io/docs/babel-runtime) for more information.
|
||||
|
||||
## Install
|
||||
|
||||
Using npm:
|
||||
|
||||
```sh
|
||||
npm install --save @babel/runtime
|
||||
```
|
||||
|
||||
or using yarn:
|
||||
|
||||
```sh
|
||||
yarn add @babel/runtime
|
||||
```
|
||||
4
VISUALIZACION/node_modules/@babel/runtime/helpers/AwaitValue.js
generated
vendored
Executable file
4
VISUALIZACION/node_modules/@babel/runtime/helpers/AwaitValue.js
generated
vendored
Executable file
|
|
@ -0,0 +1,4 @@
|
|||
function _AwaitValue(t) {
|
||||
this.wrapped = t;
|
||||
}
|
||||
module.exports = _AwaitValue, module.exports.__esModule = true, module.exports["default"] = module.exports;
|
||||
4
VISUALIZACION/node_modules/@babel/runtime/helpers/OverloadYield.js
generated
vendored
Executable file
4
VISUALIZACION/node_modules/@babel/runtime/helpers/OverloadYield.js
generated
vendored
Executable file
|
|
@ -0,0 +1,4 @@
|
|||
function _OverloadYield(e, d) {
|
||||
this.v = e, this.k = d;
|
||||
}
|
||||
module.exports = _OverloadYield, module.exports.__esModule = true, module.exports["default"] = module.exports;
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue