I'm fairly new to D3 and have been tasked with developing a force directed graph, however this diagram is unlike any examples I have found and I seem to have encountered quite a few issues.
I'm trying to develop something like this:
http://www.huzzahstudios.com/images/profile_page_simple.jpg
The biggest problem I am having so far is that the nodes containing text tend to overlap quite considerably and collision detection on the shape they form does not seem to be functioning as expected.
Basically I need:
- Nodes to never overlap in resolved state
- Nodes to resolve in similar locations (as per diagram above)
- Graph to be able to adapt acceptably depending on amount of data
This is what I have so far: http://jsfiddle.net/lucidlyle/SwV9s/4/
As you can see it's very messy at the moment, any help with this matter would be most appreciated.
Thanks
Related
We are new to D3 so please forgive me if I ask a stupid question. My developer and me have developed a user interface with D3 and as a default, it returns this:
However, this is not really user-friendly, since it is not clear what belongs to what. My ideal configuration would be something like this:
There are four nodes in total.
The grey node is the center node, it should always be in the center.
The green nodes are like 'subcategories', and they should always be in the circle around the center.
The gold nodes are companies and they can be scattered around, but in the presence of the green nodes they belond to.
The orange nodes are characteristics of the gold nodes and they should be scattered around the gold node that they belong to.
I hope you can give us some suggestions on how to approach this matter.
What you described can be achieved with a force simulation where nodes repel themselves. Here is an example in D3.
Creating a simulation encompasses an understanding of how it works, how to prepare data for it, and how to implement it; which are complex and broad topics that couldn't be fully explained in a single SO question. As a general direction, I recommend looking into the d3 documentation for force simulations. For searches, the keywords you might want to look for are "force simulation graph layout d3". There are several blog posts and examples that can help you implement with much more detail.
Diving a litte bit on your specific scenario, the main difference from your requirements from usual examples is the fixed node at the center. The force simulation works by assigning x and y properties to the nodes, but there are two properties fx and fy that you can manually set to fix the node's position.
When preparing the data for the simulation, find the node you want to be in the center and add the properties fx and fy to match the center of the screen. The force simulation will automatically position the other nodes around it, very similar to your second illustration.
I have a rather large graph in DOT, which I render using neato
and I'm more or less able to distinguish its main clusters using a lot of len=... attributes.
I wanted to experiment with twopi, because I like a lot the way it renders, but I see that it doesnt support len.
There are alternatives? My need is to manually keep some portions of the graph rather isolated from others, to enhance readability. I tried with clusters but apparently the results are not so good.
With twopi, you specify a root then the number of edges away from root will dictate which ring of the circle it belongs on. Another alternative you might also consider is circo which is yet another graphing tool from graphviz.
I am trying trace lines in the following image. So my input image is like this:
So far, using deep learning, I am able to distinguish different shapes and I get following output and I have now type of shape and their position:
which seems to be pretty good to me. Also I am successful in finding lines between shapes like following, I want to use this as an evidence:
which detects more or less all the lines between each shape.
Question:
My aim is detect which shape/object is connected to which shape, and in which direction. For a while I am ignoring the directions (but any ideas to detect are welcome). But I am really stuck at how should I approach this problem of "tracing" lines.
At first I thought of an algorithm which "connects" two objects if we find enough "evidence", but in most images I have a tree like structure, there are three or more than three connections from one object (as between 4th and 5th level of input image), which makes it hard to go for that simple approach.
Did someone ever solve such a problem? I am just looking for an algorithm, programming language is not a problem but I am currently working in python. Any help would be really appreciated.
I want to create a plot that visualizes the flow between the major that a person graduated in and the profession/sector they are working in after 1.5 years after graduating. I thought about using a Sankey diagram for this like the image below
But wanted to make this slightly more visually interesting by making the left side (the majors studied) and the right side (the jobs) into two arcs. So it mights start to look as a Chord diagram, but with the two arcs pulled apart a bit . The example below sort of shows the idea of the two arcs (although not the correct flows between them)
The Hierarchical Edge bundling example of citations also looks somewhat similar to what I want to achieve, but here the lines have no thickness to show the number of people that flow from one end to the other and no 2 separate arcs (although I could create two white sections with no flows to imitate a separation)
Does anybody have any examples on how to create a circular / arc like Sankey diagram? Or should I try this from a Chord diagram perspective?
Thank you for your help!
I figured out how to do it myself, but it requires a bit of code changes. So I wrote an extensive tutorial on how to do it. You can find it here
I have a lot of polygons. Ideally, all the polygons must not overlap one other, but they can be located adjacent to one another.
But practically, I would have to allow for slight polygon overlap ( defined by a certain tolerance) because all these polygons are obtained from user hand drawing input, which is not as machine-precised as I want them to be.
My question is, is there any software library components that:
Allows one to input a range of polygons
Check if the polygons are overlapped more than a prespecified tolerance
If yes, then stop, or else, continue
Create mesh in terms of coordinates and elements for the polygons by grouping common vertex and edges together?
More importantly, link back the mesh edges to the original polygon(s)'s edge?
Or is there anyone tackle this issue before?
This issue is a daily "bread" of GIS applications - this is what is exactly done there. We also learned that at a GIS course. Look into GIS systems how they address this issue. E.g. ArcGIS define so called topology rules and has some functions to check if the edited features are topologically correct. See http://webhelp.esri.com/arcgisdesktop/9.2/index.cfm?TopicName=Topology_rules
This is pretty long, only because the question is so big. I've tried to group my comments based on your bullet points.
Components to draw polygons
My guess is that you'll have limited success without providing more information - a component to draw polygons will be very much coupled to the language and UI paradigm you are using for the rest of your project, ie. code for a web component will look very different to a native component.
Perhaps an alternative is to separate this element of the process out from the rest of what you're trying to do. There are some absolutely fantastic pre-existing editors that you can use to create 2d and 3d polygons.
Inkscape is an example of a vector graphics editor that makes it easy to enter 2d polygons, and has the advantage of producing output SVG, which is reasonably easy to parse.
In three dimensions Blender is an open source editor that can be used to produce arbitrary geometries that can be exported to a number of formats.
If you can use a google-maps API (possibly in an native HTML rendering control), and you are interested in adding spatial points on a map overlay, you may be interested in related click-to-draw polygon question on stackoverflow. From past experience, other map APIs like OpenLayers support similar approaches.
Check whether polygons are overlapped
Thomas T made the point in his answer, that there are families of related predicates that can be used to address this and related queries. If you are literally just looking for overlaps and other set theoretic operations (union, intersection, set difference) in two dimensions you can use the General Polygon Clipper
You may also need to consider the slightly more generic problem when two polygons that don't overlap or share a vertex when they should. You can use a Minkowski sum to dilate (enlarge) two and three dimensional polygons to avoid such problems. The Computational Geometry Algorithms Library has robust implementations of these algorithms.
I think that it's more likely that you are really looking for a piece of software that can perform vertex welding, Christer Ericson's book Real-time Collision Detection includes extensive and very readable description of the basics in this field, and also on related issues of edge snapping, crack detection, T-junctions and more. However, even though code snippets are included for that book, I know of no ready made library that addresses these problems, in particular, no complete implementation is given for anything beyond basic vertex welding.
Obviously all 3D packages (blender, maya, max, rhino) all include built in software and tools to solve this problem.
Group polygons based on vertices
From past experience, this turned out to be one of the most time consuming parts of developing software to solve problems in this area. It requires reasonable understanding of graph theory and algorithms to traverse boundaries. It is worth relying upon a solid geometry or graph library to do the heavy lifting for you. In the past I've had success with igraph.
Link the updated polygons back to the originals.
Again, from past experience, this is just a case of careful bookkeeping, and some very careful design of your mesh classes up-front. I'd like to give more advice, but even after spending a big chunk of the last six months on this, I'm still struggling to find a "nice" way to do this.
Other Comments
If you're interacting with users, I would strongly recommend avoiding this issue where possible by using an editor that "snaps", rounding all user entered points onto a grid. This will hopefully significantly reduce the amount of work that you have to do.
Yes, you can use OGR. It has python bindings. Specifically, the Geometry class has an Intersects method. I don't fully understand what you want in points 4 and 5.