6 ms·

How to build a graph visualization engine

87 points by taubek 4y ago

fnordpiglet 4y ago
dot
erwinh 4y ago
Recently a new web-based fully gpu driven graph visualisation engine was released and it could handle quite some big graphs directly in the browser: https://twitter.com/hoogerwoord/status/1568188361503907840?s=46&t=Z2BaNcEjbXmlcpF2oYZHiA https://twitter.com/hoogerwoord/status/1568188361503907840?s... Happy that people are building new graph visualisation engines and I think still a very open space for innovation in interactively exploring graph/network structures.
- mbuda 4y ago
  https://github.com/cosmograph-org/cosmos https://github.com/cosmograph-org/cosmos seems super nice! Yep, it's amazing to see better and better tooling around!
- kasupe 4y ago
  Wow! Looks nice :) Thanks for sharing
- cizl 4y ago
  Cosmos really looks amazing when it comes to performace. Besides visual rendering on the GPU, they also do the graph layout simulation calculations on the GPU as well, which is a first. SigmaJS for example uses graphology for the calculations, and WebGL for rendering. Cosmos is a really new lib, so when we did our initial research it wasn't even out yet. You can read more about our research over here: https://memgraph.com/blog/you-want-a-fast-easy-to-use-and-popular-graph-visualization-tool https://memgraph.com/blog/you-want-a-fast-easy-to-use-and-po... From what we've understood, it's somewhat limited when it comes to graph styling. But an amazing technology nontheless.
  - xtracto 4y ago
    I'm currently using vis-network [1] as the graph display for a Fraud analysis UI. Cosmos looked really good when I checked it but as you very well mention it wasn't able to style vertices with different images/icons and not sure if it was able to style edges color and width. All of this is heavily used in my use case. Hopefully it gets these features as it matures [1] https://github.com/visjs/vis-network https://github.com/visjs/vis-network
    - justtoni 4y ago
      vis-network is a great library. We actually started with it because we liked the API, the styling capabilities, easy to use event handlers. But we experienced performance issues when we wanted to simulate and render larger graphs because it was done in the main thread, the whole UI was blocked by it. We tried to fix it in vis, but simulation was using DOM so it was super hard to split simulation and renderer. Actually that was the main reason (along with the note that main authors are not contributing to visjs any more [1]) for a creation of the Orb where we fixed the blocking UI issue with graph simulation. Orb engine has two parts now: * Simulator that doesn't depend on the DOM so we can move its heavy calculation to the web worker - we use d3-force for it [2] * Renderer is pretty much influenced by vis-network, using similar style mechanism and canvas drawing capabilities (we credited vis-network in our code for those sections) [1] https://github.com/almende/vis/issues/4259#issue-412107497 https://github.com/almende/vis/issues/4259#issue-412107497 [2] https://github.com/d3/d3-force https://github.com/d3/d3-force
- twoWhlsGud 4y ago
  Interesting license choice - Creative Commons Attribution-NonCommercial.
  - erwinh 4y ago
    Yeah I respect the choice although would have liked to see a different license.
- nextaccountic 4y ago
  Is it open source? Or does it have a website? The tweet wasn't clear
throwaway202209 4y ago
Firefox 104.0 64bit Linux, page doesn't complete loading. When viewed through archive.org page takes >30 seconds to display any content other than menu's, orange back ground, and "are you having problems?" chat prompt. Guess I'll have to work out how to build my own graph visualization engine :)
- avmich 4y ago
  Yes, I too couldn't pass through all the page requirements.
  - taubek 4y ago
    I managed to load it right now. But as someone said, archive.org is also an option. https://web.archive.org/web/20220916170642/https://memgraph.com/blog/how-to-build-a-graph-visualization-engine-and-why-you-shouldnt https://web.archive.org/web/20220916170642/https://memgraph....
- chaps 4y ago
  Heh same, with noscript blocking 14 unknown domains, where unblocking the main domain doesn't fix it. No way in hell am I going to trust a company on any technical matter when they have to cobble their own product together through that many external services and trackers.
stuntkite 4y ago
I was an early employee at the first round of graphistry.com. I'm really proud of Leo and that he took it from the brink and put it back on the market and is growing it. I think more people should build more graph visualization engines, but you're going to have a hard time competing with how slick pygraphistry is, but there is not enough alternatives that are worth a shit. Graphistry, when I left was able to do half a billion nodes (my memory might be fuzzy, could have been 250,000 but I think we ran tests and got 500k) all memory resident in the browser. Our goal was a billion. I'm not sure what it can do now but it has UMAP and some other very fancy features. Here's a stupid unmaintained thing I made that got me the job at Graphistry. I did not build the graph vis engine, but I did write the procedural color stuff. It's ugly and terrible. Lol. I'm gonna release something some time soon that is a rework on that idea. https://github.com/millerhooks/graphterm https://github.com/millerhooks/graphterm
- mbuda 4y ago
  Graphistry is really cool but the point here is not to compete on the visualization side, we needed a tool that scales for a few of our use-cases (mostly as a highly configurable graph visualizes) + a library that can easily be extended :D
  - stuntkite 4y ago
    Heh. You and me both. When I worked there something I really wanted to get to was GIS integration and abstraction with graph. They are doing some really, really cool stuff and I think their future offerings will be things to take note of, but it's a service too and it's not open source. If you find a solution to what you're talking about, I'm interested. Let me know. Also, I talk to Leo. If you have specific requests that you want to list, I'll make sure he reads this thread.
    - taubek 4y ago
      What kind of integration with GIS where you considering? What did you want to accomplish?
traceroute66 4y ago
I do hate spam-blogs. Bait and switch blog posts (i.e that start potentially interesting and then half-way morph into a poorly disguised sales pitch) are so tiresome.
- mbuda 4y ago
  Check out the Github repo https://github.com/memgraph/orb https://github.com/memgraph/orb, it's Apache-2, with a lot of thinking around the software design :D
  - stuntkite 4y ago
    This looks pretty clunky. Is this what Neo4j uses in their viewer? It feels like it's related.
    - taubek 4y ago
      No, Neo4j doesn't use Orb. Orb was released just recently.
    - mbuda 4y ago
      It's not, it's also based on d3 (like Neo4j viewer I think), but build from from 0
      - stuntkite 4y ago
        The code giving a "lot of thought to software design" must be pretty good, because this looks like Java Graybeard garbage to me. Yeah, that's a caustic statement. I'm not trying to say that people who made it didn't do a good job, but the display is just.... Not good enough. They need to find a team member to help them get out of 20 years ago with this stuff. If anyone that is working on this reads this. That's my thought. I am not taking shots at your work. It does look well organized, but I cannot see a reason I would choose this.
        justtoni 4y ago
mkaic 4y ago
> Building something from scratch is rarely a good idea. In the context of this article, I agree. Professional products should probably not try to build everything from scratch. But I do think it's important to acknowledge that building things from scratch as personal projects is one of the absolute best ways to gain a deep understanding of a topic. Even if you go on to use graph visualization engines built by others in all your future work, that doesn't mean you shouldn't give it a go on your own time if you're interested in trying it out. Not trying to be contrarian or criticize the article, just my 2 cents. In general I agree with the sentiment of using existing solutions wherever possible.
- mbuda 4y ago
  Yep, the history here is that we tried out a couple of standalone tools with the appropriate license (e.g., VisJS, which is a great library), but nothing was suitable after some point, and then the best thing was to build. You learn more + we put it open source + we can integrate some other, maybe more scalable visualization engines in the future :D
- stuntkite 4y ago
  It depends on how you value your time and effort. Not every idea should be valued by its market fit. I don't think people should write code they are uninterested in writing. That's my litmus test for myself. Usually when I'm really, really interested the thing I'm aiming at doing initially isn't even about what I'm really trying to solve. It's picking away at the cruft over something and then I can see what's on the other side. Don't write things from scratch if you absolutely hate it and you are only doing it because you think the market will buy it and you wanna be a big biz, unless you feel like it. I don't know, YMMV. Programming is stupid and I plan to be a pig farmer as soon as possible.
  - dtomicevic 4y ago
    haha well, while running a pig farm is also a difficult business, there are some interesting challenges you can tackle :D also you could write software to manage some aspects of your pig farm
Noumenon72 4y ago
"And why you shouldn't" doesn't deserve equal billing in the headline. The article structure is * first two sentences: You shouldn't build from scratch * next four sentences: How not building from scratch failed for us * entire rest of article: How we built from scratch and made an amazing product you should try. I guess the implication is "you shouldn't build an engine because we just built the engine to end all engines"?
- dtomicevic 4y ago
  something like that, I think we still agree it's an amazing product and now there is really no reason to rebuild it from scratch, at least for a while...
- justtoni 4y ago
  Great destruct of the existing title to get to the better title! Even though "end all engines" might not be 100% correct, because the initial idea of the Orb is to make a single interface where the background (simulation and rendering engine) can be changed. To add to your title, "you shouldn't build an engine because we just built the engine to unify all engines". :)
- dang 4y ago
  Ok, we've dropped that bit from the title above. It's kind of baity anyhow.
kasupe 4y ago
If it’s at least a bit easier to use than D3.js, I like it :’) Seems like a really cool project.
- vpavicic 4y ago
  I tried it a bit and it does seem easier and it renders way faster
  - kasupe 4y ago
    I see that it draws on canvas, and I used to draw on svg. This is awesome!
    - justtoni 4y ago
      SVG excels at drawing a small number of large elements, where it sometimes performs even better than the HTML5 Canvas or WebGL.
- justtoni 4y ago
  D3 is a great product. We really like using it. D3 has a great integration with svg rendering, but we needed a canvas rendering which resulted in a merge of vis.js (guys did a great job on canvas rendering) and D3 (just the simulator: d3-force).
politician 4y ago
This is open source?! It looks far more approachable than ReGraph.
- kasupe 4y ago
  Yep :)
- deleted 4y ago
  [deleted]
- dtomicevic 4y ago
  Yep, Apache 2.0 https://github.com/memgraph/orb https://github.com/memgraph/orb
- deleted 4y ago
  [deleted]
deleted 4y ago
[deleted]
kez_z 4y ago
I recently tried graph visualization and it was a mess. Might check this out, anything to make it easier.
graphviz 4y ago
Good discussion. It may help to separate the different threads. Business models that support network visualization: mostly, not such a great story. Customers want to solve problems, not just look at pictures of networks. Inevitably this drives the work toward domain-specific capabilities in areas like computer security, fraud detection or bioinformatics. It's a slippery slope. If you stay focused on core algorithms, your audience is other tool builders i.e. cost centers. Scaling up network visualization: fascinating technical problem, but a human can't actually see a million objects at once or form a mental map of their locations. So it's more like a clustering problem. Not a big surprise that Graphistry adopted uMAP. It's treating nodes more like points in big plot. We're not concerned with the same problems as illustration quality rendering of small readable graphs. Building your own: an appeal of network visualization is that you can get going by just writing some kind of physical simulation, assign reasonable coordinates to nodes, drawing edges as lines, and poof you're done. If your goal is consistently making concrete diagrams that look like a human drew them (with nodes that have shapes and ports, various kinds of labels, constraints on edge routing, nesting, aspect ratio control, etc.) there are so many intricate subproblems that you could spend years on any of them. But what's the financial incentive? The research frontier: no doubt machine learning will eventually transform this domain the way it has many others. The combinatorial objectives of network diagramming make it challenging for now. (Can an algorithm learn orthogonal planar layouts with port constraints? Maybe. Would like to see that.) Another frontier is to extend general methods for declarative 2D layouts. People don't want just pictures of networks, they want more elaborate diagrams: computer networks, metabolic pathways, business processes, cryptocurrency transactions. Network visualization is only a subproblem in information visualization. This ties in to the first point, people need to solve problems in a specific domain.
- analognoise 4y ago
  "Can an algorithm learn orthogonal planar layouts with port constraints? Maybe. Would like to see that." I think ELK can do that: https://www.eclipse.org/elk/ https://www.eclipse.org/elk/
zbird 4y ago
"Building something from scratch is rarely a good idea." Except when you actually want to learn something. Worst possible advice to give someone and I haven't even read the second sentence of this blog post.

87 points by taubek 4y ago

dot

Recently a new web-based fully gpu driven graph visualisation engine was released and it could handle quite some big graphs directly in the browser: https://twitter.com/hoogerwoord/status/1568188361503907840?s=46&t=Z2BaNcEjbXmlcpF2oYZHiA https://twitter.com/hoogerwoord/status/1568188361503907840?s... Happy that people are building new graph visualisation engines and I think still a very open space for innovation in interactively exploring graph/network structures.

mbuda 4y ago
https://github.com/cosmograph-org/cosmos https://github.com/cosmograph-org/cosmos seems super nice! Yep, it's amazing to see better and better tooling around!
kasupe 4y ago
Wow! Looks nice :) Thanks for sharing
cizl 4y ago
Cosmos really looks amazing when it comes to performace. Besides visual rendering on the GPU, they also do the graph layout simulation calculations on the GPU as well, which is a first. SigmaJS for example uses graphology for the calculations, and WebGL for rendering. Cosmos is a really new lib, so when we did our initial research it wasn't even out yet. You can read more about our research over here: https://memgraph.com/blog/you-want-a-fast-easy-to-use-and-popular-graph-visualization-tool https://memgraph.com/blog/you-want-a-fast-easy-to-use-and-po... From what we've understood, it's somewhat limited when it comes to graph styling. But an amazing technology nontheless.
- xtracto 4y ago
  I'm currently using vis-network [1] as the graph display for a Fraud analysis UI. Cosmos looked really good when I checked it but as you very well mention it wasn't able to style vertices with different images/icons and not sure if it was able to style edges color and width. All of this is heavily used in my use case. Hopefully it gets these features as it matures [1] https://github.com/visjs/vis-network https://github.com/visjs/vis-network
  - justtoni 4y ago
    vis-network is a great library. We actually started with it because we liked the API, the styling capabilities, easy to use event handlers. But we experienced performance issues when we wanted to simulate and render larger graphs because it was done in the main thread, the whole UI was blocked by it. We tried to fix it in vis, but simulation was using DOM so it was super hard to split simulation and renderer. Actually that was the main reason (along with the note that main authors are not contributing to visjs any more [1]) for a creation of the Orb where we fixed the blocking UI issue with graph simulation. Orb engine has two parts now: * Simulator that doesn't depend on the DOM so we can move its heavy calculation to the web worker - we use d3-force for it [2] * Renderer is pretty much influenced by vis-network, using similar style mechanism and canvas drawing capabilities (we credited vis-network in our code for those sections) [1] https://github.com/almende/vis/issues/4259#issue-412107497 https://github.com/almende/vis/issues/4259#issue-412107497 [2] https://github.com/d3/d3-force https://github.com/d3/d3-force
twoWhlsGud 4y ago
Interesting license choice - Creative Commons Attribution-NonCommercial.
- erwinh 4y ago
  Yeah I respect the choice although would have liked to see a different license.
nextaccountic 4y ago
Is it open source? Or does it have a website? The tweet wasn't clear

throwaway202209 4y ago

Firefox 104.0 64bit Linux, page doesn't complete loading. When viewed through archive.org page takes >30 seconds to display any content other than menu's, orange back ground, and "are you having problems?" chat prompt. Guess I'll have to work out how to build my own graph visualization engine :)

avmich 4y ago
Yes, I too couldn't pass through all the page requirements.
- taubek 4y ago
  I managed to load it right now. But as someone said, archive.org is also an option. https://web.archive.org/web/20220916170642/https://memgraph.com/blog/how-to-build-a-graph-visualization-engine-and-why-you-shouldnt https://web.archive.org/web/20220916170642/https://memgraph....
chaps 4y ago
Heh same, with noscript blocking 14 unknown domains, where unblocking the main domain doesn't fix it. No way in hell am I going to trust a company on any technical matter when they have to cobble their own product together through that many external services and trackers.

stuntkite 4y ago

I was an early employee at the first round of graphistry.com. I'm really proud of Leo and that he took it from the brink and put it back on the market and is growing it. I think more people should build more graph visualization engines, but you're going to have a hard time competing with how slick pygraphistry is, but there is not enough alternatives that are worth a shit. Graphistry, when I left was able to do half a billion nodes (my memory might be fuzzy, could have been 250,000 but I think we ran tests and got 500k) all memory resident in the browser. Our goal was a billion. I'm not sure what it can do now but it has UMAP and some other very fancy features. Here's a stupid unmaintained thing I made that got me the job at Graphistry. I did not build the graph vis engine, but I did write the procedural color stuff. It's ugly and terrible. Lol. I'm gonna release something some time soon that is a rework on that idea. https://github.com/millerhooks/graphterm https://github.com/millerhooks/graphterm

mbuda 4y ago
Graphistry is really cool but the point here is not to compete on the visualization side, we needed a tool that scales for a few of our use-cases (mostly as a highly configurable graph visualizes) + a library that can easily be extended :D
- stuntkite 4y ago
  Heh. You and me both. When I worked there something I really wanted to get to was GIS integration and abstraction with graph. They are doing some really, really cool stuff and I think their future offerings will be things to take note of, but it's a service too and it's not open source. If you find a solution to what you're talking about, I'm interested. Let me know. Also, I talk to Leo. If you have specific requests that you want to list, I'll make sure he reads this thread.
  - taubek 4y ago
    What kind of integration with GIS where you considering? What did you want to accomplish?

traceroute66 4y ago

I do hate spam-blogs. Bait and switch blog posts (i.e that start potentially interesting and then half-way morph into a poorly disguised sales pitch) are so tiresome.

mbuda 4y ago
Check out the Github repo https://github.com/memgraph/orb https://github.com/memgraph/orb, it's Apache-2, with a lot of thinking around the software design :D
- stuntkite 4y ago
  This looks pretty clunky. Is this what Neo4j uses in their viewer? It feels like it's related.
  - taubek 4y ago
    No, Neo4j doesn't use Orb. Orb was released just recently.
  - mbuda 4y ago
    It's not, it's also based on d3 (like Neo4j viewer I think), but build from from 0
    - stuntkite 4y ago
      The code giving a "lot of thought to software design" must be pretty good, because this looks like Java Graybeard garbage to me. Yeah, that's a caustic statement. I'm not trying to say that people who made it didn't do a good job, but the display is just.... Not good enough. They need to find a team member to help them get out of 20 years ago with this stuff. If anyone that is working on this reads this. That's my thought. I am not taking shots at your work. It does look well organized, but I cannot see a reason I would choose this.
      - justtoni 4y ago

mkaic 4y ago

> Building something from scratch is rarely a good idea. In the context of this article, I agree. Professional products should probably not try to build everything from scratch. But I do think it's important to acknowledge that building things from scratch as personal projects is one of the absolute best ways to gain a deep understanding of a topic. Even if you go on to use graph visualization engines built by others in all your future work, that doesn't mean you shouldn't give it a go on your own time if you're interested in trying it out. Not trying to be contrarian or criticize the article, just my 2 cents. In general I agree with the sentiment of using existing solutions wherever possible.

mbuda 4y ago
Yep, the history here is that we tried out a couple of standalone tools with the appropriate license (e.g., VisJS, which is a great library), but nothing was suitable after some point, and then the best thing was to build. You learn more + we put it open source + we can integrate some other, maybe more scalable visualization engines in the future :D
stuntkite 4y ago
It depends on how you value your time and effort. Not every idea should be valued by its market fit. I don't think people should write code they are uninterested in writing. That's my litmus test for myself. Usually when I'm really, really interested the thing I'm aiming at doing initially isn't even about what I'm really trying to solve. It's picking away at the cruft over something and then I can see what's on the other side. Don't write things from scratch if you absolutely hate it and you are only doing it because you think the market will buy it and you wanna be a big biz, unless you feel like it. I don't know, YMMV. Programming is stupid and I plan to be a pig farmer as soon as possible.
- dtomicevic 4y ago
  haha well, while running a pig farm is also a difficult business, there are some interesting challenges you can tackle :D also you could write software to manage some aspects of your pig farm

Noumenon72 4y ago

"And why you shouldn't" doesn't deserve equal billing in the headline. The article structure is * first two sentences: You shouldn't build from scratch * next four sentences: How not building from scratch failed for us * entire rest of article: How we built from scratch and made an amazing product you should try. I guess the implication is "you shouldn't build an engine because we just built the engine to end all engines"?

dtomicevic 4y ago
something like that, I think we still agree it's an amazing product and now there is really no reason to rebuild it from scratch, at least for a while...
justtoni 4y ago
Great destruct of the existing title to get to the better title! Even though "end all engines" might not be 100% correct, because the initial idea of the Orb is to make a single interface where the background (simulation and rendering engine) can be changed. To add to your title, "you shouldn't build an engine because we just built the engine to unify all engines". :)
dang 4y ago
Ok, we've dropped that bit from the title above. It's kind of baity anyhow.

kasupe 4y ago

If it’s at least a bit easier to use than D3.js, I like it :’) Seems like a really cool project.

vpavicic 4y ago
I tried it a bit and it does seem easier and it renders way faster
- kasupe 4y ago
  I see that it draws on canvas, and I used to draw on svg. This is awesome!
  - justtoni 4y ago
    SVG excels at drawing a small number of large elements, where it sometimes performs even better than the HTML5 Canvas or WebGL.
justtoni 4y ago
D3 is a great product. We really like using it. D3 has a great integration with svg rendering, but we needed a canvas rendering which resulted in a merge of vis.js (guys did a great job on canvas rendering) and D3 (just the simulator: d3-force).

politician 4y ago

This is open source?! It looks far more approachable than ReGraph.

kasupe 4y ago
Yep :)
deleted 4y ago
[deleted]
dtomicevic 4y ago
Yep, Apache 2.0 https://github.com/memgraph/orb https://github.com/memgraph/orb
deleted 4y ago
[deleted]

deleted 4y ago

[deleted]

kez_z 4y ago

I recently tried graph visualization and it was a mess. Might check this out, anything to make it easier.

graphviz 4y ago

Good discussion. It may help to separate the different threads. Business models that support network visualization: mostly, not such a great story. Customers want to solve problems, not just look at pictures of networks. Inevitably this drives the work toward domain-specific capabilities in areas like computer security, fraud detection or bioinformatics. It's a slippery slope. If you stay focused on core algorithms, your audience is other tool builders i.e. cost centers. Scaling up network visualization: fascinating technical problem, but a human can't actually see a million objects at once or form a mental map of their locations. So it's more like a clustering problem. Not a big surprise that Graphistry adopted uMAP. It's treating nodes more like points in big plot. We're not concerned with the same problems as illustration quality rendering of small readable graphs. Building your own: an appeal of network visualization is that you can get going by just writing some kind of physical simulation, assign reasonable coordinates to nodes, drawing edges as lines, and poof you're done. If your goal is consistently making concrete diagrams that look like a human drew them (with nodes that have shapes and ports, various kinds of labels, constraints on edge routing, nesting, aspect ratio control, etc.) there are so many intricate subproblems that you could spend years on any of them. But what's the financial incentive? The research frontier: no doubt machine learning will eventually transform this domain the way it has many others. The combinatorial objectives of network diagramming make it challenging for now. (Can an algorithm learn orthogonal planar layouts with port constraints? Maybe. Would like to see that.) Another frontier is to extend general methods for declarative 2D layouts. People don't want just pictures of networks, they want more elaborate diagrams: computer networks, metabolic pathways, business processes, cryptocurrency transactions. Network visualization is only a subproblem in information visualization. This ties in to the first point, people need to solve problems in a specific domain.

analognoise 4y ago
"Can an algorithm learn orthogonal planar layouts with port constraints? Maybe. Would like to see that." I think ELK can do that: https://www.eclipse.org/elk/ https://www.eclipse.org/elk/

zbird 4y ago

"Building something from scratch is rarely a good idea." Except when you actually want to learn something. Worst possible advice to give someone and I haven't even read the second sentence of this blog post.