Skip to content

Commit 9d5b517

Browse files
Update readme.md
1 parent a26b716 commit 9d5b517

File tree

1 file changed

+4
-4
lines changed

1 file changed

+4
-4
lines changed

min/readme.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ The samples, demos and unit tests can be found online and are also provided with
4242
Business intelligence systems and applications are designed for two major areas: reporting and analytics. Reporting based applications display the original data as is, so reported data should be 100% complete, no data should have any discrepancies or be omitted in the form of improperly rounded values or excessive abbreviations. On the other side, there are applications that are designed for data analytics and are focused on the most valuable and user relevant data. Going as far as removing data that is deemed irrelevant by the end user depending on what they are interested in analyzing. Our components provide various API options to the developers, so they can configurate our diagrams and use them for both of the mentioned above scenarios.
4343

4444
#### Auto layout and fititing the diagram into a single screen space:
45-
When using a graphics editor to manually draw your diagrams, it is common place to have large gaps between the nodes. This can make the diagram/chart unreadable, hard to edit and navigate. On top of that, on a large scale the diagram could have screen size intervals between items. Admittedly the computer UI does allow the user to scale and fit the diagram in order to visualize it on a single screen. But in that case, the items become small and unreadable as there is no scaling priority and the items are just too small to be readable [Here is PDF example demonstrating the problem.](samples/images/sparse_data_problem.pdf) The primary goal of our approach to organizational charts and other diagrams visualization is to resolve these issues. Our product component specializes in displaying large diagrams in a single screen or nearly removing all scrolling while at the same time not affecting the diagram's usability. This is only possible when the diagramming component is in control of the auto layout for the nodes.
45+
When using a graphics editor to manually draw your diagrams, it is common place to have large gaps between the nodes. This can make the diagram/chart unreadable, hard to edit and navigate. On top of that, on a large scale the diagram could have screen size intervals between items. Admittedly the computer UI does allow the user to scale and fit the diagram in order to visualize it on a single screen. But in that case, the items become small and unreadable as there is no scaling priority and the items are just too small to be readable [Here is PDF example demonstrating the problem.](https://github.com/BasicPrimitives/javascript/raw/master/samples/images/sparse_data_problem.pdf) The primary goal of our approach to organizational charts and other diagrams visualization is to resolve these issues. Our product component specializes in displaying large diagrams in a single screen or nearly removing all scrolling while at the same time not affecting the diagram's usability. This is only possible when the diagramming component is in control of the auto layout for the nodes.
4646

4747
* Minimizing nodes into markers and labels: Our component provides a special mode that renders the diagram nodes in the form of markers. This is a highly scalable form that is capable of rendering large numbers of nodes while not affecting the rendering performance. With this, huge diagrams can be fit into avaialable screen space.
4848
* The user has focused navigation as they go node by node. The key nodes are kept full size as the less relevant nodes in the user view are minimized. The user also has the option to customize which nodes are relevant via selection, annotations and navigation options. By default the chart displays the cursor selected item and its neighbors in full size and minimizes all other less relevant nodes. By clicking on neighboring nodes the user will move the focus of interest to the newly selected part of the diagram. Local zoom around the cursor item works for all available diagrams.
@@ -64,18 +64,18 @@ A diagram can have multiple parent and child nodes all be part of one large rela
6464

6565
The following is an example of a complete bipartite graph. As visable every parent node is connected with every child node.
6666

67-
![Complete Bipartite Graph](samples/images/cbp88.png)
67+
![Complete Bipartite Graph](https://github.com/BasicPrimitives/javascript/raw/master/samples/images/cbp88.png)
6868

6969
This is definitely an extreme example of family relations, but it could happen and the component automatically groups connectors into bundles so it produces the following optimized set of relations:
7070

71-
![Complete Bipartite Graph Bundled](samples/images/cbp88bundled.png)
71+
![Complete Bipartite Graph Bundled](https://github.com/BasicPrimitives/javascript/raw/master/samples/images/cbp88bundled.png)
7272

7373
This connector bundling method is actively used throughout the product in order to increase the readability of the diagrams.
7474

7575
#### Automatic elimination of redundant relations between nodes
7676
Another typical problem with visualizing connections is the possible excessive amount of connections that can take place between multiple gradnchild and grandparent nodes. Usually when we draw family diagrams we are more interested to see the overall order of dependencies over the more direct and specific node relations. In a family tree we know that all the nodes are directly linked to one another via their immediate parent. Because of this, we can remove the direct connections between non-immediate parents, reducing the amount of visual clutter on the screen and still get the same order of dependencies. By doing this the diagram becomes a lot easier to analyze, view and navigate.
7777

78-
![Excessive amount of connections](samples/images/cbp88everyparent.png)
78+
![Excessive amount of connections](https://github.com/BasicPrimitives/javascript/raw/master/samples/images/cbp88everyparent.png)
7979

8080
### Annotating diagram nodes
8181
Every time we make changes to our diagrams, we need to visualize the performed modifications otherwise it is hard to trace the changes before and after the modification occured. So in order to visualize the diagram's transition from one state to another, the control provides various annotations to the end user. Annotations are API elements that are attached to the diagram nodes. We draw our annotations either in front of the nodes or in the background. The annotations don't affect the nodes placement in any way. As a result the control redraws them instantaneously without rerendering or recalculating the actual diagram layout. The general logic of annotations is that they are not supposed to be displayed for every node in the diagram. The application is supposed to create them and add them to the diagram depending on the context of the current user cursor or operation that the user is performing with the data. It should be noted that annotations have minimal mutual conflict resolution. As a result it is very easy to clutter the diagram with an excessive number of annotations. But they are nevertheless very useful when describing or giving node specific context or details to the diagram.

0 commit comments

Comments
 (0)