Skip to main content

交互式图表使用说明

本网站已集成多个交互式Plotly图表组件，用于增强统计和机器学习笔记的可视化效果。

已实现的组件​

1. 交互式线性回归演示 (InteractiveLinearRegression)​

  • 位置: Statistics/线性回归
  • 功能:
    • 调整斜率和截距滑块来拟合数据
    • 实时观察MSE变化
    • 残差分布可视化
    • 理解最小二乘法原理

2. 多元线性回归3D可视化 (MultipleRegression3D)​

  • 位置: Statistics/线性回归
  • 功能:
    • 3D空间中的回归平面
    • 调整两个自变量的系数
    • 交互式旋转和缩放
    • 理解多元回归的几何意义

3. 回归系数解释器 (CoefficientInterpreter)​

  • 位置: Statistics/回归系数
  • 功能:
    • 可视化系数的边际效应
    • 实际案例计算演示
    • 理解ceteris paribus原则
    • 教育和收入预测示例

4. 特征重要性可视化 (FeatureImportanceViz)​

  • 位置: XML/intro
  • 功能:
    • 不同模型的特征重要性对比
    • 累积重要性分析
    • 交互式模型切换
    • 数据表格展示

技术栈​

  • Plotly.js: 交互式图表库
  • React-Plotly.js: React封装
  • Docusaurus MDX: 支持在Markdown中嵌入React组件

如何添加新的交互式图表​

  1. 创建组件: 在 src/components/ 下创建新的 .js 文件
  2. 导入Plotly: 使用 import Plot from 'react-plotly.js'
  3. 定义数据: 使用 useMemo 计算图表数据
  4. 渲染: 使用 <Plot> 组件渲染图表
  5. 创建样式: 创建对应的 .module.css 文件
  6. 在文档中使用: 在MDX文档中 import 并使用组件

示例：

import YourComponent from '@site/src/components/YourComponent';

<YourComponent />

注意事项​

  • 图表使用 responsive 和 useResizeHandler 确保响应式
  • 使用 config={{ displayModeBar: false }} 隐藏工具栏（如需要）
  • 所有数据计算使用 useMemo 避免不必要的重渲染
  • 样式使用 CSS Modules 保持隔离

性能优化建议​

  • 对于复杂计算，使用 useMemo 缓存结果
  • 限制数据点数量（< 1000个点）
  • 使用 displayModeBar: false 减少加载内容
  • 考虑使用静态图片作为fallback（如需要）

浏览器兼容性​

Plotly.js 支持所有现代浏览器：

  • Chrome/Edge (最新版本)
  • Firefox (最新版本)
  • Safari (最新版本)
  • 移动浏览器

未来扩展​

可能的增强方向：

  • 添加SHAP值可视化
  • LIME解释器
  • Partial Dependence Plot交互
  • 更多统计分布的可视化
  • 时间序列分析可视化