An efficient intelligent graphical data visualization solution system based on AntV

Abstract

The application provides an efficient intelligent graphical data visualization solution system based on AntV, and belongs to the field of Internet.The application solves the problems of low rendering efficiency of large-scale data, poor adaptability of layout algorithm, insufficient intelligentization of interactive experience, high multi-terminal adaptation cost and the like in the prior art by means of a data preprocessing module, an intelligent layout engine, a dynamic rendering optimization module, a self-adaptive interactive system and a multi-terminal self-adaptive adaptation module.

Description

Technical Field

[0001] This invention relates to the Internet field, and more particularly to a high-efficiency intelligent graphical data visualization solution system based on AntV. Background Technology

[0002] In the era of data explosion, the amount of data generated across industries is growing exponentially. When analyzing complex data relationships, traditional data visualization methods such as tables and simple charts are insufficient to intuitively present the intricate connections between data, especially for enterprises and research institutions. While some visualization tools exist, they suffer from the following shortcomings: Low efficiency in rendering large-scale data: Traditional solutions often cause page lag when rendering more than 100,000 nodes / edges due to high computational complexity and redundant rendering instructions, which cannot meet the needs of real-time interaction.

[0003] Poor adaptability of layout algorithms: Existing tools mostly use fixed layouts and cannot automatically select the optimal algorithm based on data characteristics (such as node degree distribution and community structure), resulting in layout overlap, severe edge crossing, and decreased readability.

[0004] The interactive experience lacks intelligence: users need to manually configure interactive logic such as zooming, filtering, and highlighting, and it lacks context awareness (e.g., it does not automatically recommend related nodes based on the current view focus).

[0005] High cost of multi-terminal adaptation: Different terminals (PC, mobile, large screen) have large differences in screen size and input method (mouse / touch). Traditional solutions require developing adaptation logic separately for each type of terminal, which is highly complex to maintain.

[0006] Therefore, how to achieve high-performance rendering of large-scale data, intelligent layout algorithms, intelligent interaction, and multi-terminal adaptation to meet the needs of complex data visualization is a technical problem that urgently needs to be solved. Summary of the Invention

[0007] Based on the above, this invention provides an efficient and intelligent graphical data visualization solution system based on AntV, which solves the problems of low efficiency in large-scale data rendering, poor adaptability of layout algorithms, insufficient intelligence in interactive experience, and high cost of multi-terminal adaptation in existing solutions.

[0008] The technical solution of this invention is: A high-efficiency intelligent graphical data visualization solution system based on AntV, including... The data preprocessing module collects data and performs preliminary processing on it.

[0009] The multi-platform adaptive module automatically adjusts the chart layout parameters and interaction methods according to the screen size of the terminal device, ensuring cross-platform compatibility.

[0010] The intelligent layout engine, based on a rule engine and a lightweight machine learning model (such as a decision tree), matches the optimal layout according to features to improve rendering effects.

[0011] The dynamic rendering optimization module improves rendering efficiency by batch rendering of nodes / edges of the same type and accelerating computation with the GPU.

[0012] The adaptive interaction module supports advanced operations such as intelligent prompts and gesture adaptation.

[0013] Furthermore, The data preprocessing module specifically includes the following functions: Clean the raw data to remove outliers and missing values.

[0014] The data is transformed and aggregated to generate the AntV / g6 standard data format {data: {nodes: [],edges:[], combos:[]}}.

[0015] Configuration instructions are as follows: nodes (node ​​list): Node data includes id: unique identifier, type: node type, style: node style, data: node data, combo: group to which it belongs, and status: status configuration; edges (edge ​​list): Edge data includes id: unique identifier, type: edge type, style: edge style, data: edge data, source: starting node, target: target node, status: status configuration; Combos (combo list): Combo data includes id: unique identifier, type: combo type, style: combo style, data: combo data, combo: group to which it belongs, and status: status configuration.

[0016] Furthermore, The intelligent layout engine integrates AntV / g6's built-in layout and custom algorithm layout, and achieves automatic adaptation through the following steps; a. Data feature extraction: Analyze the number of nodes (N), number of edges (E), average node degree (D), and number of communities (C) of the input graph data; b. Layout Algorithm Decision: Based on a rule engine and a lightweight machine learning model, the optimal layout is matched according to features. If N≤10,000 and C≥3, radial layout is preferred; If N > 10,000 and D < 5, select force-directed layout + multi-level aggregation; If D > 0.5, select the force-oriented layout; c. Incremental layout update: When dynamic data is added or deleted, only the node edges of the affected area are recalculated and rendered to avoid redrawing the entire map.

[0017] Furthermore, The dynamic rendering optimization module includes the following specific functions: a. Improve rendering efficiency using the AntV / g6-based WebGL rendering pipeline: b. Instanced Rendering: Batch rendering of nodes / edges of the same type, reducing the number of draw calls; c. Level of Detail (LOD) technology: Dynamically adjusts node edge details based on view zoom level. a) When the scaling ratio is greater than the set ratio, nodes are displayed as dots with labels, and edges are displayed as lines with labels; b) When the scaling ratio is less than the set ratio, the node is displayed as an icon with detailed attributes, and the edge is displayed as a line with detailed attributes; d. GPU-accelerated computation: The physical simulation of force-directed layout is migrated to the GPU and parallel computation is performed using shaders.

[0018] Furthermore, The adaptive interaction module specifically includes the following functions: Focus following: Detects nodes that are hovered over or clicked by the mouse, automatically zooms in on their subgraphs, and highlights associated edges; detects edges that are hovered over or clicked by the mouse and highlights associated nodes. Intelligent suggestions: Generate detailed dynamic tooltips based on node edge attributes; Gesture adaptation: Supports two-finger zoom and swipe pan on mobile devices, and scroll wheel zoom + right-click drag on PC.

[0019] Furthermore, Multi-platform adaptive adaptation module, specific functions include Layout parameter adaptation: Enable adaptive layout, reduce node size on mobile devices, and increase label size on large screens; Interaction mode switching: When touch input is detected, hide the mouse hover effect and enhance the click trigger logic; Visual style optimization: Adjust the bezel width according to the screen PPI to avoid visual blurring.

[0020] The beneficial effects of this invention are Intelligence: Intelligent layout enhances rendering effects; User-friendly interface: Dynamic status display, multi-dimensional interaction, and real-time alerts intuitively present data changes and anomalies; High efficiency: Performance optimization modules significantly reduce the rendering time of large-scale data. Cross-platform compatibility: No additional development required, multi-platform adaptation, reducing application costs. Attached Figure Description

[0021] Figure 1 This is a schematic diagram of the workflow of the present invention. Detailed Implementation

[0022] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are some embodiments of the present invention, but not all embodiments. All other embodiments obtained by those skilled in the art based on the embodiments of the present invention without creative effort are within the scope of protection of the present invention.

[0023] This invention provides an efficient and intelligent graphical data visualization solution system based on AntV. Through technologies such as a data preprocessing module, an intelligent layout engine, a dynamic rendering optimization module, an adaptive interaction system, and a multi-terminal adaptive adaptation module, it solves the problems of low efficiency in large-scale data rendering, poor adaptability of layout algorithms, insufficient intelligence in interactive experience, and high cost of multi-terminal adaptation in existing solutions.

[0024] 1) Data preprocessing module: a) Clean the original data to remove outliers and missing values; b) Convert and aggregate the data to generate the AntV / g6 standard data format {data: {nodes:[], edges:[], combos:[]}}. The configuration instructions are as follows: nodes (node ​​list): Node data includes (id: unique identifier, type: node type, style: node style, data: node data, combo: group to which it belongs, status: status configuration). edges (edge ​​list): Edge data includes (id: unique identifier, type: edge type, style: edge style, data: edge data, source: starting node, target: target node, status: status configuration). combos (combination list): Combination data includes (id: unique identifier, type: combination type, style: combination style, data: combination data, combo: group to which it belongs, status: status configuration). 2) Intelligent Layout Engine The intelligent layout engine integrates AntV / g6's built-in layouts (force-oriented, radial, circular, grid, random, mind map, etc.) and custom algorithm layouts, and achieves automatic adaptation through the following steps: a. Data feature extraction: Analyze statistical features of the input graph data, such as the number of nodes (N), the number of edges (E), the average degree of nodes (D), and the number of communities (C); b. Layout Algorithm Decision: Based on a rule engine and a lightweight machine learning model (such as a decision tree), the optimal layout is matched according to features. If N≤10,000 and C≥3, radial layout is preferred (emphasizing hierarchical relationships and community structure). If N > 10,000 and D < 5, choose force-directed layout + multi-level aggregation (to reduce computational complexity). c. Incremental layout update: When dynamic data is added or deleted, only the node positions of the affected areas are recalculated, avoiding a full map redraw.

[0025] 3) Dynamic rendering optimization module a. Improve rendering efficiency using the AntV / g6-based WebGL rendering pipeline: b. Instanced Rendering: Batch rendering of nodes / edges of the same type (such as similar devices or relationships) to reduce the number of draw calls; c. LOD (Level of Detail) technology: Dynamically adjusts node edge details based on view zoom level. a) When the scaling ratio is greater than a certain ratio, nodes are displayed as icons + labels, and edges are displayed as lines + labels; b) When the scaling ratio is less than a certain ratio, the node is displayed as a circle with detailed attributes, and the edge is displayed as a line with detailed attributes; d. GPU-accelerated computation: migrate the physical simulation of force-oriented layout (such as repulsive force and gravity calculation) to the GPU and use shaders for parallel computation; 4) Adaptive Interaction Module a. Focus Follow: Detects nodes that are hovered over or clicked by the mouse, automatically zooms in on their subgraphs, and highlights associated edges; detects edges that are hovered over or clicked by the mouse and highlights associated nodes. b. Smart suggestions: Generate dynamic tooltips based on node attributes (such as type and importance); c Gesture adaptation: Supports two-finger zoom and swipe pan on mobile devices, and supports scroll wheel zoom + right-click drag on PC.

[0026] 5) Multi-terminal adaptive adaptation module Layout parameter adaptation: Enable adaptive layout, reduce node size on mobile devices (default size reduced from 50px to 30px), and increase label size on large screens (default 12px increased to 16px). Interaction mode switching: When touch input is detected, hide the mouse hover effect and enhance the click trigger logic; Visual style optimization: Adjust the border width according to the screen PPI (pixel density) (when PPI>300, the border width is reduced from 1px to 0.5px) to avoid visual blurring.

[0027] The above description is merely a preferred embodiment of the present invention and is used only to illustrate the technical solution of the present invention, and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention are included within the scope of protection of the present invention.

Claims

1. A high-efficiency intelligent graphical data visualization solution system based on AntV, characterized in that, include The data preprocessing module collects data and performs preliminary analysis and processing on it; The multi-platform adaptive module automatically adjusts the chart layout parameters and interaction methods according to the screen size of the terminal device, ensuring cross-platform compatibility. The intelligent layout engine, based on a rule engine and a lightweight machine learning model, matches the optimal layout according to features to improve rendering effects; The dynamic rendering optimization module uses batch rendering of nodes / edges of the same type, GPU-accelerated computation to improve rendering efficiency, and WebGL to render large-scale graphs. The adaptive interaction module supports intelligent prompts and gesture adaptation.

2. The system according to claim 1, characterized in that, The data preprocessing module specifically includes the following functions: Clean the raw data to remove outliers and missing values; The data is transformed and aggregated to generate the AntV / g6 standard data format {data: {nodes: [],edges:[], combos:[]}}.

3. The system according to claim 2, characterized in that, Configuration instructions are as follows: The nodes list contains node data including id: unique identifier, type: node type, style: node style, data: node data, combo: group to which it belongs, and status: status configuration. The `edges` list contains the following information: `id` (unique identifier), `type` (edge ​​type), `style` (edge ​​style), `data` (edge ​​data), `source` (starting node), `target` (target node), and `status` (status configuration). Combos are lists of combinations, and the combination data includes id (unique identifier), type (combination type), style (combination style), data (combination data), combo (group to which it belongs), and status (status configuration).

4. The system according to claim 1, characterized in that, The intelligent layout engine integrates AntV / g6's built-in layout and custom algorithm layout, and achieves automatic adaptation through the following steps; a. Data feature extraction: Analyze the number of nodes N, number of edges E, average node degree D, number of communities C, and density D of the input graph data; b. Layout Algorithm Decision: Based on a rule engine and a lightweight machine learning model, the optimal layout is matched according to features. If N≤10.00 and C≥3, radial layout is preferred; If N > 10.00 and D < 5, select force-directed layout + multi-level aggregation; If D > 0.5, select the force-oriented layout; c. Incremental layout update: When dynamic data is added or deleted, only the node edges of the affected area are recalculated and rendered to avoid redrawing the entire map.

5. The system according to claim 1, characterized in that, The dynamic rendering optimization module specifically includes the following functions: a. Improve rendering efficiency using the AntV / g6-based WebGL rendering pipeline: b. Instanced Rendering: Batch rendering of nodes / edges of the same type, reducing the number of draw calls; c. Level of Detail (LOD) technology: Dynamically adjusts node edge details based on the view zoom level; d. GPU-accelerated computation: The physical simulation of force-directed layout is migrated to the GPU and parallel computation is performed using shaders.

6. The system according to claim 5, characterized in that, When the scaling ratio is greater than the set ratio, nodes are displayed as dots with labels, and edges are displayed as lines with labels. When the scaling ratio is less than the set ratio, the node is displayed as an icon with detailed attributes, and the edge is displayed as a line with detailed attributes.

7. The system according to claim 1, characterized in that, The adaptive interaction module specifically includes the following functions: Focus following: Detects nodes that are hovered over or clicked by the mouse, automatically zooms in on their subgraphs, and highlights associated edges; detects edges that are hovered over or clicked by the mouse and highlights associated nodes. Intelligent suggestions: Generate detailed dynamic tooltips based on node edge attributes; Gesture adaptation: Supports two-finger zoom and swipe pan on mobile devices, and scroll wheel zoom + right-click drag on PC.

8. The system according to claim 1, characterized in that, The multi-terminal adaptive adaptation module has the following specific functions: Layout parameter adaptation: Enable adaptive layout, reduce node size on mobile devices, and increase label size on large screens; Interaction mode switching: When touch input is detected, hide the mouse hover effect and enhance the click trigger logic; Visual style optimization: Adjust the bezel width according to the screen PPI to avoid visual blurring.

Images