Dynamic Rendering Switching for Graph Data Visualization
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Conventional methods for rendering graphical data in web browsers face challenges with high computational and network resource consumption, especially when dealing with large datasets, and often result in low-quality image rendering and readability issues.
Innovation Solution
A browser-based graphing application that dynamically switches between different rendering conventions based on the number of nodes and user-defined scale levels, using DOM for high-quality rendering of fewer nodes and canvas for large datasets to optimize resource usage, while reusing graph elements to enhance performance.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Manufacturing precision
If DOM elements with CSS styles are used for rendering, then high-quality rendering and readable text are achieved, but computational and network resources are excessively consumed when dealing with large datasets
Solution Approach 1:
The patent implements dynamic switching between DOM-based rendering and canvas-based rendering based on the number of nodes in the graph. When the node count is below a threshold, DOM rendering is used for high quality; when above the threshold, canvas rendering is used for efficiency. This dynamic adaptation resolves the contradiction by selecting the appropriate rendering method based on runtime conditions.
Solution Approach 2:
The patent changes the rendering parameter (rendering method) based on the dataset size parameter. By monitoring the number of nodes and adjusting the rendering approach accordingly, the system maintains high quality for small datasets while reducing resource consumption for large datasets.
2Use of energy by moving object
If canvas elements are used for rendering, then computational resource consumption is reduced for large datasets, but rendering quality deteriorates and text becomes difficult to read
Solution Approach 1:
The system dynamically selects the rendering method based on the number of nodes. For small datasets below the threshold, DOM rendering is used to ensure high quality and readability. For large datasets above the threshold, canvas rendering is used to reduce computational resource consumption, accepting the trade-off in quality.
Solution Approach 2:
The rendering method parameter is changed based on the dataset size parameter. When nodes exceed the threshold, the system switches from DOM to canvas rendering, adjusting the quality-resource trade-off according to the specific dataset being rendered.
3Manufacturing precision
If DOM rendering is used for all nodes, then high-quality detailed information is provided, but network resource consumption increases due to repeated data transmission
Solution Approach 1:
The patent creates a canvas element as a visual copy or snapshot of the graph data. This canvas copy can be rendered efficiently without requiring repeated transmission of the underlying data, reducing network resource consumption while still providing visual representation of the information.
Solution Approach 2:
The system dynamically determines whether to use DOM or canvas rendering based on the number of nodes. This dynamic selection optimizes the balance between information detail quality and network resource consumption by using the appropriate rendering method for the specific dataset size.
Data Source
Figure 1
Figure 2
Figure 3
AI summary
A system comprising a computer-readable storage medium storing at least one program and a method for generating graphical representations of data are presented. In example embodiments, the method may include generating a graphical representation of a dataset using a first rendering convention. The method may further include receiving user input requesting an adjustment to the scale level of the graphical representation and determining that the scale level specified by the user input is above a predefined threshold. In response to determining that the scale level is above the predefined threshold, the graphical representation of the dataset is updated in accordance with the scale level using a second rendering convention.