G2 Data Transformations
website·Indexed 36 days ago
https://g2.antv.vision/zhDocumentation for G2 version 5.4.8 data transformation functions, including binX for discrete interval generation, diffY for area chart boundary processing, dodgeX for grouped layouts, flexX for dynamic bar widths, and aggregation tools like group, groupX, groupY, and groupColor. Also covers visual adjustments such as jitter, jitterX, and jitterY to prevent data point overlap, and normalizeY for scaling data to a 0-1 range.
What's inside G2
- Data Labels in G2 are used to add content annotations to charts, helping to reduce misunderstandings and emphasize key data or trends. Depending on the chart type, labels can consist of text values and connector lines. For example, pie charts, donut charts, and rose charts typically use connector lines to link label text to the mark graphics.
Overview of the G2 Axis component
The Axis component in G2 acts as the 'ruler' of a chart, mapping data values to visual positions. It uses scales, labels, and grid lines to help users understand data distribution and proportions, correlating numerical data with specific positions on the chart.Overview of G2 Theme editor configuration properties
The Theme editor allows customization of the
wordCloudmark through the following top-level properties:encode(Required): Maps data to visual channels (x, y, color, size).labels: Custom node data labels (Type:label[], Default:[]).layout: Configures layout settings likepaddingandrotate.padding: Sets the container margin (Type:number, Default:0).scale: Defines graphic scaling rules for x, y, series, and size.style: Configures the general graphic style of the word cloud.
Overview of G2 Visualization Philosophy
G2 is based on the 'Grammar of Graphics' philosophy, which rejects rigid chart classifications in favor of a compositional approach. Instead of using templates, G2 describes visualizations using basic marks and components (scales, coordinate systems, etc.). This allows developers to build complex, custom charts by composing marks with different purposes, reducing the reliance on pre-defined chart types and focusing on visual thinking.Overview of G2 Coordinate Systems
G2 provides several coordinate systems to transform how data is mapped to the visual plane. The default is the Cartesian system, but G2 also supports a class of "Radial Coordinate Systems" used for circular charts.Overview of Sankey diagrams in G2
A Sankey diagram is a flow diagram used to describe the movement of values from one set to another. It is characterized by maintaining energy balance (starting flow equals ending flow), using line widths to proportionally represent flow share, and using node widths to represent flow magnitudes. It is typically used for analyzing energy, material composition, and financial data.Overview of surface3D
Thesurface3Dfeature in G2 is primarily used for drawing 3D surface charts.Overview of AntV G2 Visualization Grammar
G2 is a declarative, functional-style grammar for creating web-based visualizations used for report building, data exploration, and storytelling. It is based on a component-based programming paradigm and utilizes several core concepts to compose visualizations:
- Mark: Used to draw data-driven graphics.
- Transform: Used to derive data.
- Scale: Maps abstract data to visual data.
- Coordinate: Applies point transformations to spatial channels.
- Composition: Manages and enhances views.
- Animation: Handles data-driven and continuous morphing animations.
- Interaction: Allows manipulation of views and display of detailed information.
Overview of Server-Side Rendering (SSR) in G2
Server-Side Rendering (SSR) in G2 involves rendering charts in non-browser environments (such as Node.js, Python, Java, or PHP). Unlike Client-Side Rendering (CSR), SSR produces static images without interactivity or animations.
Common use cases include:
- Improving page load speed by pre-rendering images on the backend.
- Creating batch processing scripts for data distribution.
- Building server-side visualization services.
- Generating images for screenshot comparison in unit testing.
Overview of Sunburst Charts in G2
Sunburst charts in G2 use nested rings of sectors to visualize hierarchical data and proportions. They are particularly useful for representing multi-level structures where the inner circles represent the root or higher-level categories and the outer rings represent more granular sub-categories.Overview of Sankey Diagrams
A Sankey diagram is a specialized flow diagram used to visualize the flow of values between sets of nodes. It is commonly applied in energy, material composition, and financial analysis. The primary characteristic of a Sankey diagram is that the width of the branches is proportional to the flow quantity, adhering to the principle of flow conservation (the total width of incoming flows equals the total width of outgoing flows).Overview of Circle Packing (pack) in G2
Circle Packing is a variant of tree structure diagrams that uses circles instead of rectangles to represent a hierarchy layer by layer. It is primarily used to visualize containment relationships between data entities.