Chart-Type Agnostic Scene Graph for Interactive Rendering
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing web-based charting systems face performance issues due to high machine resource consumption and decreased computer performance when handling large data sizes or complex chart features, particularly in interactive chart rendering and animation.
Innovation Solution
A chart-type agnostic data structure is employed, where the server-side chart layout engine generates a scene graph that can be transmitted to and rendered by a web browser, allowing chart layout and rendering to exist separately, reducing client-side processor load and memory usage while enabling interactivity and animation.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of operation
If chart layout and rendering are performed on the client side, then interactivity and animation can be implemented, but machine resource consumption increases and computer performance decreases
Solution Approach 1:
The system segments the charting process into two distinct phases: layout computation performed server-side using D3.js, and rendering/animation performed client-side using WebGL. This segmentation allows complex layout calculations to be offloaded from the client, reducing machine resource consumption while preserving interactivity and animation capabilities on the client side.
Solution Approach 2:
A scene graph data structure serves as an intermediary between the server-side layout engine and the client-side rendering engine. The scene graph captures the visual representation and hierarchical structure of the chart, enabling seamless transmission of layout information to the client for efficient rendering without requiring the client to perform complex layout calculations.
2Adaptability or versatility
If more chart features are added, then chart functionality improves, but client-side processor load and memory usage increase
Solution Approach 1:
The system extracts the computationally intensive layout computation functionality from the client side and relocates it to the server side. This extraction allows rich chart features to be implemented without increasing client-side processor load, as the server handles the heavy computational burden of processing additional chart features and data.
3Use of energy by moving object
If chart layout is performed on the server, then client-side resource usage is reduced, but network bandwidth is consumed for transmitting layout data
Solution Approach 1:
The system changes the parameter representation by encoding the scene graph in a compact JSON format that efficiently represents the visual hierarchy and styling information. This parameter optimization reduces the size of transmitted data, minimizing network bandwidth consumption while enabling server-side layout computation and client-side rendering.
4Adaptability or versatility
If a chart-type agnostic data structure is used, then the system can handle any chart type, but data structure complexity increases
Solution Approach 1:
The scene graph data structure is designed as a universal, chart-type agnostic structure that can represent any chart type through a consistent hierarchical model. This universal structure uses standardized node types and attributes that can accommodate diverse chart requirements, achieving versatility without proportionally increasing complexity through systematic design.
Data Source
AI summary
Generating a chart-type agnostic data structure for defining a chart for use in chart rendering, animation, interactivity, and accessibility via a web client is provided. Aspects of a charting system are operative to represent output of a server-side chart layout engine in a data structure that can transmitted to and consumed by the web client for rendering an interactive chart. For example, aspects of the charting system enable for chart layout and chart rendering to exist separately, providing efficient chart layout and preventing external exposure of chart layout code.