using python graphviz I am trying to render a DiGraph where there are groups of nodes connected to each other and separate from other groups. The structure is something I am creating on the fly, where I don't really have the full picture of these components before hand, it's something I am hoping the rendered graph would help me understand. I would like for these groups to be aligned vertically in the output svg file instead of all laid horizontally as it is now.
Any ideas?
Related
I've been asked to build something similar to this so that customers can draw basics shapes of kitchen tops. Similar to that in the image below but also have dimensions.
It looks like konva has support for basic shapes like rectangle and circle etc and it also includes a transformer which allows for resizing. However, I think if I want to build a custom shape like the one in green and have individual sizing i.e. resize each individual line. I am going to have to build something myself.
I was hoping someone could point me in the right direction. I have seen an example where someone has used a "line" class which takes a series of points and then sets the attribute to closed which fills in the shape. Obviously I would need to extend this to allow the custom resizing. However, Im not sure this is the correct path to head down?
Any suggestions?
.
How about using rectangles and having an option to snap them together. It should be fairly simple to do the edge detection and snapping. Then show the result as a Konva.Line around the perimeter.
Then you can show all the control handles for the rectangles except those on the sides where another Rect has joined.
I'm trying to write an algorithm to detect blobs using connected component labeling on an image. I'm having difficulty on how to merge different labels if they are connected diagonally. Doing it for horizontally and vertically connected pixels seems easy . But i can't figure out a way to detect the pixels that are connected diagonally .because if it changes then there is a need to relabel the image w.r.t to that change for each changed pixel . I'm confused . Can you explain me how to handle this. I may be totally wrong about what i said (but i have achieved reasonable results doing only the horizontal and vertical connected components) , but it isn't the correct way. please advice to how to approach connected component labeling accurately. I'm only using arrays of image dimensions for comparing and labelling.
Well you are able to do horizontal and vertical, just add another direction for the diagonal, so you are looking for neighboring pixels in all directions as opposed just to vertical and horizontal.
I'm trying to apply readable labels to a D3 Streamgraph that is rendered using completely dynamic data - various different datasets that are evolving over time from live data and the controls offered to manipulate what is shown too. All this works well - the problem is how to clearly label the streams - short of using a legend.
The great variation of hues and luminance needed makes choosing readable styling for labels that float over the graph extremely tricky, particularly with the limited SVG styling available cross platform and that the labels will inevitably overlap on the background sometimes too. For instance black coloured labels 'work' but it's hard to read sometimes over the top of darker colours (which we really need to ensure a good range)...
Anyone done anything similar/addressed same challenge? I'm currently pondering using a legend instead.
A couple of ideas may help:
Add a background rectangle around the text with opacity set to 0.7 (the color being the same as the data series). This helps make the text pop. For the border of the rectangle, use d3js rgb.darker or rbg.brighter.
var pathStroke = d3.rgb( item.color ).darker(1.4).toString()
For preventing overlapping labels, I can think of two solutions - both hard. Use d3js Force Layout or write your own layout code. We ended up writing our own layout code for tooltips in d3-traits. See tooltips.js and layout.js.
d3.trait.layout.verticalAnchorLeftRight( foci, self.chartRect())
layout.js does have some general purpose and very flexible layout routines. It will layout rectangles within a bounding box avoiding overlap and determines if the labels need to be left or right justified. If the origins of the rects are toward the right edge of the bounding box, they are right justified.
I have a Force Directed Graph that I've generated with D3 and within each node (which are represented as large circles) I'd like to pack in a bunch of smaller circles using D3's Circle Packing. Is it possible to use both of these layouts in one visualization? How does one insert a layout into a node?
I figured it out once I realized that svg elements were just regular dom nodes and I could manipulate them with jquery. I ended up created two svg locations, one for display and one for creation of svg objects. I built one object at a time in the builder location and then moved it off to somewhere else in order to work on the next guy. When I was ready I built the force graph on the main display and populated the nodes there with the circle packed nodes that I had saved off somewhere else.
I'm using D3 to create sets of polygons and I'd like to be able to outline the sets. For instance, if you have a set of path elements, such as all the states of Mexico, Canada, and the United States, and you wanted to procedurally draw a border around the path elements that share the same attribute (such as their ccode) is there an established way to do this?
Obviously, I could overlay a national path, but what I want to do is be able to draw these borders dynamically based on different attributes on-the-fly, and I'm using the geo example because I think it's the most comprehensible.
if you can break up your paths so that each path is a border between exactly two regions then you should be able to simply iterate through your "borders list" to determine when to draw each one: i.e. draw a border that has exactly one match in your list of states-to-highlight. Borders with two matches are interior and borders with no matches do not belong to the regions you are interested in.