I have data that needs multiple columns. One of the columns (preferably not first, but can be) will display nested tree structure like data.
Both maxazan's TreeGrid.js and Ludo van den Boom's treetable.js accomplish what I want, almost. It can be very hard to distinguish the hierarchy by quick glance:
The data hierarchy is but unclear here
And here would be solution: Adding connectors ->
The visualisation fixed with connectors
The actual data has 7 columns
...but TreeGrid nor Treetable support this functionality. In both, the indentation is accomplished through spans with padding. Treetable uses a single spans, which makes connector implementation near impossible. TreeGrid uses multiple spans, where I could imitate something connector like to distinguish the levels better.
How would I implement connectors to eg. TreeGrid, or are there any similar js libraries for creating tree grids with connectors that I have missed?
If your answer is: "it's semantically incorrect, you should use nested lists" (in which connectors are quite trivial to implement), then my follow-up question is:
What are the different possibilities to vertically align the elements inside list elements inside nested unordered lists? The old version used unordered lists with floating elements, very fiddly code to resize them accordingly if window is resized etc, which broke in way too many cases and was horrible to maintain.
Related
This question at face value is a duplicate of: Divs vs tables for tabular data
BUT I don't think there is a good explanation of WHY someone will ignore what we agree on as standard practice.
It is 2017, tables were inappropriately used for layouting so people say don't use tables, but the exception we know is for visualizing tabular data!
Why is react-table made with divs instead of table/tr/td/th ? https://github.com/react-tools/react-table Certainly some, if not all, 43 contributors know that it shouldn't be divs.
Finally, isn't there an accessibility argument to be made in favor of using the right definition for the job? Wouldn't a screen reader understand that something is a table b/c it uses the term?
Nowadays, tabular data can be formatted nicely with divs and flex box css model. Not 100% as with table, but very close. Additionally, table elements (especially tr) can be styled with css to achieve responsive behavior for mobiles and tablets. At least in most modern web browsers.
So I'd use tables when you need to keep 'rubber' columns (proportionally stretching table heading and table body columns) and use divs when you can make columns with already known width and when semantics is not that important.
Update: Added a collage of the images I was going to add to get around reputation block
I've been working on a cytoscape implementation that will dynamically display information I'm pulling from my database onto a webpage. The goal is to be an organization chart, displaying nodes in groups, in a directed tree structure. I've been doing a lot of research, and trying out several different layouts and api options to try and meet the use case, but I'm having issues getting it to work the way I'm intending.
Specifically I want to use compound nodes - the parents being the people's ranks. I've learned that a lot of layouts simply haven't been designed with compound nodes in mind, and I've been trying different implementations, including ones that create an initial layout, and then try to run a secondary layout specifically on the descendants of the parents.
Following are the closest of what I've tried and their issues:
Images of graphs: https://i.stack.imgur.com/6hzVS.png
cose-bilkent:
The main issue with this is that it doesn't seem to be meant for directed trees, but rather decides placement on its own. The bigger issue I've had is that I couldn't find a way to spread the nodes out better within their groups. I've tried to use the node padding options included, but they haven't had an affect, which I'm assuming is due to the compound nature.
grid:
Graph is in a perfectly grid like layout of all the nodes, but ignores parent nodes.
This layout was working for me initially, and would have the benefit of being able to easily change the amount of people per column. As I changed the elements though I realized it was a coincidence that it worked initially - it seems like it's totally ignoring the parent nodes, which is understandable if it wasn't designed with them in mind.
grid - descendants:
Graph is of the two sets of descendants layered on top of each other.
What I tried next was using a different layout to determine the initial placing of the parents, and then performing a grid layout on the descendants to make them organized in their groups. I realized then that parents are simply reacting to their child's placement. Also, it appears that calling layouts on sets of nodes separately for grid was completely ignoring anything else that exists on the graph, causing the groups to be put on top of each other.
cola:
It's close, but the way it puts them on the graph is not well structured, causing the placement in the groups to be jumbled up, though they are spaced out enough.
This appears it would work great if I could figure out how to run a proper layout on the parent nodes, forcing the tree structure that works without compound nodes.
Here is more or less what I'd like to see, though the logic for # of nodes per column isn't that important. As long as they're organized neatly:
https://i.stack.imgur.com/irVaK.png
Is there any advice someone could give on how I could go about making this work? I haven't been able to find any layout setups that work quite right, and I don't really know what to do from here. I would also prefer to avoid creating an entirely new layout from scratch. Any help is greatly appreciated.
If you have a proper tree data structure, you shouldn't be using compound nodes for layout. It's not generally possible to satisfy compound parent position restrictions when there are additional constraints on the children. This is because a parent is naturally constrained by its children -- a parent doesn't have its own position or size, it's children define it implicitly.
The best layouts for compound graphs are force-directed (physics simulation) ones like CoSE or Cola.
In your case, you just have a tree. I would use the breadthfirst or Dagre layouts without any compounds. Each level will naturally indicate rank.
For anyone interested, what I've done to solve this is create my own preset layout function that dictates where (children) nodes go on the graph, using their properties to dictate where they go.
It's designed to only display linear compound graphs, in order based on "level" in the hierarchy. It's capable of displaying the children nodes in grid-like sets within their parent nodes (visually - remember parents simply adjust according to their children), in the order of the mentioned linear levels.
You can also specify the values for how many columns in a set, space between nodes, and space between levels. There's obviously lots of room to make the variables more verbose if you'd like to specify "x-space" and "y-space" between nodes, and things like that.
It assumes the following:
-You know ahead of time what level corresponds to each compound group
-You know ahead of time how many nodes are in each compound group
-If you're making this dynamically, that you have a way to dynamically produce the javascript variables necessary for the dictionary, which tracks the total size of each group and how many nodes of each group have been accounted for.
Here's the code. I know it's a niche case, but if you do have a reason to use it, just keep in mind that it's sure to be bug prone, and is definitely inefficient (Javascript isn't my forte...). I've tested certain edge cases that I feel are common in my project, but there could be others that aren't accounted for.
http://jsbin.com/quyipo/edit
(Also upvotes/comments don't hurt either. I'm curious if this could actually help someone...)
Hi fellow Javascripters,
I am using both Angular and D3 in my project (no jQuery, which I intend to keep this way). One thing that I want to support is to enable users to play with 'raw' tabular data. So, data from a CSV is loaded into my app and displayed in a plain old fashioned table (currently with Angulars ng-repeat). However, I now want to be able to animate that columns of the table get reshuffled. So, as a simple example, I would programmatically want to switch column 2 with column 4 and this transition must be D3-like. Furthermore, easily dragging whole columns to other positions should be possible.
Since I am not really experienced with working with jqLite inside Angular directives, my preference would go out to a solution based on D3. I can then see two possible solutions:
Render all of the data in a regular table using the D3 append functionality. Whenever column order changes, somehow reconstruct the table and create a smooth transition.
Simulate a table with div's and css (not looking forward to that though), to enable easy repositioning of data.
Since both solutions are far from trivial (I would say), I would really like to have some opinions. Do you see any other solutions for me? And if one of these two solutions seems right for you, how would you go about implementing them?
Thanks in advance!
I've this beautiful design I'd like to code. But I'm struggling with masonry layout of the content section.
There are 500*500px, 250*500, 250*250 blocks.
I tried to use isotope and test out different layout modes, but none seems to fit the design. http://isotope.metafizzy.co/ examples though look much better. oh and my test site is here: http://mac.idev.ge:800/test/
What can I do? Should I roll out my own algorithm, or is there an easy solution? :) maybe I'm using isotope in a wrong way?
The problem with Isotope is that it tries to lay out the items in the order supplied (it allows sorting so assumes order is at least a little important).
You can alter the layout in a few ways.
change the order of your items (based on the layout width),
use a custom layout for Isotope (there is at least one bin-packing based one out there),
write your own custom layout for isotope (I can vouch for this being quite difficult),
or switch to using something like Packery.
Packery does not have the same feature set as Isotope (no sorting or filtering), but may be a better choice for your interface.
I'm build the UI for a web-based list app.
Does anyone know of a script that allows users to arrange the ordering of html elements?
similar to this
http://jqueryui.com/demos/sortable/ but also has the ability to indent items by dragging horizontally? (to represent parent child relationships)
I believe that the parent-child relationship you want creates a tree, so why not looking for some jQuery Tree plugins that allow drag and drop.
I found this after a quick search in google:
http://www.jstree.com/demo
There are several Tree plugins that do something similar to what you want.