Large-screen data visualization component library system based on adaptive algorithm and interactive optimization

Abstract

The invention discloses a large-screen data visualization component library system based on an adaptive algorithm and interactive optimization, and relates to the technical field of large-screen visualization, and the system comprises a layout and typesetting module which relies on a CasSowary constraint solver and realizes grid layout dynamically adapted to a multi-resolution screen by constructing a linear equation set; the chart generation module provides multiple types of chart components and supports dynamic data updating through a data binding interface; the expansion decoration module is used for generating a particle effect and dynamic decoration by adopting SPH fluid dynamics simulation and a GPU parallel rendering algorithm; the digital display module provides a plurality of dynamic digital display modes; the geographic visualization module supports loading of a user-defined map component, integrates various geographic data display forms, and realizes visual presentation of diversified geographic information; all the modules form an integrated large-screen visualization system through a unified event bus mechanism and a data format standard. According to the invention, diversified requirements of users in large-screen display can be met.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of large-screen visualization, and in particular to a large-screen data visualization component library system based on adaptive algorithms and interactive optimization. BACKGROUND

[0002] The rapid popularization of Internet technology has pushed human society into a new era of data-driven, and data visualization, as an important tool for information analysis, is undergoing revolutionary changes in its application form. Modern visualization technology breaks through the limitations of traditional static charts, using dynamic interaction and intelligent rendering techniques to make the presentation of complex data sets more cognitively friendly and efficient in information transmission. This technological evolution has penetrated into multiple dimensions such as text mining, spatio-temporal data analysis, and high-dimensional information processing, and plays a key role in decision support systems in fields such as smart cities, environmental monitoring, and energy scheduling, especially through large-size interactive screen devices to realize the intuitive transmission of data value.

[0003] The current large-screen visualization system faces the following technical bottlenecks:

[0004] 1. Rigid layout: Traditional template-based layout cannot adapt to multiple resolution screens and lacks dynamic adjustment capabilities.

[0005] 2. Low rendering efficiency: Complex visual effects (such as three-dimensional particles and dynamic maps) rely on high computing power, leading to lag.

[0006] 3. Poor functional extensibility: Single component type. SUMMARY

[0007] The present application provides a large-screen data visualization component library system based on adaptive algorithms and interactive optimization to address the needs and deficiencies of current technology development, aiming to provide rich data display and interactive functions to meet the diverse needs of users in large-screen display.

[0008] The large-screen data visualization component library system based on adaptive algorithms and interactive optimization of the present application employs the following technical solutions to solve the above technical problems:

[0009] A large-screen data visualization component library system based on adaptive algorithms and interactive optimization includes:

[0010] A layout and typesetting module that relies on the Cassowary constraint solver to build a linear equation system containing element coordinates, dimensions, and screen size constraints to achieve dynamic adaptation of grid layout for multiple resolution screens, while supporting layout style customization;

[0011] A chart generation module that provides multiple types of chart components and supports dynamic data updating and style customization through data binding interfaces;

[0012] The extended decoration module uses SPH fluid dynamics simulation and GPU parallel rendering algorithm to generate particle effects and dynamic decorations with high frame rates, enhancing the visual expression of large screens;

[0013] The digital display module provides a variety of dynamic digital presentation methods, enhancing the display expressiveness of digital information through innovative visual effects;

[0014] The geographic visualization module supports loading custom map components through the GeoJSON data format and integrates multiple geographic data display forms to achieve the visualization of diverse geographic information;

[0015] The six modules of layout and typesetting, chart generation, extended decoration, digital display and geographic visualization are connected through a unified event bus mechanism and data format standards, forming an integrated large-screen visualization system with layout adaptation, data linkage and visual complementarity.

[0016] Specifically, the six modules involved in layout and typesetting, chart generation, extended decoration, digital display, and geographic visualization achieve collaboration through data sharing and event mechanisms:

[0017] The layout module provides container size and position constraints for the chart generation module and geographic visualization module. When the screen resolution changes, the Cassowary solver is used to recalculate element coordinates and notify other modules to adjust the layout.

[0018] The chart generation module and the geographic visualization module share business data through the data binding interface;

[0019] The extended decoration module serves as a visual aid. The rendering level of its particle effects is controlled by the layout module. It also monitors the status changes of the chart generation module and the geographic visualization module to dynamically adjust the color and motion trajectory style of the particles.

[0020] The digital display module obtains key data from the chart generation module and the geographic visualization module, and highlights them in the form of dynamic numbers. Its position and size are constrained by the layout module. When the data is updated, the visual feedback is enhanced through animation effects, and the layout is coordinated with the chart generation module, geographic visualization module and extended decoration module.

[0021] Specifically, the layout module involved constructs a linear equation system containing element coordinates, dimensions, and screen size constraints:

[0022] Minimize∑ij(x i -x j ) 2 +(y i -y j ) 2 Limited by w i≤W max , h i ≤H max ,

[0023] where x i , y i are element coordinates, w i , h i are element width and height, W max , H max are screen maximum width and height.

[0024] More specifically, the layout module involved includes an adaptive layout engine;

[0025] When the screen resolution changes, the adaptive layout engine collects new boundary parameters W max and H max in real time, and the Cassowary constraint solver recalculates the optimal solution of element x i , y i , w i and h i according to the linear equation set containing element coordinates, size and screen size constraints, and drives the grid layout to adjust in real time.

[0026] More specifically, the layout module involved includes a preset template library, which integrates three types of typical business scenarios of smart city templates, industrial monitoring templates and environmental monitoring templates. Each type of layout scheme supports the visual configuration of page framework components, panel components, pop-up box components, header components, sidebar components and bottom components, covering the display needs of large screens in different business scenarios.

[0027] Specifically, the chart generation module provides at least three types of chart components among pie chart, ring pie chart, rose pie chart, column chart, three-dimensional column chart, line chart, half-circle striped ring chart and bidirectional bar chart, wherein:

[0028] Pie chart, ring pie chart and rose pie chart are suitable for displaying data proportion relationship;

[0029] Column chart and three-dimensional column chart are used for numerical comparison of multi-category data;

[0030] Line chart is used for dynamic presentation of data trend;

[0031] Half-circle striped ring chart cuts the ring chart into a half circle and distinguishes the data interval through the striped texture, which is suitable for displaying progress indicators;

[0032] Bidirectional bar chart extends to both sides based on the central axis, which is suitable for comparing positive and negative data.

[0033] Specifically, the digital display module provides at least two dynamic digital presentation modes of the surrounding icon number, the rotating icon number and the water ball icon number, wherein:

[0034] The surrounding icon number presentation mode distributes the numbers around the icon in a surrounding form, and utilizes the transform attribute of CSS3 or the WebGL technology to realize the uniform distribution and dynamic rotation effect of the numbers around the center icon by setting the rotation angle and radius parameters of the numbers.

[0035] The rotating icon number presentation mode combines the numbers and the icon and then exhibits the whole in a 3D rotation manner, sets the rotation axis parameters of the number and the icon model by means of the 3D graphics library, and realizes the smooth multi-angle rotation animation.

[0036] The water ball icon number presentation mode simulates the water ball form to wrap the numbers, draws the curved surface and light and shadow effect of the water ball through the HTML5 Canvas, and simulates the ripples and refraction on the surface of the water ball by utilizing the fluid simulation algorithm.

[0037] Specifically, the geographic visualization module integrates at least two geographic data display forms of the flying line chart, the scatter chart, the heat map layer and the column chart, wherein:

[0038] The flying line chart is used for exhibiting the flowing relationship between geographic elements, connects the start point and the end point coordinates on the map, utilizes the Bezier curve algorithm or the vector graphics technology to draw the dynamic line, and adds the arrow or the light effect to enhance the flowing feeling.

[0039] The scatter chart marks the geographic data in the form of points on the map, each point corresponds to a geographic position, and the data difference is exhibited through the size, color and icon style visual variable of the point.

[0040] The heat map layer is based on the kernel density estimation algorithm, converts the discrete geographic data into the continuous heat distribution, and directly presents the spatial aggregation degree of the data through the setting of different color gradients.

[0041] The column chart superimposes the column chart in a specific area of the map, is used for comparing multiple category data, binds the column chart and the geographic coordinates through the WebGL or Canvas technology, ensures that the chart proportion is synchronously adjusted when the map is zoomed in, and meanwhile supports the interactive query.

[0042] Compared with the prior art, the large-screen data visualization component library system based on the adaptive algorithm and the interactive optimization has the beneficial effects that:

[0043] The application provides rich data display and interactive functions, supports dynamic interaction, dynamic data updating, high-performance rendering and adaptive rendering, and is suitable for smart city, industrial monitoring and other scenes. BRIEF DESCRIPTION OF DRAWINGS

[0044] Attachment Figure 1 It is a system module connection block diagram of an embodiment of the present invention. DETAILED DESCRIPTION

[0045] In order to make the technical solution, the technical problems solved and the technical effects of the present invention more clear, the technical solution of the present invention is clearly and completely described below in conjunction with specific embodiments.

[0046] Example:

[0047] Reference Attachment Figure 1 This embodiment proposes a large-screen data visualization component library system based on adaptive algorithms and interactive optimization, which includes:

[0048] The layout and typesetting module relies on the Cassowary constraint solver to construct a linear equation system containing element coordinates, sizes, and screen size constraints to achieve dynamic grid layout adaptation for multi-resolution screens, while also supporting layout style customization;

[0049] The chart generation module provides various types of chart components and supports dynamic data updates and style customization through data binding interfaces;

[0050] The extended decoration module uses SPH fluid dynamics simulation and GPU parallel rendering algorithm to generate particle effects and dynamic decorations with high frame rates, enhancing the visual expression of large screens;

[0051] The digital display module provides a variety of dynamic digital presentation methods, enhancing the display expressiveness of digital information through innovative visual effects;

[0052] The geographic visualization module supports loading custom map components through the GeoJSON data format and integrates multiple geographic data display forms to achieve the visualization of diverse geographic information;

[0053] The six modules of layout and typesetting, chart generation, extended decoration, digital display and geographic visualization are connected through a unified event bus mechanism and data format standards, forming an integrated large-screen visualization system with layout adaptation, data linkage and visual complementarity.

[0054] Specifically, the six modules involved in layout and typesetting, chart generation, extended decoration, digital display, and geographic visualization achieve collaboration through data sharing and event mechanisms:

[0055] The layout module provides container size and position constraints for the chart generation module and geographic visualization module. When the screen resolution changes, the Cassowary solver is used to recalculate element coordinates and notify other modules to adjust the layout.

[0056] The chart generation module and the geographic visualization module share business data through a data binding interface;

[0057] The extension decoration module acts as a visual auxiliary layer, and a rendering level of a particle effect of the extension decoration module is controlled by the layout module. Meanwhile, the extension decoration module listens to state changes of the chart generation module and the geographic visualization module, and dynamically adjusts a color and a motion track style of the particle.

[0058] The digital display module obtains key data of the chart generation module and the geographic visualization module, and highlights the key data in a dynamic digital form. A position and a size of the digital display module are constrained by the layout module. When data is updated, an animation effect is used to enhance visual feedback. The digital display module keeps layout coordination with the chart generation module, the geographic visualization module, and the extension decoration module.

[0059] In the embodiment, a layout and typesetting module constructs a linear equation group containing element coordinates, sizes, and screen size constraints.

[0060] Minimize∑ij(x i -x j ) 2 +(y i -y j 2 Subject to w i ≤W max , h i ≤H max ,

[0061] wherein x i , y i are element coordinates, w i , h i are element width and height, W max , H max are maximum screen width and height.

[0062] The layout and typesetting module includes an adaptive layout engine.

[0063] When a screen resolution changes, the adaptive layout engine collects new boundary parameters W max and H max in real time. A Cassowary constraint solver recalculates optimal solutions of element x i , y i , w i , and h i according to the linear equation group containing element coordinates, sizes, and screen size constraints, and drives a grid layout to adjust in real time.

[0064] ​The layout module involved includes a preset template library, the preset template library integrates three types of standard layout schemes of typical business scenarios of smart city templates, industrial monitoring templates and environmental monitoring templates, each type of layout scheme supports the visual configuration of page framework components, panel components, pop-up box components, header components, sidebar components and bottom components, covering the display needs of large screens in different business scenarios.

[0065] The standard layout scheme for the three types of typical business scenarios:

[0066] a) The smart city template adopts a columned frame, the left side is configured with a city data overview panel (including population, traffic flow and other index cards), the right side is integrated with a three-dimensional map and an event warning pop-up box, the header is fixedly placed with a city logo and a navigation bar, and is suitable for the visual needs of government large screens;

[0067] b) The industrial monitoring template mainly adopts a full-column frame, the middle part is laid out with a production line real-time data dashboard (supporting red border highlighting of fault warning triggering), the side bar can be folded to display a device list, and the bottom is aligned to display an alarm record timeline, meeting the factory equipment state monitoring scenario;

[0068] c) The environmental monitoring template adopts a grid layout, divides panels according to air quality, water quality, noise and other dimensions, each panel is configured with a dynamic refresh line chart and a threshold alarm lamp, and a pop-up box is defined to display historical data details when the panel is clicked, which is suitable for environmental protection department large screen display.

[0069] In this embodiment, the chart generation module provides at least three types of chart components among pie chart, ring pie chart, rose pie chart, column chart, three-dimensional column chart, line chart, half-circle striped ring chart and bidirectional bar chart, wherein:

[0070] Pie chart, ring pie chart and rose pie chart are suitable for displaying data proportion relationship;

[0071] Column chart and three-dimensional column chart are used for numerical comparison of multi-category data;

[0072] Line chart is used for dynamic presentation of data trend;

[0073] The half-circle striped ring chart cuts the ring chart into a half circle, and distinguishes the data interval through the striped texture, which is suitable for displaying progress type indicators;

[0074] Bidirectional bar chart extends to both sides based on the central axis, which is suitable for comparing positive and negative data.

[0075] In this embodiment, the digital display module provides at least two dynamic digital presentation modes among the surrounding icon number, rotating icon number and water ball graph number, wherein:

[0076] The surrounding icon number presentation mode distributes numbers in a surrounding form around an icon, and utilizes a transform attribute of CSS3 or a WebGL technology to realize the uniform distribution and dynamic rotation effect of the numbers around the center icon by setting a rotation angle and a radius parameter of the numbers.

[0077] The rotating icon number presentation mode exhibits a 3D rotation of the combination of the numbers and the icon as a whole, sets a rotation axis parameter of the number and icon model by means of a 3D graphics library, and realizes a smooth multi-angle rotation animation.

[0078] The water ball graph number presentation mode simulates a water ball form to wrap the numbers, draws a curved surface and light and shadow effect of the water ball through an HTML5 Canvas, and simulates ripples and refraction on the surface of the water ball by using a fluid simulation algorithm.

[0079] In the embodiment, the geographic visualization module integrates at least two of the following geographic data display forms: a flying line graph, a scatter graph, a heat map layer and a columnar graph.

[0080] The flying line graph is used to exhibit a flow relationship between geographic elements, connects a starting point and an ending point coordinate on a map, draws a dynamic line by using a Bezier curve algorithm or a vector graphics technology, and adds an arrow or a light effect to enhance the flow feeling.

[0081] The scatter graph labels geographic data in the form of points on a map, each point corresponds to a geographic position, and data differences are exhibited by using visual variables such as the size, color and icon style of the points.

[0082] The heat map layer converts discrete geographic data into continuous heat distribution based on a kernel density estimation algorithm, and directly presents the spatial aggregation degree of the data by setting different color gradients.

[0083] The columnar graph superimposes a columnar graph in a specific area of a map, is used to compare multiple category data, binds the columnar graph and geographic coordinates by using a WebGL or Canvas technology, ensures that the proportion of the graph is adjusted synchronously when the map is zoomed in or out, and supports interactive query.

[0084] As can be seen from the above, the large-screen data visualization component library system based on the adaptive algorithm and interactive optimization provided by the application provides rich data display and interactive functions, supports dynamic interaction, dynamic data updating, high-performance rendering and adaptive rendering, and is suitable for smart city, industrial monitoring and other scenes.

[0085] The principles and implementation manners of the present application are described in detail by using the above specific examples, and the examples are only used to help understand the core technical content of the present application. Based on the above specific examples of the present application, any improvement and modification of the present application made by the person skilled in the art without departing from the principles of the present application shall fall within the patent protection scope of the present application.

Claims

1. A large-screen data visualization component library system based on adaptive algorithms and interactive optimization, characterized by: It includes: The layout module, relying on the Cassowary constraint solver, constructs a system of linear equations containing element coordinates, sizes, and screen size constraints to achieve dynamic grid layout adaptation for multi-resolution screens, while also supporting layout style customization. The chart generation module provides various types of chart components and supports dynamic data updates and style customization through data binding interfaces; The extended decoration module uses SPH fluid dynamics simulation and GPU parallel rendering algorithm to generate particle effects and dynamic decorations with high frame rates, enhancing the visual expression of large screens; The digital display module provides a variety of dynamic digital presentation methods, enhancing the display expressiveness of digital information through innovative visual effects; The geographic visualization module supports loading custom map components through the GeoJSON data format and integrates multiple geographic data display forms to achieve the visualization of diverse geographic information; The six modules of layout and typesetting, chart generation, extended decoration, digital display and geographic visualization are connected through a unified event bus mechanism and data format standards, forming an integrated large-screen visualization system with layout adaptation, data linkage and visual complementarity.

2. The large-screen data visualization component library system based on adaptive algorithm and interactive optimization according to claim 1 is characterized in that: The six modules of layout and typesetting, chart generation, extended decoration, digital display and geographic visualization achieve collaboration through data sharing and event mechanisms: The layout module provides container size and position constraints for the chart generation module and geographic visualization module. When the screen resolution changes, the Cassowary solver is used to recalculate element coordinates and notify the chart generation, extended decoration, digital display, and geographic visualization modules to adjust the layout. The chart generation module and the geographic visualization module share business data through the data binding interface; The extended decoration module serves as a visual aid. The rendering level of its particle effects is controlled by the layout module. It also monitors the status changes of the chart generation module and the geographic visualization module to dynamically adjust the color and motion trajectory style of the particles. The digital display module obtains key data from the chart generation module and the geographic visualization module, and highlights them in the form of dynamic numbers. Its position and size are constrained by the layout module. When the data is updated, the visual feedback is enhanced through animation effects, and the layout is coordinated with the chart generation module, geographic visualization module and extended decoration module.

3. The large-screen data visualization component library system based on adaptive algorithm and interactive optimization according to claim 1 is characterized in that: The layout module constructs a linear equation system containing element coordinates, dimensions, and screen size constraints: Minimize∑ij(x i -x j ) 2 +(y i -y j ) 2 Limited by w i ≤W max , h i ≤H max , Among them, x i 、y i is the element coordinate, w i 、h i is the width and height of the element, W max 、H max The maximum width and height of the screen.

4. The large-screen data visualization component library system based on adaptive algorithm and interactive optimization according to claim 3 is characterized in that: The layout and typesetting module includes an adaptive layout engine; When the screen resolution changes, the adaptive layout engine collects the new boundary parameters W in real time. max and H max , the Cassowary constraint solver recalculates the element x according to a system of linear equations containing element coordinates, size, and screen size constraints. i 、y i 、w i and h i The optimal solution drives the real-time adjustment of the grid layout.

5. The large-screen data visualization component library system based on adaptive algorithm and interactive optimization according to claim 4 is characterized in that: The layout and typesetting module includes a preset template library, which integrates standardized layout solutions for three typical business scenarios: smart city template, industrial monitoring template and environmental monitoring template. Each layout solution supports the visual configuration of page frame components, panel components, pop-up box components, header components, sidebar components and bottom components, covering the large-screen display needs of different business scenarios.

6. The large-screen data visualization component library system based on adaptive algorithm and interactive optimization according to claim 1 is characterized in that: The chart generation module provides at least three types of chart components, including pie chart, ring pie chart, rose pie chart, bar chart, three-dimensional bar chart, line chart, semicircular striped ring chart, and bidirectional bar chart, wherein: Pie charts, ring pie charts, and rose pie charts are suitable for showing data proportion relationships; Histograms and stereo histograms are used for numerical comparison of multi-category data; Line charts are used to dynamically present data trends; The semicircular striped donut chart cuts the donut chart into semicircles and uses striped textures to distinguish data intervals. It is suitable for displaying progress indicators. A bidirectional bar chart extends to both sides based on the central axis and is suitable for comparing positive and negative data.

7. The large-screen data visualization component library system based on adaptive algorithm and interactive optimization according to claim 1 is characterized in that: The digital display module provides at least two dynamic digital presentation modes: surrounding icon numbers, rotating icon numbers, and water polo diagram numbers, wherein: The number presentation method of surrounding icons distributes the numbers around the icon in a surrounding form. By using the transform property of CSS3 or WebGL technology, the numbers are evenly distributed around the central icon and dynamically rotated by setting the rotation angle and radius parameters. The rotating icon digital presentation method combines numbers and icons and displays them in 3D rotation. With the help of the 3D graphics library, the rotation axis parameters are set for the number and icon models to achieve smooth multi-angle rotation animation. The digital presentation of the water polo image simulates the shape of a water polo and wraps the numbers. The surface and light and shadow effects of the water polo are drawn through HTML5 Canvas, and the ripples and refractions on the surface of the water polo are simulated using a fluid simulation algorithm.

8. The large-screen data visualization component library system based on adaptive algorithm and interactive optimization according to claim 1 is characterized in that: The geographic visualization module integrates at least two geographic data display forms of a fly line diagram, a scatter plot, a heat map, and a bar chart, wherein: Flying line charts are used to show the flow relationship between geographical elements. By connecting the starting and ending coordinates on the map, dynamic lines are drawn using Bezier curve algorithms or vector graphics technology, and arrows or streamer effects are added to enhance the sense of flow. A scatter plot plots geographic data on a map in the form of dots, with each dot corresponding to a geographic location. It uses visual variables like dot size, color, and icon style to show data differences. The heat map is based on the kernel density estimation algorithm, which converts discrete geographic data into continuous heat distribution. By setting different color gradients, it can intuitively present the spatial aggregation degree of the data. Histograms are superimposed on specific areas of the map to compare data from multiple categories. Using WebGL or Canvas technology, the histograms are bound to geographic coordinates to ensure that the chart scales when the map is zoomed in and out. Interactive queries are also supported.

Images