Propagation influence dynamic visualization method supporting multi-dimensional drilling down and real-time interaction
By automatically generating drill-down paths through the influence data adapter and interactive intent parser, and combining Echarts' virtual option tree Diff algorithm and high-performance rendering pipeline, the bottlenecks of multi-dimensional data analysis and interactive performance in Echarts' analysis of urban international communication influence have been solved. Seamless rendering and efficient multi-view linkage have been achieved, improving user experience and system performance.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- ZHEJIANG UNIVERSITY OF MEDIA AND COMMUNICATIONS
- Filing Date
- 2026-01-26
- Publication Date
- 2026-05-05
AI Technical Summary
The existing Echarts has problems such as insufficient support for multidimensional data analysis, interactive performance bottlenecks, and tight coupling of system architecture in the analysis of the international communication influence of cities. This leads to fragmented analysis process, rendering delays and lag, making it difficult to meet users' real-time interactive needs.
By parsing multi-source data through the influence data adapter, and combining the interactive intent parser and drill-down path manager, drill-down paths are automatically generated. Seamless rendering is achieved using Echarts' virtual option tree Diff algorithm. At the same time, a high-performance rendering pipeline and a visualization event bus are built to optimize multi-view linkage.
It enables seamless multi-dimensional drill-down analysis, improving analysis depth and efficiency, ensuring a smooth frame rate of 60fps and a response time of less than 300 milliseconds, reducing the workload of customized development, and improving the maintainability and scalability of the system.
Smart Images

Figure CN121979934A_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of data visualization and urban data analysis technology, specifically to a dynamic visualization method for dissemination influence that supports multi-dimensional drill-down and real-time interaction. Background Technology
[0002] In the field of urban international communication influence analysis, dynamic visualization is a key tool to help decision-makers understand global public opinion and assess the effectiveness of communication. Currently, building analysis platforms based on open-source visualization libraries (such as Echarts) is a common industry solution. Echarts, with its data-driven and efficient rendering design philosophy, provides a solid foundation for general chart display. Its layered architecture separates data, logic, and views, and achieves efficient updates through virtual option trees and Diff algorithms, effectively improving rendering performance.
[0003] However, when applying standard Echarts to the specific vertical scenario of urban international communication influence, its general design reveals several key technical shortcomings. First, it lacks support for multi-dimensional data analysis. Urban communication analysis involves multiple data dimensions, including geographical levels (e.g., country-city-district), time dimensions, media platforms, and influence indicators. The relationships between dimensions in standard Echarts charts are usually static and predefined, making it difficult to support dynamic and flexible drill-down based on real-time analysis intent. For example, drilling down from the "Global City Influence Ranking" view to "Public Opinion Trends of a Specific City on Social Media Platform X" often requires interrupting the current analysis flow and manually switching or reconfiguring multiple charts, resulting in fragmented and inefficient analysis processes. Second, interactive performance suffers from bottlenecks when dealing with massive amounts of real-time communication data. The sheer volume and frequent updates of city-level communication event data mean that standard Echarts' general optimization strategies struggle to guarantee real-time performance and smoothness when dealing with complex multi-view interactions (such as map region selection, timeline filtering, and trend chart scrolling triggered simultaneously). This often results in rendering delays and stuttering, severely impacting user experience and decision-making efficiency. Furthermore, deeply integrating Echarts with specialized city communication impact data models and real-time computing engines is highly complex. Echarts' standard configuration and event mechanisms lack high-level abstractions for this scenario, leading to tightly coupled system architecture, significant customization workload, and challenges to maintainability and scalability. Summary of the Invention
[0004] The purpose of this invention is to provide a dynamic visualization method for dissemination influence that supports multi-dimensional drill-down and real-time interaction. This invention can parse user interaction intent and automatically generate drill-down paths, improving the flexibility and depth of analysis. Simultaneously, by optimizing Echarts' rendering mechanism, it can efficiently handle massive real-time data updates and complex view linkages, ensuring responsiveness and smoothness.
[0005] The technical solution of this invention: A method for dynamically visualizing the propagation influence that supports multi-dimensional drill-down and real-time interaction, comprising the following steps: S1: By using the propagation influence data adapter, raw propagation event data is accessed from multi-source data streams, and the raw propagation event data is converted into structured data carrying multi-dimensional labels; S2: Respond to the user's interactive operation on the visual view, dynamically parse the context information of the interactive operation through the interactive intent parser, and generate a drill-down instruction containing the target dimension identifier; S3: Based on the drill-down instructions and predefined metadata rules, dynamically generate the data query statements and visualization configuration options required for the next level of analysis view through the drill-down path manager; S4: Submit the visualization configuration options to the Echarts-based visualization instance, and use Echarts' virtual option tree Diff algorithm to perform difference comparison and local updates on the view to achieve seamless drill-down rendering.
[0006] In the above-mentioned dynamic visualization method for communication influence that supports multi-dimensional drill-down and real-time interaction, in step S1, the communication influence data adapter has a built-in hierarchical data model for organizing unstructured data into the Echarts standard dataset format; the multi-dimensional labels include at least one of geographic hierarchy, timestamp, media type and sentiment polarity.
[0007] In the aforementioned method for dynamic visualization of propagation influence that supports multi-dimensional drill-down and real-time interaction, in step S2, the interaction intent parser parses the target dimension identifier based on the user operation context and global filtering conditions, and passes it to the drill-down path manager.
[0008] The aforementioned method for dynamically visualizing the dissemination influence that supports multi-dimensional drill-down and real-time interaction includes interactive operations such as clicking on a map area, selecting a time range, or scrolling through data points in a trend chart; the context information includes the dimension value associated with the current interactive object and global filtering conditions.
[0009] The aforementioned method for dynamically visualizing the propagation influence that supports multi-dimensional drilling and real-time interaction involves a drilling path manager that dynamically combines and generates new Echarts configuration options based on predefined drilling rules, and triggers view updates through the chart.setOption() method.
[0010] The aforementioned method for dynamic visualization of dissemination influence that supports multi-dimensional drill-down and real-time interaction includes at least one geographic-level drill-down chart built based on a custom Echarts series, whose graphic elements are strongly bound to dimension identifiers in the data model.
[0011] The aforementioned method for dynamically visualizing propagation influence that supports multi-dimensional drill-down and real-time interaction also includes the step of building a high-performance rendering pipeline: The raw data is aggregated and preprocessed through a real-time computing engine; Based on the current state of the visualization component, push the processed data to the corresponding Echarts instance as needed; Monitor data volume and interaction complexity, and dynamically select either the large mode for data sampling or the SVG rendering mode for different Echarts instances.
[0012] The aforementioned method for dynamically visualizing the dissemination influence that supports multi-dimensional drill-down and real-time interaction also includes system-level linkage steps: Establish a visual event bus by extending Echarts' connect functionality; Interactive actions in any visual view are standardized as events and published on the event bus; Other visualization views that subscribe to related events automatically update their data views after receiving the events, enabling complex interaction among multiple views.
[0013] Compared with the prior art, the present invention has the following beneficial effects: 1. This invention achieves dynamic binding of multi-dimensional tag data and visualization views through the collaboration of a hierarchical data model of the dissemination influence data adapter, an interactive intent parser, and a drill-down path manager. It supports seamless drill-down from global to subdivided dimensions (such as drilling down from global city rankings to the public opinion trend of a specific city on a certain media platform) without the need for manual configuration switching. This completely solves the problem of fragmented analysis process in traditional solutions and greatly improves the depth and efficiency of analysis.
[0014] 2. This invention utilizes a high-performance rendering pipeline's real-time data aggregation and on-demand push mechanism, coupled with an adaptive rendering strategy (dynamically enabling large mode or SVG rendering), and the local update capability of the Echarts Diff algorithm, enabling the system to stably handle real-time data updates of over 10,000 per second, maintain a smooth 60fps frame rate during multi-view linkage, and reduce response time (typically below 300 milliseconds), thus solving rendering latency and stuttering issues.
[0015] 3. This invention builds a visual event bus by extending Echarts' connect function, enabling standardized management of complex multi-view linkage. At the same time, through modular design such as data adapters and intent parsers, it reduces the integration complexity of Echarts with urban communication-specific data models and real-time computing engines, reduces the workload of customized development, and improves maintainability and scalability.
[0016] 4. The geographic level drill-down map constructed by the Harts custom series of this invention realizes a strong binding between graphic elements and data dimensions. Combined with the comprehensive data presentation brought by multi-view linkage, it makes the core information such as the spatiotemporal distribution, media characteristics, and emotional tendencies of a city's international communication influence intuitive and perceptible. Attached Figure Description
[0017] Figure 1 This is a flowchart of step S1; Figure 2 This is a flowchart of step S2; Figure 3 This is a flowchart of step S3; Figure 4 This is a flowchart of step S4. Detailed Implementation
[0018] The present invention will be further described below with reference to the accompanying drawings and embodiments, but this should not be construed as limiting the present invention.
[0019] Example: A method for dynamically visualizing the propagation influence that supports multi-dimensional drill-down and real-time interaction, with the following hardware environment: Server: CPU is Intel Xeon E5-2680 v4 (14 cores and 28 threads), memory is 32GB, hard drive is 1TB SSD, bandwidth is 100Mbps, supporting high-concurrency data processing and real-time computing; Client-side: A standard office computer (CPU i5-10400F, 16GB RAM, NVIDIA GTX 1650 graphics card) is used, with Chrome version 118.0 as the browser, supporting full-featured operation of HTML5, WebGL rendering, and Echarts version 5.4.3.
[0020] The software environment is as follows: Operating system: The server uses CentOS 7.9, and the client uses Windows 10 Professional. Development framework: The front end is based on Vue 3.2 + Echarts 5.4.3, the back end uses Java Spring Boot 2.7.8, and the real-time computing engine is Flink 1.17.0; Data storage: MySQL 8.0 (stores structured dimensional data and fact data), MongoDB 6.0 (stores unstructured raw propagation event data), Redis 6.2 (caches hot data and global filtering conditions); Auxiliary tools: HanLP was used for NLP (for sentiment polarity analysis and keyword extraction), and Kafka 3.4.0 was used for message queue (for real-time access of multi-source data).
[0021] The method implemented here specifically includes the following steps: S1: Using a propagation influence data adapter, raw propagation event data is accessed from multi-source data streams and converted into structured data carrying multi-dimensional labels, such as... Figure 1 As shown.
[0022] The core of this step is to use the propagation influence data adapter to complete the access, transformation, and standardization of raw propagation event data, providing a data foundation for subsequent dynamic drill-down and visualization rendering. Specifically: The aforementioned data adapter for communication influence is an independently developed modular component, with a built-in hierarchical data model for urban international communication scenarios. This model adopts a star schema design with "fact tables and dimension tables": The fact table is centered around "dissemination events" and includes core fields such as unique event identifiers, quantitative values of dissemination impact, and foreign keys for various dimensions. The dimension table corresponds to multi-dimensional tag types, including a geographic dimension table (storing the hierarchical relationship of countries, cities, districts and counties, administrative division codes, latitude and longitude, etc.), a time dimension table (storing timestamps, time period layers, etc.), a media dimension table (storing media types, platform names, etc.), and a sentiment dimension table (storing sentiment polarity, sentiment intensity, etc.), ensuring the structured storage and rapid association of multi-dimensional tags.
[0023] The multi-source data streams cover various data sources related to the city's international communication, including but not limited to: Social media data: Posts, comments, and reposts accessed via APIs from platforms such as Twitter and Facebook; News media data: Statistics on the number of articles and the amount of information disseminated by major global news websites; Public opinion monitoring data: Data on relevant urban communication events captured by a professional public opinion monitoring system; Multimedia dissemination data: City-themed content dissemination data from video platforms and image sharing platforms.
[0024] The adapter supports multiple access methods, including HTTP interface retrieval, message queue (Kafka / RabbitMQ) subscription, and file import (CSV / JSON), adapting to the transmission protocols and data formats of different data sources.
[0025] The process of converting the raw propagation event data into structured data with multidimensional labels includes: Unstructured data processing: For raw text data (such as press releases and social media posts), extract keywords and determine sentiment polarity using natural language processing (NLP) tools to generate sentiment polarity labels; for multimedia data, extract core attributes such as dissemination volume, release time, and dissemination platform. Multidimensional label assignment: According to the label type defined in claim 2, assign at least one label from the following to each piece of data: geographic level, timestamp, media type, and sentiment polarity. For example, a positive dissemination event in Hangzhou on social media will be assigned the complete labels "Geographic level: city (Hangzhou)", "Timestamp: 2025-01-05 10:30:00", "Media type: social media", and "Sentiment polarity: positive". Standardized format: The adapter converts data with multi-dimensional labels into the Echarts standard dataset format based on the built-in hierarchical data model, ensuring that the data can be directly parsed and called by the Echarts instance without additional format conversion operations.
[0026] S2: Responding to user interactions on the visual view, the context information of the interaction is dynamically parsed using an interaction intent parser, generating a drill-down instruction containing the target dimension identifier, such as... Figure 2 As shown.
[0027] The core of this step is to accurately capture user interaction operations and parse context information through an interaction intent parser, and generate drill-down instructions containing target dimension identifiers to achieve precise docking between user intent and system processing logic.
[0028] The interactive operations specifically include three core operations, which are captured by listening to the event callback functions of the Echarts visualization view: Clicking on a map area: When a user clicks on a graphic element corresponding to a geographic level in the visualization view (such as a country outline or city marker), the click event of the map component is triggered. Selecting a time range: When the user drags the timeline slider or clicks the time filter dropdown to select a period (such as the last 7 days or the last 30 days), the change event of the timeline component is triggered. Data point selection in a trend chart: Users can select data points by dragging the mouse in trend views such as line charts and bar charts, triggering a data selection event.
[0029] The context information includes the dimension values associated with the current interactive object and global filtering conditions. The parsing process is as follows: Dimension value extraction: Extract the dimension information corresponding to the currently operated object from the captured interaction events. For example, when clicking on the map "Shanghai", extract the dimension values such as the geographical level "city" and the geographical identifier "310000". Global filter condition reading: The system maintains a global filter state pool, which stores the filter conditions set by the user, such as the selected media type (only view social media), sentiment polarity (only view positive public opinion), etc. During parsing, all currently effective filter conditions are read from the state pool. Parsing Logic: The interaction intent parser integrates and analyzes the dimension values with the global filtering conditions based on the preset dimension association rules, eliminates contradictory conditions, fills in missing dimensions, and accurately identifies the user's core analysis needs.
[0030] After parsing, a drill-down instruction containing a target dimension identifier is generated. The target dimension identifier is a structured string that uniquely identifies the target of the drill-down analysis, such as "Geographic level: city (Shanghai) + time range: last 30 days + media type: social media + sentiment polarity: positive". This instruction clarifies the core dimension range of the next level of analysis and provides precise input for step S3.
[0031] S3: Based on the drill-down instructions and predefined metadata rules, dynamically generate the data query statements and visualization configuration options required for the next level of analysis view through the drill-down path manager, such as... Figure 3 As shown.
[0032] The core of this step is that the drill-down path manager generates the data query statements and visualization configuration options required for the next level of analysis based on the drill-down instructions and predefined metadata rules, thereby enabling dynamic switching of the analysis view.
[0033] The predefined metadata rules are stored in the system rule base, clarifying the dimensional drill-down relationships and visualization adaptation rules for the urban international communication analysis scenario, including: Drill-down hierarchy rules: Define the drill-down path for each dimension. For example, the drill-down path for the geographical dimension is "country, provincial administrative region, city, district / county", and the drill-down path for the comprehensive dimension is "global city influence ranking, overall communication data of the target city, and media type data of the target city". Data aggregation rules: Define data aggregation methods for different drill-down levels. For example, when drilling down from "country" to "city", the dissemination data at the country level will be summed and aggregated according to the city dimension. Visualization adaptation rules: Define the chart types corresponding to different analysis dimensions, such as maps for geographical hierarchy analysis, line charts for time trend analysis, and bar charts for classification and comparison analysis.
[0034] After receiving the drill-down command, the drill-down path manager parses the target dimension identifier and dynamically constructs a data query statement by combining the drill-down level and data aggregation rules in the metadata rules. If the data source is a relational database (such as MySQL or PostgreSQL), generate an SQL query statement that includes dimension filtering conditions, grouping and aggregation logic, and related query rules; If the data source is a non-relational database (such as MongoDB), generate the corresponding NoSQL query command to ensure accurate extraction of the structured data required for the next level of analysis.
[0035] The visual configuration options are structured objects that conform to the Echarts configuration specification (option format), and the generation process is as follows: Basic configuration: Determine basic parameters such as chart type, axis type, and legend position based on the visualization adaptation rules in the metadata rules; Data mapping: Maps the structured data obtained from the data query statement to fields such as series.data, xAxis.data, and yAxis.data configured in Echarts; Interaction Configuration: Enable the next level of supported interactive functions, such as continue drilling down, view data details, export, etc. Style configuration: Set style parameters such as chart color, font, and animation effects to ensure consistency and readability of the visualization.
[0036] The generated visual configuration options can be directly submitted to the Echarts instance to trigger an update, according to the parameter format requirements of the chart.setOption() method.
[0037] S4: Submit the visualization configuration options to the Echarts-based visualization instance. Utilize Echarts' virtual option tree Diff algorithm to perform difference comparison and local updates on the view, achieving seamless drill-down rendering. Figure 4 As shown.
[0038] The core of this step is to submit the visualization configuration options to the Echarts visualization instance, and use Echarts' virtual option tree Diff algorithm to achieve partial updates of the view and complete seamless drill-down rendering.
[0039] The Echarts-based visualization instance is an Echarts object loaded by the front-end page, which is configured with a basic container, global styles, and an initial view during initialization: Container configuration: Specifies the DOM container for chart rendering, and sets the container's width, height, and responsiveness rules; Initial View: Loads top-level analytical views, such as the "Global Cities International Communication Influence Map," which is a geographic-level drill-down plot built based on a custom Echarts series. Custom series construction: Register the "geoDrillDown" custom series using Echarts' echarts.registerSeriesType() method, override the renderItem function, and when drawing geographic graphic elements (such as country outlines and city labels), strongly bind the graphic elements to the dimension identifiers (such as geographic IDs) in the data model to ensure that interactive operations can be accurately associated with the corresponding dimension data.
[0040] The application method of the virtual option tree Diff algorithm is as follows: Submit configuration options: Submit the visual configuration options (new configuration) generated in step S3 to the Echarts instance; Difference comparison: The Echarts instance automatically calls the virtual option tree Diff algorithm to perform a deep traversal comparison between the new configuration and the old configuration of the current view, builds a virtual option tree structure, identifies the differences between the two in terms of chart type, data series, style parameters, etc., and generates a change set (including three change types: addition, deletion, and update). Partial updates: Based on the change set, only the parts with differences are partially redrawn, rather than a full view refresh. For example, when drilling down from the "country-level map" to the "city-level map", only the geographical range data and graphic elements are updated, while the status of unchanged components such as legends and timelines is maintained, achieving a seamless drill-down rendering effect without flickering or delay.
[0041] Furthermore, to address the performance bottlenecks of processing massive amounts of real-time data and complex interactions, this invention adds a high-performance rendering pipeline in addition to the above steps, specifically implemented as follows: Raw data aggregation and preprocessing: Integrating the Flink / Spark Streaming real-time computing engine, the raw data received in step S1 is processed in a streaming manner, including data cleaning (duplicate removal, missing value completion), data aggregation (grouping and summing / averaging by time window and dimension), and data sampling (extracting core samples proportionally from massive amounts of data), reducing the data processing pressure on visualization instances; On-demand data push: Based on the current state of the visualization component (such as whether it is in the visible area or whether it is the currently active view), a long connection is established through WebSocket to push updated data only to active Echarts instances, avoiding invalid data transmission and redundant rendering; Adaptive rendering strategy switching: The system monitors the amount of data (number of data points) and interaction complexity (number of simultaneous triggered interaction event types) of the current view in real time, and dynamically selects the rendering mode. When the data volume is large or the interaction complexity is high, enable Echarts' large mode to intelligently sample the data and ensure smooth rendering. When high-precision interaction is required (such as precise selection of map areas or viewing of data point details), switch to SVG rendering mode to ensure the accuracy of interactive response.
[0042] Furthermore, to achieve collaborative updates of multiple views, this invention adds a system-level linkage step, specifically implemented as follows: Visual event bus establishment: Extend Echarts' built-in connect function to build a globally unified visual event bus. This bus supports event publishing, subscription and broadcasting, enabling event communication across chart instances; Interactive event standardization: Once an interactive action of any visualization view (such as clicking the map or selecting a time range in step S2) is captured, it is encapsulated into a standardized event object, which includes unified fields such as event type, trigger source identifier, target dimension identifier, and filter conditions, and is published through the event bus; Multi-view linkage response: After all visualization views that have subscribed to the relevant events (such as maps, line charts, pie charts, etc.) receive the events, they automatically parse the event parameters, update their own filtering conditions and data query logic, re-acquire data and generate new visualization configuration options, and trigger view updates through the chart.setOption() method to achieve synchronous linkage of multiple views.
[0043] In summary, this invention can parse user interaction intent and automatically generate drill-down paths, improving the flexibility and depth of analysis. At the same time, by optimizing Echarts' rendering mechanism, it can efficiently handle massive real-time data updates and complex view linkages, ensuring response speed and smoothness.
Claims
1. A method for dynamically visualizing the dissemination influence that supports multi-dimensional drill-down and real-time interaction, characterized in that: Includes the following steps: S1: By using the propagation influence data adapter, raw propagation event data is accessed from multi-source data streams, and the raw propagation event data is converted into structured data carrying multi-dimensional labels; S2: Respond to the user's interactive operation on the visual view, dynamically parse the context information of the interactive operation through the interactive intent parser, and generate a drill-down instruction containing the target dimension identifier; S3: Based on the drill-down instructions and predefined metadata rules, dynamically generate the data query statements and visualization configuration options required for the next level of analysis view through the drill-down path manager; S4: Submit the visualization configuration options to the Echarts-based visualization instance, and use Echarts' virtual option tree Diff algorithm to perform difference comparison and local updates on the view to achieve seamless drill-down rendering.
2. The method for dynamic visualization of propagation influence supporting multi-dimensional drill-down and real-time interaction according to claim 1, characterized in that, In step S1, the dissemination influence data adapter has a built-in hierarchical data model for organizing unstructured data into the Echarts standard dataset format; the multidimensional labels include at least one of geographic hierarchy, timestamp, media type and sentiment polarity.
3. The method for dynamic visualization of propagation influence supporting multi-dimensional drill-down and real-time interaction according to claim 1, characterized in that, In step S2, the interaction intent parser parses the target dimension identifier based on the user operation context and global filtering conditions, and passes it to the drill-down path manager.
4. The method for dynamic visualization of propagation influence supporting multi-dimensional drill-down and real-time interaction according to claim 1, characterized in that, The interactive operations include clicking on a map area, selecting a time range, or scrolling through data points in a trend chart; the context information includes the dimension value associated with the current interactive object and global filter conditions.
5. The method for dynamic visualization of propagation influence supporting multi-dimensional drill-down and real-time interaction according to claim 1, characterized in that, The drilling path manager dynamically generates new Echarts configuration options based on predefined drilling rules and triggers view updates through the chart.setOption() method.
6. The method for dynamic visualization of propagation influence supporting multi-dimensional drill-down and real-time interaction according to claim 1, characterized in that, The visualization view includes at least one geographic-level drill-down chart built on a custom Echarts series, whose graphical elements are strongly bound to dimension identifiers in the data model.
7. The method for dynamic visualization of propagation influence supporting multi-dimensional drill-down and real-time interaction according to claim 1, characterized in that, It also includes the steps of building a high-performance rendering pipeline: The raw data is aggregated and preprocessed through a real-time computing engine; Based on the current state of the visualization component, push the processed data to the corresponding Echarts instance as needed; Monitor data volume and interaction complexity, and dynamically select either the large mode for data sampling or the SVG rendering mode for different Echarts instances.
8. The method for dynamic visualization of propagation influence supporting multi-dimensional drill-down and real-time interaction according to claim 1, characterized in that, It also includes system-level linkage steps: Establish a visual event bus by extending Echarts' connect functionality; Interactive actions in any visual view are standardized as events and published on the event bus; Other visualization views that subscribe to related events automatically update their data views after receiving the events, enabling complex interaction among multiple views.