Overview

Kernel Density Estimation (KDE) is a non-parametric statistical method used to estimate the probability density function of random variables. In G2, the KDE data transform can perform kernel density algorithm processing on specified data to generate probability density function (PDF) data. It uses the open-source library pdfast under the hood, which employs triangular kernel functions and is optimized to O(N + K) time complexity.

After data processing, two fields (default y and size) are added to the data, both of which are array types used to represent density distribution points and their corresponding density values.

Use Cases

1. Density Plot: Display continuous estimation of data distribution, showing data distribution more smoothly than histograms.

2. Violin Plot: Combine the characteristics of box plots and density plots, which can display both the distribution shape of data and key statistical information.

3. Multi-group data distribution comparison: Through the groupBy parameter, you can simultaneously display and compare data distribution of multiple groups.

4. Smooth data visualization: When you need to smooth discrete data points and show their overall trends and distribution.

5. Density analysis in different coordinate systems: Can be applied in Cartesian or polar coordinate systems to create data distribution visualizations from different perspectives.

Configuration

Complex Type Description

• as: Specifies the names of the two fields generated after KDE processing. The first field stores x values (i.e., positions of data points), and the second field stores y values (i.e., corresponding density values). Both fields are of array type, with length determined by the size parameter.

Parameter Adjustment Effects

• size: This parameter determines the fineness of the generated density curve. Larger values generate more points, resulting in finer density curves. In examples, you can see the effect of increasing from the default 10 to 20 or 30.

• width: This parameter controls the smoothness of the density curve, similar to the bandwidth parameter in kernel density estimation. Larger values result in smoother curves but may lose some details.

Examples

Basic Density Plot

The following example shows how to create a basic density plot displaying data distribution of different species:

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});
chart.options({
  type: 'density', // Set chart type to density plot
  data: {
    type: 'fetch', // Specify data type as network fetch
    value: 'https://assets.antv.antgroup.com/g2/species.json', // Set data URL
    transform: [
      {
        type: 'kde', // Use kernel density estimation (KDE) for data transformation
        field: 'y', // Specify KDE calculation field as 'y'
        groupBy: ['x', 'species'], // Group data by 'x' and 'species' fields
        size: 20, // Generate 20 data points to represent probability density function
      },
    ],
  },
  encode: {
    x: 'x', // Map 'x' field to x-axis
    y: 'y', // Map 'y' field to y-axis
    color: 'species', // Map 'species' field to color
    size: 'size', // Map 'size' field to graphic size
  },
  tooltip: false, // Disable chart tooltip
});
chart.render();

In this example, we set the size parameter to 20, which is larger than the default value of 10, to obtain finer density curves.

Violin Plot in Polar Coordinates

Using KDE in polar coordinates can create circular violin plots, providing new perspectives for data distribution visualization:

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});
chart.options({
  type: 'view',
  autoFit: true,
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/species.json',
  },
  coordinate: { type: 'polar' }, // Set to polar coordinate system
  children: [
    {
      type: 'density', // Density plot component
      data: {
        transform: [{ type: 'kde', field: 'y', groupBy: ['x', 'species'] }],
      },
      encode: {
        x: 'x',
        y: 'y',
        series: 'species',
        color: 'species',
        size: 'size',
      },
      tooltip: false,
    },
    {
      type: 'boxplot', // Box plot component for displaying violin plot
      encode: {
        x: 'x',
        y: 'y',
        series: 'species',
        color: 'species',
        shape: 'violin', // Set shape to violin
      },
      style: { opacity: 0.5, strokeOpacity: 0.5, point: false },
    },
  ],
});
chart.render();

This example shows how to combine KDE with box plots to create violin plots. In polar coordinates, violin plots are distributed in a circular pattern, providing different perspectives to observe data distribution.

Density Plot with Custom Parameters

By adjusting KDE parameters, you can control the smoothness and accuracy of density estimation:

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});
chart.options({
  type: 'density',
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/species.json',
    transform: [
      {
        type: 'kde',
        field: 'y',
        groupBy: ['x'],
        size: 30, // Increase sampling points for finer density curves
        width: 3, // Increase bandwidth for smoother curves
        min: 0, // Set minimum value of processing range
        max: 8, // Set maximum value of processing range
        as: ['density_x', 'density_y'], // Custom output field names
      },
    ],
  },
  encode: {
    x: 'x',
    y: 'density_x', // Use custom output field
    color: 'x',
    size: 'density_y', // Use custom output field
  },
  tooltip: false,
});
chart.render();

This example shows how to customize various KDE parameters:

1. size: 30 - Increase sampling points for finer density curves
2. width: 3 - Increase bandwidth for smoother curves
3. min: 0 and max: 8 - Set minimum and maximum values of processing range
4. as: ['density_x', 'density_y'] - Custom output field names

These parameter adjustments can help you obtain finer or smoother density curves, adjusting according to actual needs.

Summary

KDE data transform is a powerful tool in G2 that can help you create various density-related visualizations, such as density plots and violin plots. By adjusting its parameters, you can control the fineness and smoothness of density curves to meet different visualization needs.

Using KDE in different coordinate systems can provide different perspectives for data distribution. Combined with other chart types such as box plots, you can create richer data visualizations.

For more examples, you can check the Chart Examples - Violin Plot page.