repository·v5·Indexed 11 days ago
https://github.com/antvis/g2A concise and progressive visualization grammar for Javascript based on the 'Grammar of Graphics'. G2 version 5.4.8 provides a declarative API for building dashboards, data exploration, and storytelling, supporting Canvas, SVG, WebGL, and Node.js rendering.
G2 is a concise and progressive visualization grammar designed for building dashboards, data exploration, and data storytelling. Key features include:
Sunburst charts are best used when you need to visualize hierarchical data with clear parent-child relationships and proportional distributions.
Suitable Data & Scenarios:
Comparison with other charts:
G2 has several related packages and integrations:
The theta coordinate system is a special polar coordinate system used to transform column charts into pie charts, donut charts, or sector charts. It works by combining a Transpose operation (exchanging x/y axes) with a Polar coordinate transformation, mapping data to angles on a fixed radius.
To create a pie or donut chart using theta, you typically use an interval type with a stackY transform to aggregate values into sectors.
chart.options({
type: 'interval',
data: data,
encode: { y: 'value', color: 'category' },
transform: [{ type: 'stackY' }],
coordinate: { type: 'theta' },
});Mark Transform is a mechanism in G2 used to modify data and mark options to support data analysis. It functions as a way to filter, modify, aggregate, and generate new channel values during the rendering process. This optimizes graphical displays and enhances data interpretability without requiring manual manipulation of the raw input data.
Common use cases include:
dodgeX, stackY, or jitterX to manage visual channel collisions (e.g., when multiple data points occupy the same position).bin and group during rendering, allowing you to operate directly on channel values.The Time scale is a continuous scale specifically designed for time series data. It maps time data (typically Date objects) to a continuous numerical range using the mapping function y = x.getTime() + b, where x is the time value and b is the offset.
Key capabilities include:
Date objects and date strings (when a comparison function is provided).A Bubble Map is a visualization that uses circular markers (bubbles) placed on a geographic map to represent data.
Note on G2 5.0 Support: G2 5.0 does not directly support complete map background functionality. To implement a Bubble Map, you must import additional map components and geographic data alongside G2.
A Legend in G2 is an auxiliary chart element used to distinguish different data types using visual channels like color, size, shape, and opacity. It also serves as a tool for data filtering.
G2 automatically generates legends when graphic attributes are mapped to data fields. If a single variable is mapped to multiple graphic attributes, G2 merges them into a simplified legend. The following non-spatial channels trigger automatic legend generation:
color: Legend based on color variations.opacity: Legend based on opacity variations.size: Legend based on size variations.shape: Legend based on shape variations.A Dot Map (or Dot Density Map) is a geographic visualization that represents data distribution density and patterns using densely distributed dots on a map. Each dot typically represents a specific quantity of statistical units (e.g., population, economic activity).
The quantize scale is a discretization scale used to divide a continuous data domain into several equal-width intervals and map those intervals to discrete values in a specified range.
[min, max] into $n$ equal intervals, where $n$ is the length of the range array. It does not consider data distribution.threshold scale which requires manual split points, quantize automatically calculates intervals based on the data domain.quantile: While quantize uses equal-width intervals, the quantile scale segments data based on quantiles to ensure each interval contains the same number of data points.With a data domain of [0, 100] and a range of ['Small', 'Medium', 'Large']:
0 - 33.33 $\rightarrow$ 'Small'33.33 - 66.67 $\rightarrow$ 'Medium'66.67 - 100 $\rightarrow$ 'Large'The pow scale is a continuous scale that applies an exponential transformation to input data before mapping it to an output range using the formula y = x ^ k, where k is the exponent parameter.
Use a pow scale when:
Note: When exponent = 1, the scale is equivalent to a linear scale. For better performance, use linear instead of pow with an exponent of 1.
y = x ^ k