Shape

The shape node is a circle with filled colors, which are categorized into four different sizes based on node weight. The node should have a minimum size of 50x50px and a maximum size of 190x190px in default zooming mode. with this rule, the whole size categories are changeable depending on zoom condition.
And, when a node is connected to more than 50 edges, it should be represented as a 'Tornado' shape.

The nodes are circular in shape and have solid colors.

Don't use three-dimensional, gradient colors.

    def ask_to_AGEDV():
  prompt=input("Please enter your question:")
  try:
     question=query.format(question=prompt)
     result=db_chain.run(question)
     print(result)
     return result
  except Exception as e:
     print(e)
ask to AGEDB()
    

Color

Node colors are organized into six shades of blue. If you need to reorganize or add more colors, adjust the color system accordingly.
‍
Color list:
#7AB74D
#EDAF08
#E54F35
#3E7ED1
#7535E5
#182A4A
‍
In case a node is selected, its stroke line should be highlighted with the designated color (#00E3DB). When a node is deactivated, the original color should be applied with an opacity of 0.2.

    def ask_to_AGEDV():
  prompt=input("Please enter your question:")
  try:
     question=query.format(question=prompt)
     result=db_chain.run(question)
     print(result)
     return result
  except Exception as e:
     print(e)
ask to AGEDB()
    

Label Name

The default location for the label name is inside a node, but if a node includes an icon or group, the label should be moved to the bottom and placed inside a white label box.
When the text in a label exceeds the available space, it should be truncated and replaced with '...' after 8 characters in English and 6 characters in Korean. If the size of the node is small, the text should be truncated after 4 characters in English and 2 characters in Korean and replaced with '...'.

    def ask_to_AGEDV():
  prompt=input("Please enter your question:")
  try:
     question=query.format(question=prompt)
     result=db_chain.run(question)
     print(result)
     return result
  except Exception as e:
     print(e)
ask to AGEDB()
    

Icon / Image

An icon should be placed at the center of a node with a white circular background and positioned 18px away from the node. Moreover, when creating the white background, make sure to add a shadow (#B8B8B8, 0, 0, 8) to the shape.
If you are adding an image to the node, it should be centered and completely overlapped with the node.

Position the entire image with no margins overlap.

Avoid placing the image in a small size
and showing a bias towards one side.

    def ask_to_AGEDV():
  prompt=input("Please enter your question:")
  try:
     question=query.format(question=prompt)
     result=db_chain.run(question)
     print(result)
     return result
  except Exception as e:
     print(e)
ask to AGEDB()
    

Multi property

When a node has multiple properties, it should divide the circles into several sections with different colors, similar to a pie chart. In case a particular property holds a significant proportion, its corresponding section will be wider. Moreover, if an icon is added to the node, it should be centered with a white background.

Fixing Node

Fixing a node is indicated by the 'Pin' icon in a rounded square. This icon can be changed by applying additional functions to the node.

Color list:
Icon: #FFFFFF
Square: #000000

Node Expansion

To add additional functions to Node, place icons for each feature on the fan shape. (Right-click a node to open it) Moreover, it is possible to customize the number of sections and the shape of icons.
You can place the expansion (fan shape) at the bottom of the node, but if a label name is present at the bottom, it should be located at the top.

Icon should be centered in the node. For additional functions, place it in the upper right corner of the node.

The icon must have a designated color, shape, and location.

    def ask_to_AGEDV():
  prompt=input("Please enter your question:")
  try:
     question=query.format(question=prompt)
     result=db_chain.run(question)
     print(result)
     return result
  except Exception as e:
     print(e)
ask to AGEDB()
    

Group Node

By default, all of the graphs are displayed without grouping mode before you apply the 'grouping function' to the selected graph.

The central number of a node represents the total number of nodes in a group. The circular stroke of the node is arranged by the number of graphs (a line outside means a bigger graph and a line inside means a smaller graph) and is illustrated by each color. The maximum number of groups allowed is 4. Thus when over four groups are displayed, they're hidden via a black circle with a number. Clicking the circle opens all groups.

By clicking on each group node, you can verify the individual graph connections.

By clicking on each group node, you can verify the individual graph connections.

Motion of group nodes
When you click on each lined part of the group, it will open. If you click on the same part again, the group will close.

The group nodes and the total number of nodes are arranged according to their center.

The total number of nodes must be displayed within a black circle, and smaller groups should be placed in larger ones.

Expanding group nodes displays dependent nodes by size.

The small group nodes cannot be displayed outside of a large group node.

    def ask_to_AGEDV():
  prompt=input("Please enter your question:")
  try:
     question=query.format(question=prompt)
     result=db_chain.run(question)
     print(result)
     return result
  except Exception as e:
     print(e)
ask to AGEDB()
    

Shape

By default, all edges are represented with a solid line and an arrow. However, it is also possible to use curved lines and self-loop edges if required.

Solid line: Solid edges have their thickness adjusted according to their weight.
Curved line: Curved edges serve the same function as solid edges, but must be used when a straight edge already exists in the same direction.
Self-loop: A self-loop edge has the same node at both ends.

If there is already a straight edge displayed between two nodes, any additional edges should be curved in either direction.

When there is an odd number of edges between two nodes, place a straight edge in the center of the group of edges. If there is an even number of edges, arrange them according to their division on both sides.

If a straight edge is shown between two nodes, additional edges should curve in either direction.

Don't display curved edges without a straight edge.

    def ask_to_AGEDV():
  prompt=input("Please enter your question:")
  try:
     question=query.format(question=prompt)
     result=db_chain.run(question)
     print(result)
     return result
  except Exception as e:
     print(e)
ask to AGEDB()
    

Color

Edge color is organized with two colors: Edge line (#59607A) and Label name (#000000). However, other colors may be added depending on the situation.
In case an edge is selected, its stroke line should be highlighted with the designated color (#00E3DB). When a node is deactivated, the original color should be applied with an opacity of 0.2.

    def ask_to_AGEDV():
  prompt=input("Please enter your question:")
  try:
     question=query.format(question=prompt)
     result=db_chain.run(question)
     print(result)
     return result
  except Exception as e:
     print(e)
ask to AGEDB()
    

Thickness

By default, the edge borderline should have a thickness of 1px, but you can adjust it using edge weight. There are six levels of thickness to choose from, as shown in the image.
If you want to insert an edge label and arrow, you should use a thick edge with a weight of 5 to 20. On the other hand, edges with a weight less than 1 should have a thin line with a thickness of 0.5px.

    def ask_to_AGEDV():
  prompt=input("Please enter your question:")
  try:
     question=query.format(question=prompt)
     result=db_chain.run(question)
     print(result)
     return result
  except Exception as e:
     print(e)
ask to AGEDB()
    

Thickness(Curved Line)

As mentioned above, the curved edge adheres to the guidelines set out by the straight-edge manual.

    def ask_to_AGEDV():
  prompt=input("Please enter your question:")
  try:
     question=query.format(question=prompt)
     result=db_chain.run(question)
     print(result)
     return result
  except Exception as e:
     print(e)
ask to AGEDB()
    

Direction

In general, edge direction can be categorized into undirected and directed edges. A left/right edge is determined by the direction property, and a bi-directional edge should be depicted as a solid line without arrows.

The direction property determines the edge.

Do not show a bi-directional edge with two arrows. It should be represented by an undirected line.

    def ask_to_AGEDV():
  prompt=input("Please enter your question:")
  try:
     question=query.format(question=prompt)
     result=db_chain.run(question)
     print(result)
     return result
  except Exception as e:
     print(e)
ask to AGEDB()
    

Label Name

The edge label is centered on an edge line. If the label exceeds 8 characters in English or 6 characters in Korean, it should be truncated and replaced with '...'

Icon

To highlight a specific function, an icon can be added to an edge. This icon is centered on the edge line and is accompanied by the edge label below it. The type of icon used is the same as the one used for nodes. In addition, you can apply different colors or shapes that align with the domain data.

    def ask_to_AGEDV():
  prompt=input("Please enter your question:")
  try:
     question=query.format(question=prompt)
     result=db_chain.run(question)
     print(result)
     return result
  except Exception as e:
     print(e)
ask to AGEDB()
    

N:1

In a graph, nodes can be connected to multiple edges. However, to make certain edges more visible, they are expressed as curved lines. Group nodes can only be resized based on their relationships within the graph.
If a node is connected to more than 7 edges, white space (18px) is added along the node and arrows of edges begin from the white space.

OverEdge Node

If a node is connected to more than 7 edges, white space (18px) is added along the node and arrows of edges begin from the white space.

    def ask_to_AGEDV():
  prompt=input("Please enter your question:")
  try:
     question=query.format(question=prompt)
     result=db_chain.run(question)
     print(result)
     return result
  except Exception as e:
     print(e)
ask to AGEDB()
    

N:M

In an N:M relationship, the entire graph adjusts based on screen size. However, certain elements, such as arrows or icons, may be hidden during zoom-out, but become visible when zoomed in.

Overlapping Node

If nodes overlap, distinguish them by adding white lines(1px, #ffffff) between.

    def ask_to_AGEDV():
  prompt=input("Please enter your question:")
  try:
     question=query.format(question=prompt)
     result=db_chain.run(question)
     print(result)
     return result
  except Exception as e:
     print(e)
ask to AGEDB()
    

Highlight(Select graph)

When selecting graphs, you can select a graph of groups connected groups and select individual graphs. In this case, highlight around the node, and for edges, apply full colors to highlight.

Color list:
#00E3DB

Deactivation

The deactivated graph gives transparency(Opacity: 0.3) in this color so that it can be seen compared to the activated color.

    def ask_to_AGEDV():
  prompt=input("Please enter your question:")
  try:
     question=query.format(question=prompt)
     result=db_chain.run(question)
     print(result)
     return result
  except Exception as e:
     print(e)
ask to AGEDB()
    

Zoom

When the default screen percentage is set to 100%, you will see the arrow indicating the edge direction, but the label names will be omitted.
However, if you increase the screen percentage to the maximum (e.g., 200%), you will be able to see both the edge direction and the label names in detail. Conversely, if you decrease the screen percentage to the smallest lower surface (e.g., 25%), you will only be able to see the connected edges of the graph.

    def ask_to_AGEDV():
  prompt=input("Please enter your question:")
  try:
     question=query.format(question=prompt)
     result=db_chain.run(question)
     print(result)
     return result
  except Exception as e:
     print(e)
ask to AGEDB()
    

Pathfinding : Find a route between two nodes(start/end)

After selecting the start and end nodes, the connecting path is highlighted in path color (#E54F35). Both nodes are also highlighted in different colors(#3E7ED1). The second and third paths(#959BA7) are also displayed, providing additional options.

    def ask_to_AGEDV():
  prompt=input("Please enter your question:")
  try:
     question=query.format(question=prompt)
     result=db_chain.run(question)
     print(result)
     return result
  except Exception as e:
     print(e)
ask to AGEDB()
    

Pathfinding : Multiple routes through an intermediate node

To find the path between an intermediate node and an end node, the system detects which path goes through the intermediate node and becomes the passage. In the intermediate node visualization, the node is segmented into pie charts based on the number of paths and colors that pass through it.

    def ask_to_AGEDV():
  prompt=input("Please enter your question:")
  try:
     question=query.format(question=prompt)
     result=db_chain.run(question)
     print(result)
     return result
  except Exception as e:
     print(e)
ask to AGEDB()
    

Pattern Detection

The graph pattern maintains constant thickness and applies a highlighted color(#00E3DB) to search graphs, while excluded graphs are represented with transparency in existing colors to inactivate them.

    def ask_to_AGEDV():
  prompt=input("Please enter your question:")
  try:
     question=query.format(question=prompt)
     result=db_chain.run(question)
     print(result)
     return result
  except Exception as e:
     print(e)
ask to AGEDB()