SVG-based pictographic tree data visualization method and system

Abstract

The invention discloses an SVG (scalable vector graphics)-based pictographic tree data visualization method, which comprises the following steps: acquiring a data set which comprises nodes belonging to different data levels, and performing weighted calculation on the nodes to obtain a weighted data set; rearranging the weighted data set to obtain a centered data set which is centered on the whole; according to the data hierarchy, nodes of the centered data set are discretely arranged to obtain discrete points, and the discrete points are not intersected with each other and are distributed in a crown shape; the discrete points are connected to obtain branches which are not crossed, a tree-shaped display graph is formed, and the branches are distributed in a crown shape. According to the technical scheme, the visualized degree of view presentation is improved.

Description

Technical Field

[0001] This invention belongs to the field of data visualization technology, specifically relating to a data visualization method and system based on SVG pictographic trees. Background Technology

[0002] With the advent of the era of big data and the Internet of Things, data content is experiencing exponential growth. The large scale, heterogeneity, diversity, and loose organization of data pose challenges to people's effective access to information and knowledge. Therefore, the data industry has introduced data visualization to facilitate users' quick access to data information.

[0003] Currently, there are many data visualization tools available, with D3.js being the most commonly used. Its main feature is its data-driven approach to document manipulation. Compared to many other data visualization frameworks, D3.js does not restrict visualization formats, offering powerful control and flexibility. However, D3.js focuses on data capabilities, and its display rules are more geared towards professional users, failing to provide users with a direct perception of concrete, figurative objects. Therefore, improving the concreteness of the view presentation has become one of the problems that needs to be solved. Summary of the Invention

[0004] To address the shortcomings of existing technologies, this invention discloses a data visualization method based on SVG pictographic trees, comprising: Obtain a dataset, which includes nodes belonging to different data levels; perform weighted calculations on the nodes to obtain a weighted dataset; rearrange the weighted dataset to obtain a centered dataset. The nodes of the central dataset are discretely arranged according to the data hierarchy to obtain discrete points, which do not intersect each other and are distributed in a canopy shape. Connecting the discrete points yields non-intersecting branches, forming a tree-like diagram where the branches are distributed in a canopy-like pattern.

[0005] Furthermore, it also includes fine-tuning the tree-like display diagram based on display defects, wherein the display defects include one or a combination of tree-shaped depressions, uneven distribution of discrete points, and branch intersections.

[0006] Furthermore, the formula for the weighted calculation is as follows:

[0007] Where x represents the base weight multiple, and n is the number of child nodes of the current node.

[0008] Furthermore, the more levels and the greater the number of child nodes a node has, the greater its weight. Nodes with higher weights have larger areas, and the branches containing those nodes are thicker.

[0009] Furthermore, the weights of nodes at the same data level are compared.

[0010] Furthermore, the rearrangement of the weighted dataset to obtain a centered dataset includes: determining the weight of the current node based on the depth of the current node's hierarchy and the number of child nodes attached to the current node; at the same hierarchy depth, nodes with more child nodes have higher weights and nodes with higher weights are closer to the center position.

[0011] Furthermore, the step of discretizing the nodes of the central dataset according to the data hierarchy includes: Determine the starting point, and based on the starting point, determine the semicircular areas corresponding to the first and second levels in the data hierarchy; calculate the angle and position occupied by the nodes in the first and second levels according to their weights, and discretly arrange them in the semicircular areas with the starting point as the contraction direction. Based on the proportion of the number of child nodes in the third level of the first-level nodes and the number of child nodes in the third level, a first distribution threshold and a first virtual circle center, a second distribution threshold and a second virtual circle center, and a third distribution threshold and a third virtual circle center are set. The first virtual circle formed by the first distribution threshold and the first virtual circle center intersects with the second virtual circle formed by the second distribution threshold and the second virtual circle center. The second virtual circle formed by the second distribution threshold and the second virtual circle center intersects with the third virtual circle formed by the third distribution threshold and the third virtual circle center. Based on the opening angle and intersection of the first, second, and third virtual circles, the distribution range of the child nodes in the third level is determined and they are discretely arranged.

[0012] Furthermore, the process of connecting the discrete points to obtain non-intersecting branches to form a tree-like display diagram includes: determining the nodes in the data level based on the preset number of nodes in each branch, and combining and connecting them to form branches; the nodes located at the midpoint of the branches shrink based on a preset variable to realize the bending curve of the branches and form the basic shape of the tree crown.

[0013] Furthermore, the data hierarchy is three-level, including a first level, a second level, and a third level.

[0014] The technical solution of the present invention also provides a data visualization system based on SVG pictographic tree, comprising: An acquisition unit is used to acquire a dataset, which includes nodes belonging to different data levels. The nodes are weighted to obtain a weighted dataset. The weighted dataset is rearranged to obtain a centered dataset. Discrete units are used to discretely arrange the nodes of the central dataset according to the data hierarchy to obtain discrete points, which do not intersect each other and are distributed in a canopy-like manner. A connecting unit is used to connect the discrete points to obtain non-intersecting branches, forming a tree-like display diagram, wherein the branches are distributed in a crown-like shape.

[0015] This invention, by adopting the above technical solutions, has significant technical effects: The invention achieves a tree canopy display method based on real-world scenarios by using node weighting, discrete arrangement, and connection. The technical solution of this invention can accurately draw trees under various data formats. After dynamic drawing is completed, simple manual intervention can be used to achieve the goal of data visualization while ensuring visual fidelity. Attached Figure Description

[0016] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art 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.

[0017] Figure 1 This is a schematic diagram of the SVG-based pictographic tree data visualization method provided by the present invention; Figure 2 This is a schematic diagram of the SVG-based pictographic tree data visualization system provided by the present invention; Figure 3 This is a schematic diagram illustrating the centering of the dataset provided by the present invention; Figure 4 This is a schematic diagram of the discrete arrangement of the first two levels of the dataset provided by this invention; Figure 5 This is a schematic diagram of the tree of the first two levels of nodes in the dataset provided by this invention; Figure 6 This is a schematic diagram of the third-level discrete arrangement of the dataset provided by this invention; Figure 7 This is a schematic diagram of the discrete arrangement of nodes in the third level of the dataset provided by this invention; Figure 8 This is a schematic diagram of the tree branch rule provided by the present invention; Figure 9This is a schematic diagram of the SVG pictographic tree provided by the present invention; Figure 10 This is a schematic diagram of the adjusted SVG pictogram tree provided by the present invention. Detailed Implementation

[0018] The present invention will be further described below with reference to the accompanying drawings and embodiments. The following embodiments are explanations of the present invention, but the present invention is not limited to the following embodiments.

[0019] Current technical solutions, such as D3.js, focus on data capabilities, aiming to visualize the data itself. However, the rules for this visualization are geared towards professionals. While adhering to the inherent rules of the data, they neglect the actual user's visual experience. The technical solution of this invention, while visualizing data, allows users to directly perceive concrete, figurative objects (trees).

[0020] The technical solution of this invention enables the display of hierarchical data as a tree of specific pictographic objects; based on changes in the data, it can automatically adjust the overall shape of the tree; and based on the automatic display capability, it can enable manual intervention for fine-tuning.

[0021] The specific description is as follows: like Figure 1 A data visualization method based on SVG pictographic trees, comprising: S1, Obtain the dataset, which includes nodes belonging to different data levels; perform weighted calculations on the nodes to obtain a weighted dataset; rearrange the weighted dataset to obtain a centered dataset. S2, the nodes of the central dataset are discretely arranged according to the data hierarchy to obtain discrete points, which do not intersect each other and are distributed in a canopy shape; S3, connect the discrete points to obtain non-intersecting branches, forming a tree-like display diagram, wherein the branches are distributed in a crown shape.

[0022] It may also include fine-tuning the tree-like display diagram based on display defects, wherein the display defects include one or a combination of tree-shaped depressions, uneven distribution of discrete points, and branch intersections.

[0023] The weighted calculation can be:

[0024] Where x represents the base weight multiple.

[0025] The data hierarchy is three levels, including a first level, a second level, and a third level. The more levels and the greater the number of child nodes a node has, the greater its weight. Nodes with higher weights have larger areas, and the branches they belong to are thicker. Nodes at the same data level have their weights compared.

[0026] The process of rearranging the weighted dataset to obtain a centered dataset includes: determining the weight of the current node based on the depth of the current node's hierarchy and the number of child nodes attached to the current node; at the same hierarchy depth, nodes with more child nodes have higher weights and nodes with higher weights are closer to the center position.

[0027] The step of discretely arranging the nodes of the centered dataset according to the data hierarchy includes: determining a starting point; determining the semicircular areas corresponding to the first and second levels in the data hierarchy based on the starting point; calculating the angle and position occupied by the nodes in the first and second levels according to their weights and discretely arranging them in the semicircular areas with the starting point as the contraction direction. Based on the proportion of the number of child nodes in the third level of the first-level nodes and the number of child nodes in the third level, a first distribution threshold and a first virtual circle center, a second distribution threshold and a second virtual circle center, and a third distribution threshold and a third virtual circle center are set. The first virtual circle formed by the first distribution threshold and the first virtual circle center intersects with the second virtual circle formed by the second distribution threshold and the second virtual circle center. The second virtual circle formed by the second distribution threshold and the second virtual circle center intersects with the third virtual circle formed by the third distribution threshold and the third virtual circle center. Based on the opening angle and intersection of the first, second, and third virtual circles, the distribution range of the child nodes in the third level is determined and they are discretely arranged.

[0028] The process of connecting the discrete points to obtain non-intersecting branches and forming a tree-like display diagram includes: determining the nodes in the data level based on the preset number of nodes in each branch, and combining and connecting them to form branches; the nodes located at the midpoint of the branches shrink based on a preset variable to realize the bending curve of the branches and form the basic shape of the tree crown.

[0029] like Figure 2 The present invention also provides a data visualization system based on SVG pictographic trees, comprising: The acquisition unit 10 is used to acquire a dataset, which includes nodes belonging to different data levels. The nodes are weighted to obtain a weighted dataset. The weighted dataset is rearranged to obtain a centered dataset. Discrete unit 20 is used to discretely arrange the nodes of the central dataset according to the data hierarchy to obtain discrete points, which do not intersect each other and are distributed in a canopy shape. The connecting unit 30 is used to connect the discrete points to obtain non-intersecting branches, forming a tree-like display diagram, wherein the branches are distributed in a crown-like shape.

[0030] In practice: First, the data is weighted and rearranged to ensure overall data centering. Second, the points are discretely arranged according to the data hierarchy to ensure no overlap and to maintain the tree shape. Large amounts of data can be enlarged for complete display. Third, branches are connected based on the arranged points to prevent intersections and maintain the tree shape. Fourth, the automatic arrangement and display capabilities allow for manual fine-tuning to achieve a more perfect design.

[0031] For example: like Figure 3 After obtaining dataset 100, weighted calculations are performed on the nodes in the dataset, and the dataset is rearranged to ensure the overall centering of the nodes, resulting in a centered dataset 200. Typically, the dataset is defined as a linked list structure. For a tree, not only the number of child nodes but also the depth of the child nodes are considered to ensure that the densest branches of the tree are in the center. The specific weighted algorithm is as follows:

[0032] For weights at the same level, the base multiplier of the weight is the same x. The deeper the level, the larger the weight of the data. For example, for a set of node data [A1: [B1, B2: [C1, C2]], A2: [B3: [C3:[D1]]]], where C1, C2, and D1 all have a weight of 1, while C3, which is at the same depth as C1 and C2, has a weight of 2. This allows C3, with more child nodes, to have a larger proportion. In practical applications, this allows C3 to have a larger proportion, thus conforming to the natural law that more branches result in thicker branches. The same rule is applied upwards level by level to derive the weight of each node. Weights are only valid for comparison within the same level, thus achieving the effect of branches growing upwards level by level.

[0033] like Figure 4The nodes of the central dataset are discretely arranged according to the data hierarchy to obtain discrete points. These discrete points do not intersect and are distributed in a canopy-like pattern (taking level 3 data as an example): For the concentric circle rule of the first two levels of main branches: the core focus of the entire page (i.e., the starting point) is determined, and the nodes of the first two levels are distributed according to their weights within the corresponding semicircular areas 300 (usually, the nodes of the first level are distributed within the semicircular areas, and the nodes of the second level are distributed within the concentric circular areas). Based on their respective weights, the angle occupied by the current node is calculated to determine the specific positioning direction. Simultaneously, the nodes converge towards the center point according to random rules, simulating the intricate structure of a tree 400, such as... Figure 5 As shown.

[0034] Determine the center of the distribution range of the nodes in the third level and the distribution range of the nodes themselves. Extend the distribution range of the third-level sub-points of each level from the nodes in the first level. Figure 6 and Figure 7 The lengths of a, b, and c are derived based on the proportion of third-level nodes among the first-level child nodes, while also ensuring that the centers of the virtual circles intersect. Based on the opening angle and the intersection angle, the distribution range of the outermost layer's circle 500 is determined. The formulas for calculating the opening angle and the intersection angle are as follows:

[0035]

[0036] Based on the number of branches, the combination method is determined. Typically, groups of 5 nodes or 3 nodes are chosen to create a branch diagram. For example... Figure 8 As shown, the branching pattern is achieved by contracting the branches based on a variable at the midpoint of 60°, thus simulating the basic shape of the tree crown at 70°. Figure 9 As shown in Figure 10, based on the automatic arrangement, the adjustable virtual points and the automatic adjustment capability of the specific points are exposed. After each point is adjusted, the branches are reconnected according to the established rules, so as to better restore the shape of tree 800.

[0037] The technical solution of this invention has the ability to visualize data through tree morphology; it dynamically adjusts the tree display form based on random data to ensure the tree's fidelity; and in scenarios based on real visual trees, it can enhance the visual fidelity through micro-human intervention.

[0038] Various changes and modifications made without departing from the spirit and scope of this invention, and all equivalent technical solutions, also fall within the scope of this invention.

[0039] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on the differences from other embodiments. The same or similar parts between the various embodiments can be referred to each other.

[0040] Those skilled in the art will understand that embodiments of the present invention can be provided as methods, apparatus, or computer program products. Therefore, the present invention can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the present invention can take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0041] This invention is described with reference to flowchart illustrations and / or block diagrams of the method, terminal device (system), and computer program product according to the invention. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing terminal device to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing terminal device, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0042] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing terminal device to operate in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0043] These computer program instructions can also be loaded onto a computer or other programmable data processing terminal equipment, causing a series of operational steps to be performed on the computer or other programmable terminal equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable terminal equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0044] It should be noted that: The phrase "an embodiment" or "an embodiment" used in this specification means that a particular feature, structure, or characteristic described in connection with the embodiment is included in at least one embodiment of the invention. Therefore, the phrase "an embodiment" or "an embodiment" appearing in various places throughout the specification does not necessarily refer to the same embodiment.

[0045] Furthermore, it should be noted that the shapes and names of the components in the specific embodiments described in this specification may differ. All equivalent or simple variations made to the structure, features, and principles described in this patent concept are included within the protection scope of this patent. Those skilled in the art to which this invention pertains may make various modifications or additions to the described specific embodiments or use similar methods to substitute them, as long as they do not depart from the structure of this invention or exceed the scope defined in these claims, they should all fall within the protection scope of this invention.

Claims

1. A data visualization method based on SVG pictographic trees, characterized in that, Includes the following steps: Obtain a dataset, which includes nodes belonging to different data levels; perform weighted calculations on the nodes to obtain a weighted dataset; rearrange the weighted dataset to obtain a centered dataset. The nodes of the central dataset are discretely arranged according to the data hierarchy to obtain discrete points, which do not intersect each other and are distributed in a canopy shape. Connecting the discrete points yields non-intersecting branches, forming a tree-like diagram where the branches are distributed in a canopy-like pattern.

2. The SVG-based pictographic tree data visualization method according to claim 1, characterized in that, It also includes fine-tuning the tree-like display diagram based on display defects, wherein the display defects include one or a combination of tree-shaped depressions, uneven distribution of discrete points, and branch intersections.

3. The SVG-based pictographic tree data visualization method according to claim 1, characterized in that, The formula for the weighted calculation is: Where x represents the base weight multiple, and n is the number of child nodes of the current node.

4. The SVG-based pictographic tree data visualization method according to claim 1, characterized in that, The more levels and the greater the number of child nodes a node has, the greater its weight. Nodes with higher weights have larger areas, and the branches containing those nodes are thicker.

5. The SVG-based pictographic tree data visualization method according to claim 4, characterized in that, Nodes at the same data level are compared in weight.

6. The SVG-based pictographic tree data visualization method according to claim 1, characterized in that, The process of rearranging the weighted dataset to obtain a centered dataset includes: determining the weight of the current node based on the depth of the current node's hierarchy and the number of child nodes attached to the current node; at the same hierarchy depth, nodes with more child nodes have higher weights and nodes with higher weights are closer to the center position.

7. The SVG-based pictographic tree data visualization method according to claim 1, characterized in that, The step of discretizing the nodes of the centered dataset according to the data hierarchy includes: Determine the starting point, and based on the starting point, determine the semicircular areas corresponding to the first and second levels in the data hierarchy; calculate the angle and position occupied by the nodes in the first and second levels according to their weights, and discretly arrange them in the semicircular areas with the starting point as the contraction direction. Based on the proportion of the number of child nodes in the third level of the first-level nodes and the number of child nodes in the third level, a first distribution threshold and a first virtual circle center, a second distribution threshold and a second virtual circle center, and a third distribution threshold and a third virtual circle center are set. The first virtual circle formed by the first distribution threshold and the first virtual circle center intersects with the second virtual circle formed by the second distribution threshold and the second virtual circle center. The second virtual circle formed by the second distribution threshold and the second virtual circle center intersects with the third virtual circle formed by the third distribution threshold and the third virtual circle center. Based on the opening angle and intersection of the first, second, and third virtual circles, the distribution range of the child nodes in the third level is determined and they are discretely arranged.

8. The SVG-based pictographic tree data visualization method according to claim 1, characterized in that, The process of connecting the discrete points to obtain non-intersecting branches, forming a tree-like diagram, includes: Based on the preset number of nodes in each branch, the nodes in the data level are determined and combined to form branches; the nodes located at the midpoint of the branches shrink based on preset variables to realize the bending curve of the branches and form the basic shape of the tree crown.

9. The SVG-based pictographic tree data visualization method according to claim 1, characterized in that, The data hierarchy is three levels, including the first level, the second level, and the third level.

10. A data visualization system based on SVG pictographic trees, characterized in that, include: An acquisition unit is used to acquire a dataset, which includes nodes belonging to different data levels, and to perform weighted calculations on the nodes to obtain a weighted dataset. The weighted dataset is rearranged to obtain a centered dataset. Discrete units are used to discretely arrange the nodes of the central dataset according to the data hierarchy to obtain discrete points, which do not intersect each other and are distributed in a canopy-like manner. A connecting unit is used to connect the discrete points to obtain non-intersecting branches, forming a tree-like display diagram, wherein the branches are distributed in a crown-like shape.

Images