Multidimensional data analysis display

Basic Concepts of Multidimensional Data Analysis and Display

The core of multidimensional data analysis and display lies in presenting complex data in an intuitive manner. ECharts, as a powerful visualization library, can handle datasets containing multiple dimensions, expressing data characteristics through various visual channels such as axes, colors, sizes, and more. For example, sales data may include multiple dimensions like time, region, product category, and sales volume, which traditional two-dimensional charts struggle to fully represent, necessitating more advanced visualization solutions.

Multidimensional Data Encoding in ECharts

ECharts employs visual encoding theory to achieve multidimensional display, with primary encoding methods including:

1. X/Y axes in Cartesian coordinates
2. Color mapping
3. Graphic size
4. Animation effects
5. Tooltip interaction

// Example of 5-dimensional data: product, time, region, sales volume, profit margin
option = {
  dataset: {
    source: [
      ['Product A', '2020Q1', 'East China', 4200, 0.32],
      ['Product B', '2020Q1', 'South China', 3800, 0.28],
      // More data...
    ]
  },
  xAxis: { type: 'category' },  // 1st dimension: product
  yAxis: {},                    // 2nd dimension: sales volume
  visualMap: {                  // 3rd dimension: profit margin
    dimension: 4,
    min: 0.1,
    max: 0.5,
    inRange: {
      color: ['#d94e5d', '#eac736', '#50a3ba']
    }
  },
  series: {
    type: 'scatter',
    encode: {
      x: 0,  // Product dimension
      y: 3,  // Sales volume dimension
      tooltip: [0,1,2,3,4]  // Display all dimensions
    }
  }
}

Common Multidimensional Chart Types

Parallel Coordinates

Suitable for analyzing relationships in 4+ dimensions, where each vertical axis represents a dimension:

option = {
  parallelAxis: [
    { dim: 0, name: 'Price' },
    { dim: 1, name: 'Sales' },
    { dim: 2, name: 'Rating' },
    { dim: 3, name: 'Inventory' }
  ],
  series: {
    type: 'parallel',
    data: [
      [12.99, 356, 4.8, 120],
      [9.99, 589, 4.5, 85],
      // ...
    ]
  }
}

Radar Chart

Ideal for comparing multidimensional performance metrics:

option = {
  radar: {
    indicator: [
      { name: 'Sales', max: 100 },
      { name: 'Service', max: 100 },
      { name: 'Logistics', max: 100 },
      { name: 'After-sales', max: 100 }
    ]
  },
  series: [{
    data: [
      { value: [85, 90, 78, 83] },
      { value: [72, 82, 95, 65] }
    ]
  }]
}

Interactive Multidimensional Analysis

ECharts provides various interactive methods to explore multidimensional data:

1. Data zoom: Focus on specific data ranges
2. Legend filtering: Filter by dimension values
3. Brush highlighting: Rectangular/polygonal selection
4. Dynamic sorting: Change dimension priority

// Brush example
option = {
  brush: {
    toolbox: ['rect', 'polygon', 'keep', 'clear'],
    throttleType: 'debounce',
    throttleDelay: 300
  },
  series: {
    type: 'scatter',
    dimensions: ['GDP', 'Per Capita Income', 'Population', 'Area'],
    // ...
  }
}

Advanced Multidimensional Visualization Techniques

Sunburst Chart for Hierarchical Dimensions

option = {
  series: {
    type: 'sunburst',
    data: [{
      name: 'East China',
      children: [
        { name: 'Shanghai', value: 2400 },
        { name: 'Jiangsu', value: 3800 }
      ]
    }],
    radius: [0, '90%'],
    label: { rotate: 'radial' }
  }
}

3D Scatter Plot

Requires the echarts-gl extension:

option = {
  grid3D: {},
  xAxis3D: { type: 'value' },
  yAxis3D: { type: 'value' },
  zAxis3D: { type: 'value' },
  series: [{
    type: 'scatter3D',
    data: [[1, 2, 3], [4, 5, 6]],
    symbolSize: 12,
    itemStyle: {
      color: function(params) {
        // Color based on fourth dimension data
        return palette[Math.floor(params.data[3]/10)]
      }
    }
  }]
}

Performance Optimization Strategies

When handling large-scale multidimensional data, consider:

1. Sampling and dimensionality reduction: Aggregate raw data
2. Progressive rendering: Load large datasets in chunks
3. WebWorker: Avoid blocking the main thread
4. Visual simplification: Reduce unnecessary decorative elements

// Large dataset example
option = {
  dataset: {
    source: bigData,
    dimensions: ['date', 'value1', 'value2', 'value3']
  },
  dataZoom: [{
    type: 'slider',
    filterMode: 'filter'  // Avoid re-rendering
  }],
  series: {
    progressive: 400,  // Progressive rendering
    type: 'scatter',
    // ...
  }
}

Practical Examples of Multidimensional Data Analysis

An e-commerce analytics dashboard might include:

1. Geographic heatmap: Display regional distribution
2. Parallel coordinates: User behavior paths
3. Relation graph: Product association purchases
4. Stacked bar chart: Time trend analysis

// Comprehensive dashboard example
option = {
  grid: [
    { left: '5%', top: '10%', width: '45%', height: '40%' },  // Map
    { right: '5%', top: '10%', width: '45%', height: '40%' }, // Bar chart
    // ...
  ],
  series: [
    { type: 'map', gridIndex: 0, /*...*/ },
    { type: 'bar', gridIndex: 1, /*...*/ }
  ]
}

Custom Visual Mapping Solutions

Go beyond default visual encoding methods:

option = {
  visualMap: {
    type: 'piecewise',
    pieces: [
      { min: 0, max: 50, color: '#93CE07' },
      { min: 50, max: 100, color: '#FBDB0F' }
    ],
    dimension: 2,
    seriesIndex: 0
  },
  series: {
    symbolSize: function(data) {
      // Determine point size based on third dimension data
      return Math.sqrt(data[2]) * 2;
    }
  }
}

Dynamic Multidimensional Data Updates

Implement real-time multidimensional display for data streams:

function updateChart() {
  const newData = generateMultiDimData();
  myChart.setOption({
    dataset: { source: newData },
    series: [{
      dimensions: ['time', 'value', 'category', 'status']
    }]
  });
}
setInterval(updateChart, 5000);