Introduction
This is a guide to the fundamental principles and application of the company's graph visualization identity. It ensures consistent branding in various product and user situations. Familiarize yourself with the basic principles and use them appropriately.
Graphic elements are for reference only. Use them to develop tailored graph visualization guidelines for future product development.
This guide is used by analysts, planners, marketers, and other users of "Graphizer" and "AGE Viewer" products. It provides easy and convenient graph visualization for each function.
.jpg)
Visualization Concept
Accessible
The guide has been structured in a user-friendly way, making it easier to comprehend complex data by incorporating various features.
Intuitive
Using a graph database, it presents an intuitive visual structure to derive insights.
Flexible
It offers diverse graph visual structures and adapts to various data types.
Color
The primary color collection includes five colors(#7AB74D, #EDAF08, #000000, #3E7ED1, #3E7ED1) centered around blue, with one color(#59607A) designated for edges to ensure visibility when combined with various node colors. Additionally, we provide colors of graph highlighting(#00E3DB) and deactivating(#CDDEF3) as sub-color. In certain situations, three to four additional colors may be added and utilized.
%402x.jpg)
Dark Theme
When you apply dark mode, the color black is removed, and the edge color changes from the existing dark gray to white. Moreover, when you select a node, the stroke color of the node is changed to a bright color so that the color palette is more visible against the dark background.
%402x.jpg)
Font
The label names of the nodes and edges will use the 'Medium' font type from 'Red Hat Display', which is one of the Google Fonts. This font type is the same as the one used in our existing products, and it is highly visible due to its uniformity and wide font area. For nodes and edge labels, we will use the 'SemiBold' type, and for group nodes, we recommend using the 'Bold' type. The font size should not be smaller than 8px or larger than 24px.
Icon
It is recommended to use a style that consists of a round corner icon shape filled with colors inside, and a single color. To apply icons, you can provide a list of icons that enter nodes and edges using ‘FontAwesome’ and ‘Bootstrap Icon’.
Use a style that consists of a round corner icon shape filled with colors inside.
It is not allowed to use a style that is line-shaped and combines two or more colors.