I'm visualizing a network with VisJS, and using the default layout with physics enabled. When nodes are added, a layout is done and the nodes are placed on the canvas. However, some of my nodes are quite large. Is there a way to force the amount of space that is left between nodes?
I've tried setting the size of the node, which doesn't seem to have an effect. The shape of the node is "square".
Figured this out, I was missing physics options for the engine I was using, in particular "avoidOverlap".
Related
I can share the code if needed but it felt like a lot to share to start, so I'll try to explain narratively. I am creating an interface to display network data (as you might have guessed from the title). My first issue has been going on for a few days where visIgraphLayout is not laying out my visual correctly. Regardless of using "full" or "square" as the "type", the network map extends beyond the edge of the display space. When I resize the interface window, then the map will snap to full. Why won't it simply resize automatically? If it matters, I do have the output space in a box element. Also, I have the layout styles working off radiobuttons, and when I switch between styles the map goes beyond the edges again.
Part 2 begins. While the above problem is annoying, it was livable. However, a new wrinkle popped up. I added some font size control to my visNodes code - i.e., radiobuttons set to switch between off (0), small (5), standard (14), and large (40) font size options. Once I implemented this code, when I resize the interface window, now the network map disappears completely after initial load. If I select a new label option, it will redraw but beyond the edges of the space.
All the issues resolve themselves if I ditch the visIgraphLayout, but then I lose the layout functionality which I really like.
I hope this is clear enough. I really appreciate any insights the community might provide. Be well.
I think I have figured out an answer. Long story short, certain pieces didn't work and play well with others. Went through and build it again, and all it good.
Cheers.
I have a visualization of node and spoke model and tried cytoscape. Loving how easy it is to implement and able to control the size of the node, color of the node, placement of text etc. On load, the viz eases out and appears. Sort of like https://ivis-at-bilkent.github.io/cytoscape.js-fcose/demo.html.
However once it is loaded, it looks very static.
I do not want to go to d3 / amcharts just for this reason. Is there anyway I can float nodes around or something using cytoscape options or even css like codepen.io/team/amcharts/pen/EJgNey
Use Cola. Refer to the demo: https://js.cytoscape.org/demos/colajs-graph/
Cola can be used iteratively, as in the demo with the slider: The slider restarts the layout with the updated state -- here the slider controls the forces. You can just restart the layout whenever a node is dragged.
I am writing a web app which renders a graph that holds ~700 nodes and their respective edges. Each node is displayed as a circle and inside of it is contained a block of text, a background image, as well as other content. The graph is interactive and the user can both scale and pan the graph. Thus smoothness and high performance is necessary.
Suppose the graph is rendered with SVG. Considering that each node contains rich HTML-like content, it is easier to structure and style the node with HTML/CSS in a div and include it in the graph as a foreignObject. However, with this method there is a noticible performance drop when using the app with mobile devices. Over a modern browser, would you expect a significant performance increase if nodes were structured purely in SVG?
In this particular case, using HTML for each node involves the use of a div with text, and CSS properties like width, height, border, background-image, border-radius, and flex.
Using pure SVG would be more complicated to implement, but would include elements like rect and pattern as well as the corresponding SVG styling attributes.
It really depends on the complexity of the shapes, the size of the graph and how much time you want to put into it. A graph with 700 nodes and thousands of edges sure is a heavy thing. I would advise you to make a small version of the graph (maybe 10-15 nodes) and compare the performance between HTML+SVG and SVG only.
The thing is, using only SVG it is very heavy and not very performatic at all. I guess it'll be very heavy both ways. Have you considered using other tools?
I used this website a while ago to make a flowchart for a website and it worked really well.
Hope it helps.
I'm doing some simple plotting and would like to increase the usability of my figure.
I have quite a lot of points on my graph and have issues with selecting the ones I want because the click radius is so tiny.
I can increase the circle radius of my point but the radius of the area which displays a tooltip is still only 1 dot. Can I increase the radius somehow without having to create additional points around which respond the same?
Would it be even possible to increase the click detection radius without increasing the actual circle radius?
in the current version (0.8.2) and in the upcoming version (0.9) this is not yet a tunable parameter. It would be a good feature to expose a click radius, so I have made an issue on our issue tracker, that you can follow, here:
https://github.com/bokeh/bokeh/issues/2230
In the short term, a possible workaround is to have a second, invisible set of glyphs that are used for hit testing. They would be at the same locations, but bigger, to provide a bigger hit area.
I need to fit a certain amount of block shapes with varying dimensions in a collection of available boxes as efficiently(least used boxes and wasted space) as possible. The shapes and boxes don't really align to any grid but if a grid helps, I would sacrifice some accuracy for better performance or simpler code.
This is for a product order system that should fit the ordered products in boxes in the most cost-effective way for shipping.
This is a 2D bin packing problem. Depending on the size of The problem, optimal solution is probably not feasible.
http://en.wikipedia.org/wiki/Bin_packing_problem
There are a few different strategies to solve this suboptimally, see links from wiki article.