A graph network interactive visualization method and device based on a magnetic field model

Abstract

This invention provides a graph network interactive visualization method and apparatus based on a magnetic field model, relating to the fields of information visualization and human-computer interaction. Starting from the evaluation indicators of graph aesthetics, it provides a more helpful visualization and human-computer interaction method for viewing and locating connection information in complex networks, promoting the continuity and regularity of reading, and facilitating the search for connection paths and the calculation of path counts within the graph. The method analogizes each node in the information network to a variable-sized magnet. Each node includes a starting node, a target node, and intermediate nodes traversed by each path between them. The starting node and the target node are located at opposite ends, and the intermediate nodes are arranged in an orderly fashion between the starting node and the target node according to their respective positions and relationships in the connection paths, forming a connection magnetic field of the magnetic field model. Each connection path constitutes a field line of the magnetic field model.

Description

Technical Field

[0001] This invention relates to the fields of information visualization and human-computer interaction technology, and in particular to a graph network interactive visualization method and apparatus based on a magnetic field model. Background Technology

[0002] In computers, much data is stored in a structured form and can be visualized as a network of nodes. To extract information from this data, tasks such as locating specific nodes, sorting the connections between nodes, and finding possible paths between nodes are typically required.

[0003] Based on the characteristics of data content and visualization, methods for visualizing network connectivity information typically fall into two main categories: node-linking diagrams and adjacency matrices. For example, force-directed graphs in node-linking diagrams display networks based on the data structure itself, using a spring model; Sankey flow diagrams visually display flow data; and arc diagrams effectively show factions and bridges within the network. Furthermore, adjacency matrices map data to matrix attributes, using color or saturation for pattern awareness; and treemaps present hierarchical structures and semantic information with high spatial efficiency.

[0004] Node-line graphs are good at displaying paths, but as the number of paths increases, they exhibit a "fluffy ball effect" with a large number of unevenly distributed nodes. Adjacency matrix graphs are good at displaying correspondences between information, but their display effect largely depends on the number and order of their rows and columns. When displaying the massive amount of connection information in modern networks, neither of these methods can show detailed data information or give users the ability to further explore information, exhibiting poor comprehensibility, usability, and aesthetics.

[0005] Therefore, it is necessary to study a graph network interaction visualization method and device based on a magnetic field model to address the shortcomings of existing technologies and solve or alleviate one or more of the above-mentioned problems. Summary of the Invention

[0006] In view of this, the present invention provides a graph network interactive visualization method and device based on a magnetic field model. Starting from the evaluation indicators of graph aesthetics, it provides a more helpful visualization and human-computer interaction method for viewing and locating connection information in complex network connection data, promotes the continuity and regularity of reading, and helps to find connection paths and calculate the number of paths in the graph.

[0007] On the one hand, the present invention provides a graph network interactive visualization method based on a magnetic field model. The method compares each node in the information network to a magnet of variable size. The node includes a starting node, a target node, and all intermediate nodes traversed by each connecting path between the two.

[0008] The starting node and the target node are located at both ends. The intermediate nodes are arranged in an orderly manner between the starting node and the target node according to their respective positions and relationships in the connection path, forming the connecting magnetic field of the magnetic field model; each connection path constitutes a field line of the magnetic field model.

[0009] In addition to the aspects described above and any possible implementation, a further implementation is provided in which the shape of the magnet block is rectangular, "L"-shaped, or "T"-shaped, and the orientation of the "L"-shaped and "T"-shaped blocks is adjusted according to the usage of the corresponding nodes in the connection path.

[0010] In addition to the aspects and any possible implementations described above, a further implementation is provided, wherein the steps of the method include:

[0011] S1. Obtain the path and number of nodes: Traverse all intermediate nodes and edges between the starting node and the target node to obtain all connecting paths from the starting node to the target node and the number of nodes on each connecting path;

[0012] S2, Expand Path and Sort: Depth-first traversal of each connection path to obtain node data on each connection path. Each connection path is a layer, and two or more layers with a common intermediate node are set up adjacently.

[0013] S3. Magnet Block Drawing: Based on the number of nodes in each connection path and the characteristics of the display area, calculate the shape parameters of each magnet block on each connection path, then merge the magnet blocks of common nodes between different paths, and finally draw the shape of each magnet block; the common nodes in this step include common intermediate nodes, initial nodes, and target nodes.

[0014] S4. Chart Color Mapping: Calculate the degree centrality of each node in the network and perform color mapping on each magnet block based on the degree centrality.

[0015] In addition to the aspects and any possible implementations described above, a further implementation is provided in which the principle for layer sorting of connection paths that do not have common nodes in step S2 is: arranged in ascending order of the number of nodes.

[0016] In addition to the aspects and any possible implementations described above, a further implementation is provided in which the shape parameters in step S3 specifically include: the longitudinal length of all intermediate node magnet blocks is equal, and the transverse length of all intermediate node magnet blocks in the same connection path is equal; the initial node and the target node magnet blocks are rectangular in shape, with their upper edges aligned with the upper edge of the uppermost connection path and their lower edges aligned with the lower edge of the lowermost connection path.

[0017] In addition to the aspects and any possible implementations described above, a further implementation is provided in which the principle for merging magnet blocks at a common intermediate node in two adjacent paths is that the lateral lengths of the two magnet blocks remain unchanged, and the two longitudinal edges of the magnet block with the smaller lateral length extend toward the magnet block with the larger lateral length until they are connected.

[0018] As described above, and considering any possible implementations, a further implementation is provided where the degree centrality is calculated in step S4 as follows: deg c，ij =deg in，ij +deg out，ij Among them, deg in,ij For node v ij in-degree, deg out,kj For node v ij The degree of departure.

[0019] In addition to the aspects and any possible implementations described above, a further implementation is provided in which the color mapping of each magnet block in step S4 is specifically performed as follows: the icon colors are mapped using the HSB color model, all magnet blocks have the same hue and brightness values, and the color saturation is determined according to its degree centrality. The greater the degree centrality, the higher the color saturation.

[0020] In addition to the aspects and any possible implementations described above, a further implementation is provided, wherein the method further includes:

[0021] S5. Chart Interaction: Drag the initial node magnet block to different target node magnet blocks. After the preset distance is met, the path result in step S1 is invoked to give a prompt on whether there is a connection between the initial node and the target node. If there is a connection, the magnet block drawn in step S3 and the color mapped in step S4 are invoked for display.

[0022] On the other hand, the present invention provides a graph network interactive visualization device based on a magnetic field model. The device includes a storage device storing a computer program, a processing device for running the computer program, a display device for displaying the processing results, and an interactive device for realizing human-computer interaction. The storage device, the display device, and the interactive device are all connected to the processing device. When the processing device runs the computer program, it can implement the content of any of the methods described above.

[0023] Compared with the prior art, one of the above technical solutions has the following advantages or beneficial effects: The method of the present invention starts from the evaluation index of graph aesthetics and provides a more helpful visualization and human-computer interaction method for viewing and locating connection information in complex networks;

[0024] Another technical solution in the above-mentioned technical solution has the following advantages or beneficial effects: The present invention forms information nodes in the network connection into geometric polygon magnet blocks composed of several horizontal lines and several vertical lines, so that the edges of the polygons are aligned with the grid, avoiding intersections, promoting the continuity and regularity of reading, and helping to locate and read the number of nodes in the chart.

[0025] Another technical solution in the above-mentioned technical solution has the following advantages or beneficial effects: The reading direction defined by the present invention presents a vertical scanning path. Since path continuity is an important factor in perceiving the shortest path, the one-dimensional reading direction of the chart improves readability and graphic aesthetics, and helps to find connection paths and calculate the number of paths in the chart.

[0026] Of course, any product implementing this invention does not necessarily need to achieve all of the technical effects described above at the same time. Attached Figure Description

[0027] To more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings used in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0028] Figure 1 This is a schematic diagram of the mapping between an information node and its connection path and a magnet block and its magnetic field, provided in one embodiment of the present invention.

[0029] Figure 2 This is a schematic diagram of a visual channel for a chart provided in one embodiment of the present invention;

[0030] Figure 3 This is a schematic diagram of an interactive method for a chart provided in an embodiment of the present invention; wherein, (a) is a schematic diagram of the process of establishing a connection between magnet blocks, and (b) is an unfolded diagram of a specific connection detail;

[0031] Figure 4 This is a schematic diagram illustrating the link relationship between the Wikipedia entries for "automation" and "industrial design" provided in one embodiment of the present invention. Detailed Implementation

[0032] To better understand the technical solution of the present invention, the embodiments of the present invention will be described in detail below with reference to the accompanying drawings.

[0033] It should be understood that the described embodiments are merely some, not all, of the embodiments of the present invention. All other embodiments obtained by those skilled in the art based on the embodiments of the present invention without inventive effort are within the scope of protection of the present invention.

[0034] This invention proposes a method for visualizing and interacting with network node information based on a magnetic field model, targeting connection information in complex networks. It aligns the nodes and edges of the graph with the grid to avoid edge intersections, promotes the continuity and regularity of reading, can display symmetry in certain data structures, and provides a human-computer interaction method for exploring network node connection information.

[0035] This invention analogizes each network information node to several variable-sized magnet blocks (specifically rectangular). These magnet blocks are joined together by connections between nodes. The overall connection between the source and target nodes is the magnetic field between the two magnets, while the specific connection between two nodes is the field line within that magnetic field. Details can be viewed by dragging the magnet blocks. In the visual channel, for the node's category attribute, the magnet blocks representing nodes with direct connection information can be stacked and positioned in an orderly fashion, much like magnet blocks in the real world. When a node is a shared node in multiple connection paths, the magnet's shape can be deformed into a right-angled polygon (specifically, an "L" or "T" shape pointing upwards or downwards) to reduce visual complexity. For the node's sequence attribute, the degree of each information node is mapped to the color saturation of the magnet block; the higher the node's degree, the higher the color saturation. Figure 1 This is a schematic diagram mapping information nodes and connections to magnet blocks and magnetic fields. Each network information node is an adjustable-size magnet in the diagram, the overall connection between the source node and the target node is the magnetic field between the two magnets, and the specific connection between two nodes is the field line in the magnetic field. The diagram is read in a horizontal one-dimensional direction. If the connections between data are bidirectional, then bidirectional reading is also possible.

[0036] The input of this invention is a dataset of connection information in a graph network, which includes each node in the graph network and the starting and ending nodes connected by each edge. The dataset containing connection information is analyzed, and the network node layout is optimized through methods such as layering, sorting, and merging, thereby outputting a visual chart of the entire dataset. Let G be an input network, represented by nodes and edges as G(V,E), where V is a set of n nodes {v1, v2, ..., v...}. n Let E be the set of m edges {e1, e2, ..., e...} m The specific steps of this invention include:

[0037] Step 1: Calculation of the number of paths and layers. For the target network structure to be visualized in this invention, there is one and only one node v0 with an in-degree of zero, which is the starting node (i.e., the source node), and one and only one node v with an out-degree of zero. n Let be the target node. Using a breadth-first search (BFS) approach, traverse all nodes and edges to find all k paths between the starting node and the target node, denoted as the set P{p1, p2, ..., p...}. k} and calculate the number of nodes contained in each path, denoted as set L{l1,l2,…,l k}, then the first i Let v be the j-th node in the path. ij Where 0 < i ≤ k, 0 < j ≤ l i The longest path is denoted as p. max The number of nodes it contains is l max The parameters for calculating the width of the magnet block to be generated.

[0038] Step 2: Path Expansion and Sort. Traverse each path from the starting node to the target node using depth-first search. Based on the number of nodes in each path, divide the k paths into layers of l. k Layers are defined by expanding the nodes within each layer. Each node resides within a layer, arranged from top to bottom in ascending order of the number of nodes contained in the path. The hierarchy is from l1 to l... k The process iterates through all nodes at each level. If the same node exists at the same level on different paths, these paths are rearranged into adjacent paths.

[0039] Step 3: Drawing and Merging Magnet Blocks. The purpose of this step is to calculate the shape parameters of each magnet block based on the characteristics of the network, distribute them as evenly as possible on the canvas, and merge the magnet blocks of common nodes. Let the width of the graph canvas be W, the height be H, and the initial width of each magnet block be W0, and the initial height be H0. The calculation is as follows:

[0040] W0 = W / l max

[0041] H0 = H / k

[0042] Let the initial positioning point of each magnet block be the coordinates of its upper left endpoint. For example, the positioning point of the q-th node in the i-th path is (x... ij y ij The calculation is as follows:

[0043] x ij =W(q-1) / l i

[0044] yij =H0(i-1)

[0045] Where 0 < i ≤ k, 0 < j ≤ l i .

[0046] For all nodes in the path, the initial rectangular magnet block diagram can be drawn sequentially from its location point to the right and down, according to the initial width W0 and the initial height H0.

[0047] Next is the merging of the magnet blocks, which involves two cases. For path p i If the path has no common nodes with its adjacent paths, then the width of the rectangular magnet block corresponding to its node expands and contracts by W from its center of symmetry to both ends. i =W / l i If the path has the same nodes as its adjacent paths, the width of the rectangular magnet block corresponding to these same nodes remains unchanged, and the height extends from its adjacent edge to the magnet block of its adjacent path, so that these same nodes share a common magnet block. The width of the magnet blocks corresponding to the remaining nodes is proportionally extended from their center of symmetry to both ends until they connect with the horizontally adjacent magnet blocks.

[0048] Step 4: Chart Color Mapping. Let node v in the network... ij The in-degree is deg in,ij The out-degree is deg out,kj Then the degree centrality of this node is deg. c，ij =deg in，ij +deg out，ij For all nodes in the graph, let the maximum degree centrality be deg. c,max Its minimum degree centrality is deg c,min If a magnet block is drawn from an independent node, its degree centrality inherits the degree centrality value of that node; if a magnet block is formed by merging nodes, its degree centrality is the sum of the degree centrality values ​​of the merged nodes minus the number of identical nodes in the in-degree calculation before merging.

[0049] The HSB color model is used to map the icon colors. All magnet blocks have the same hue and brightness values. The color saturation value S is determined by its degree centrality value; the higher the degree centrality, the higher the color saturation. Figure 2 As shown. Figure 2This is a visual representation of the chart's visual channels. In terms of spatial arrangement, the magnet blocks with directly connected information are arranged like magnets stacked in an orderly fashion in the real world. Their layout is defined by the connections to other magnets using a modular aesthetic. When a node is shared across multiple connections, the magnet's shape can be deformed into a right-angled polygon to reduce visual complexity, as shown in sub-magnet block 5 in the figure. Regarding color saturation, the degree of each information node maps to the color saturation of the magnet; the higher the node's degree, the higher the color saturation. For example, sub-magnet blocks 4 and 5 have a degree of 3, while the other magnets have a degree of 2.

[0050] Let S be the minimum and maximum values ​​of the color saturation in the chart. min S max S max ≥S min ≥0. Then node v ij The mapped color saturation is:

[0051]

[0052] Step 5: Chart Interaction Method. Add padding between different magnet blocks to ensure uniform spacing, facilitating user identification and operation. To establish a connection between two nodes, the user moves the source magnet block on the canvas towards different target magnet blocks to detect if a connection exists. If the degree of connection is within a certain range, a connection can be established. Just like the magnetic field lines between different poles of a magnet, a visual magnetic field is formed on the canvas, causing the source and target magnet blocks to attract each other, as shown... Figure 3 Magnet blocks 1 and 2 in (a). Otherwise, a warning sign will appear indicating that there is no connection, and the magnets will be repelled as if they were like poles of a magnet. Figure 3 Magnet blocks 1 and 3 in (a). After the connection is established, the magnet blocks attract each other, and only the source and target magnet blocks in the primary state are displayed. To obtain detailed connection information, the user can separate the source and target magnet blocks to display more details. When pulling begins, a visual magnetic field appears, and magnetic induction lines indicate the number of paths in the connection. As the user continues to pull, the child nodes of the paths appear to form a complete graph, such as... Figure 3 (b)

[0053] Figure 4 This is an application example of the present invention, illustrated by a diagram showing the linking relationship between the "Automation" and "Industrial Design" entries on Wikipedia. One possible application scenario for the present invention is using hyperlinks within web pages to reveal the relationships between different web pages on the internet, such as... Figure 4The example demonstrates the linking relationship between the Wikipedia entries for "automation" and "industrial design," with the visual link path shown below:

[0054] 1.Automation–Industry 4.0–Digital Modeling and Fabrication–RapidModelling–Industrial Design

[0055] 2.Automation–Multi-agent System–Human-based Genetic Algorithm–Human-computer Interaction–Donald Norman–Industrial Design

[0056] 3.Automation–Control Engineering–Interactive System Engineering–System Thinking-Design Thinking–Designer–Industrial Design

[0057] 4.Automation–Control Engineering–Interactive System Engineering–Usability–Hardware Interface Design–Interaction Design–Industrial Design

[0058] 5.Automation–Control Engineering–Interactive System Engineering–Usability–Interaction Design–Industrial Design

[0059] 6.Automation–Cognitive Computing–Usability-Hardware Interface Design–Interaction Design–Industrial Design

[0060] 7.Automation–Cognitive Computing–Usability–Hardware Interface Design–Interaction Design–Industrial Design

[0061] 8.Automation–Cognitive Computing–Usability–Interaction Design–Industrial Design.

[0062] The foregoing has provided a detailed description of a graph network interactive visualization method and apparatus based on a magnetic field model, as provided in the embodiments of this application. The descriptions of the embodiments above are merely for the purpose of helping to understand the method and its core ideas; furthermore, those skilled in the art will recognize that, based on the ideas of this application, there will be changes in the specific implementation methods and application scope. Therefore, the content of this specification should not be construed as a limitation of this application.

[0063] It should also be noted that the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a product or system comprising a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a product or system. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the product or system including said element. "Substantially" means within an acceptable margin of error, indicating that a person skilled in the art can resolve the technical problem and substantially achieve the technical effect within a certain margin of error.

[0064] The terminology used in the embodiments of this invention is for the purpose of describing particular embodiments only and is not intended to limit the invention. The singular forms “a,” “the,” and “the” used in the embodiments of this invention and the appended claims are also intended to include the plural forms unless the context clearly indicates otherwise. The term “and / or” as used herein is merely a description of the relationship between related objects, indicating that three relationships can exist; for example, A and / or B can represent: A alone, A and B simultaneously, and B alone. Additionally, the character “ / ” in this document generally indicates that the preceding and following related objects are in an “or” relationship. In the above embodiments, implementation can be achieved wholly or partially by software, hardware, firmware, or any combination thereof. When implemented in the form of a computer program product, which includes one or more computer instructions, when loaded or executed on a computer, all or part of the processes or functions described in the embodiments of this invention are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that integrates one or more available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., a solid state disk (SSD)).

Claims

1. A method for magnetic field model based graph network interaction visualization, characterized in that, The method analogizes each node in the information network to a variable-size magnet block, the nodes including a start node, a target node, and intermediate nodes through which each connection path passes; The start node and the target node are located at two ends, the intermediate nodes are sequentially arranged between the start node and the target node according to their positions and relationships in the connection paths, forming a connection magnetic field of the magnetic field model; and each connection path constitutes a field line of the magnetic field model. The method comprises the following steps: S1, obtaining the number of paths and nodes: traversing all intermediate nodes and edges between the start node and the target node to obtain all connection paths from the start node to the target node and the number of nodes on each connection path; A node v0 with in-degree of zero is the starting node, and a node v n with out-degree of zero is the target node. Using the breadth-first search method, all nodes and edges are traversed to find all k paths between the starting node and the target node, denoted as a set P{p1, p2, …, p k}, and the number of nodes in each path is calculated, denoted as a set L{l1, l2, …, l k}. The jth node in the ith path is denoted as v ij , where , ; the longest path is denoted as p max , and the number of nodes l max is a width calculation parameter of the magnet block to be generated. S2, expanding the paths and sorting: depth traversing each connection path to obtain node data on each connection path, each connection path being a layer, and two or more layers with common intermediate nodes being arranged adjacently; According to the number of nodes in each path, the k paths are respectively layered into l k layers, the nodes contained in each layer are unfolded, each node is located in one layer, and each layer is arranged in ascending order of the number of nodes contained in the path from top to bottom; in the unit of layer, from l1 to l k Each layer traverses all nodes in each layer, and if there are the same nodes in the same layer of different paths, the paths are rearranged as adjacent paths; S3, magnet block drawing: calculating shape parameters of each magnet block on each connection path according to the number of nodes of each connection path and display area characteristics, then merging magnet blocks of common nodes between different paths, and finally drawing the shape of each magnet block; the common nodes in this step include common intermediate nodes and the start node and the target node; Supposing that the width of the graph canvas is W and the height is H, the initial width of each magnet block is W0, and the initial height is H0, which are calculated as follows: Let the initial positioning point of each magnet block be the coordinate of the upper left end point of its rectangle, and the positioning point of the qth node in the ith path be which is calculated as: wherein , ; Then, for the nodes in all paths, the initial rectangular magnet block graph can be drawn from the positioning points of the nodes rightward and downward according to the initial width W0 and the initial height H0; Next is the work of merging the magnet blocks, there are two cases; for path p i , if the path and its adjacent path have no same node, then the width of the magnet block rectangle corresponding to its node is scaled from its center of symmetry to both ends as ; if the path and its adjacent path have same nodes, then the width of the magnet block rectangle corresponding to these same nodes remains unchanged, and the height is extended from its adjacent edge to the magnet block of its adjacent path, so that these same nodes share a magnet block, and the width of the magnet block corresponding to the remaining nodes is respectively scaled from its center of symmetry to both ends in equal proportion to meet the transversely adjacent magnet block; S4, graph color mapping: calculating the degree centrality of each node in the network, and color mapping each magnet block according to the degree centrality; Let the indegree of node v ij in the network be deg in,ij , and the outdegree be deg out,kj , then the degree centrality of the node is For all nodes in the graph, let the maximum value of the degree centrality be deg c,max , and the minimum value be deg c,min ; if the magnet block is drawn by an independent node, then its degree centrality inherits the degree centrality value of the node; if the magnet block is drawn by merging nodes, then its degree centrality is the sum of the degree centrality values of the merged nodes minus the number of the same nodes in the outdegree and indegree calculation before merging. The icon color is mapped using the HSB color model, the hue value and the brightness value of all magnet blocks being the same, and the color saturation value S being determined by the degree centrality value, the greater the degree centrality, the higher the color saturation; Let the minimum and maximum color saturation of the chart be S min , S max , ; then the color saturation of the node v ij mapped is: ， ， ； S5, graph interaction: dragging the start node magnet block to move toward different target node magnet blocks, mobilizing the path results in step S1 when the preset distance is met, and giving a prompt of whether a connection exists between the start node and the target node; if a connection exists, the magnet blocks drawn in step S3 and the color mapped in step S4 are displayed.

2. The magnetic field model based graph network interaction visualization method of claim 1, wherein, The shape of the magnet block is rectangular, "L" shaped, or "T" shaped, and the orientation of the "L" shaped and "T" shaped magnet blocks is adjusted according to the use of the corresponding nodes in the connection path.

3. A device for magnetic field model based graph network interaction visualization, the device comprising a storage device storing a computer program, a processing device for running the computer program, a display device for displaying the processing result, and an interaction device for realizing human-computer interaction; the storage device, the display device and the interaction device are connected with the processing device; characterized in that, The processing device can implement the content of the magnetic field model-based graph network interactive visualization method of claim 1 or 2 when running a computer program.

Images