Dynamic Network Graph Rendering Selector
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Current methods for displaying large network graphs in web browsers face performance limitations, particularly in rendering times and user interactivity, especially when dealing with thousands of vertices, leading to inefficient visualization and reduced interactivity.
Innovation Solution
A method that dynamically switches between scalable vector graphics, raster, and remote rendering engines based on the number of vertices in a network graph, using SVG for small graphs, raster for medium-sized graphs, and remote tile rendering for large graphs to maintain performance and interactivity.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Productivity
If a single rendering engine is used for all network graph sizes, then the system is simple to implement, but rendering performance degrades significantly for large graphs with thousands of vertices
Solution Approach 1:
The patent segments the rendering task by dividing network graphs into different size categories (small, medium, large) and assigning different rendering engines to each category. This segmentation allows each engine to be optimized for its specific size range, preventing performance degradation that would occur if a single engine had to handle all graph sizes.
Solution Approach 2:
The patent implements a dynamic rendering system that automatically selects the appropriate rendering engine based on the number of vertices in the network graph. The system dynamically adjusts its rendering approach by evaluating graph size metrics and routing to the most suitable engine, enabling optimal performance across varying graph complexities without manual intervention.
2Manufacturing precision
If SVG rendering is used for small graphs, then rendering quality and scalability are maintained, but rendering time increases for larger graphs
Solution Approach 1:
The patent applies different rendering qualities locally appropriate to each graph size category. For small graphs, SVG rendering provides high quality and scalability. For medium graphs, canvas rendering provides adequate quality with better performance. For large graphs, the system uses aggregation techniques that provide appropriate visual quality while dramatically reducing rendering time. Each local context (graph size) receives the quality level most appropriate to its needs.
Solution Approach 2:
The patent changes the rendering parameters and engine selection based on the number of vertices. When the vertex count exceeds certain thresholds, the system transitions from SVG to canvas rendering, and eventually to aggregation-based rendering. This parameter-driven approach allows the system to maintain high quality for small graphs while accepting different quality trade-offs for larger graphs in exchange for reduced rendering time.
3Speed
If canvas rendering is used for medium graphs, then rendering speed improves, but interactivity and scalability decrease
Solution Approach 1:
The patent creates a universal rendering system that can handle multiple graph sizes and interactivity requirements through a single multi-functional architecture. The canvas rendering engine is designed to work across the medium graph size range while maintaining sufficient interactivity. The system also provides fallback options and complementary features (such as hover effects, selection modes, and information displays) that enhance user interactivity regardless of the underlying rendering approach.
4Ease of manufacture
If the same rendering approach is used for all graph sizes, then the system is easy to maintain, but user experience deteriorates for large graphs
Solution Approach 1:
The patent implements a dynamic rendering system that automatically adapts to different graph sizes by selecting appropriate rendering engines. This dynamic approach maintains excellent user experience across all graph sizes by providing optimized rendering for each category, while the automated selection process keeps the system relatively easy to maintain by removing the need for manual intervention in rendering decisions.
Data Source
AI summary
A method of displaying a network graph with a computing system includes accessing data defining a network and including a plurality of vertices and a plurality of edges. If a number of vertices included in the network graph is below a first threshold, the network graph is locally rendering with a scalable vector graphics rendering engine of the computing system. If a number of vertices included in the network graph is between the first threshold and a second, higher, threshold, the network graph is locally rendered with a raster rendering engine of the computing system. If a number of vertices included in the network graph is above the second threshold, a remotely-rendered network graph rendered by a remote rendering engine is received at the computing system. The method further includes displaying the rendered network graph via a web browser of the computing system.