Comments (6)
frewsxcv
commented on August 10, 2024
Just tried this out. It looks like 1M nodes + 1M edges results in just
under 1 FPS for me. 100K nodes + 100K edges gets something more like 20
FPS for me. I unfortunately have spent little time on optimizations for
Graphosaurus, so there's probably tons of room for improvement. Let me
know if you have any other questions!
On Fri, May 13, 2016, at 08:37 PM, Paul Shannon wrote:
Intrigued to discover this project. Before diving in, may I ask if
Graphosaurus supports very large networks, with > 10^6 nodes?
Thanks!
- Paul
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub[1]
Links:
from graphosaurus.
paul-shannon
commented on August 10, 2024
Thanks, Corey. Could I trouble you to post your code, perhaps as a gist?
- Paul
from graphosaurus.
frewsxcv
commented on August 10, 2024
<html>
<head>
<meta charset="UTF-8">
<style>
#frame {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
}
</style>
</head>
<body>
<div id="frame"></div>
<script src="../../dist/graphosaurus.js"></script>
<script>
var nodes = [];
graph = G.graph({
nodeImage: "../_common/disc.png",
nodeImageTransparent: true,
antialias: true,
bgColor: 0xEEEEEE,
edgeWidth: 4,
nodeSize: 18,
});
for (var i = 0; i < 100000; i++) {
var node = G.node(randomPosition(), {color: 0x444444});
if (nodes.length > 0) {
var randomIndex = Math.floor(Math.random() * nodes.length);
var otherNode = nodes[randomIndex];
G.edge([node, otherNode], {color: 0x222222}).addTo(graph);
}
nodes.push(node);
node.addTo(graph);
}
graph.renderIn('frame');
function randomPosition() {
return [Math.random(), Math.random(), Math.random()];
}
</script>
</body>
</html>from graphosaurus.
paul-shannon
commented on August 10, 2024
Very nice., thank you. This is some lovely capability you have created.
After running a few examples I am now experimenting with trees, with the goal of rendering phylogenetic relationships in the microbiome. Two questions arose quickly for me:
- How do I gain access to three.js scene, camera etc. through the nice abstractions you provide?
- How to render nodes so that their size scales with the zoom applied to the canvas? At present (see two images pasted in) the nodes keep their absolute screen size at all zoom levels.
from graphosaurus.
frewsxcv
commented on August 10, 2024
Wow, I must have missed this last comment. Sorry for the very late reply!
- How do I gain access to three.js scene, camera etc. through the nice abstractions you provide?
var frame = graph.renderIn("#some-id");
console.log(frame.scene);
console.log(frame.camera);
console.log(frame.renderer);
More info in frame.js.
- How to render nodes so that their size scales with the zoom applied to the canvas?
I think you want Graph({sizeAttenuation: true})
Line 14 in bbebeb8
from graphosaurus.
paul-shannon
commented on August 10, 2024
Thanks, Cory! Your answers are very encouraging -- if a little delayed :} I will get back to my experimenting soon.
- Paul
from graphosaurus.
Related Issues (20)
- Dynamically generate/update near/far camera values HOT 1
- Fix bug with setter on TrackballControls
- Stop manually including TrackballControls HOT 1
- Z-Fighting issue ever since #55
- Add support for voronoi
- Error with several edges HOT 4
- change node position, adding edges dynamically HOT 3
- Ability in to remove Nodes/Edges from Graphs HOT 1
- Animations and front-end interface HOT 2
- events? HOT 3
- Possibility of bulk data insertion (or wholesale data replacement?) HOT 3
- Nodes/edges not fully deleted and leaking into memory? HOT 2
- Add 'mouseleave' event for nodes
- Allow nodes/edges to have arbitrary data associated with them HOT 2
- Ability to add events AFTER the graph object was initialized? HOT 2
- Stop successive edges from linking up HOT 3
- Graphs getting rendered differently when using THREE.Line and THREE.LineSegments HOT 1
- Node images aren't loading in example HOT 1
- Incorrect logic related to hover/click events
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from graphosaurus.