编辑“︁JavaScript数据可视化基础”︁（章节）

= JavaScript数据可视化基础 =

== 介绍 ==
'''JavaScript数据可视化'''是指利用JavaScript及相关库将数据转换为图形或图表的过程，目的是通过直观的视觉形式帮助用户理解数据模式、趋势和异常值。它是现代Web开发中数据分析、商业智能和交互式仪表盘的核心技术之一。

数据可视化的常见形式包括：
* 折线图（趋势分析）
* 柱状图（比较数据）
* 饼图（比例分布）
* 散点图（相关性分析）
* 热力图（密度分布）

== 核心技术栈 ==
以下是实现JavaScript数据可视化的主要技术：

=== 原生API ===
使用Canvas或SVG进行基础绘图：
<syntaxhighlight lang="javascript">
// 使用Canvas绘制简单柱状图
const canvas = document.getElementById('myChart');
const ctx = canvas.getContext('2d');

// 数据
const data = [30, 60, 90, 120];
const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'];

// 绘制
data.forEach((value, i) => {
  ctx.fillStyle = colors[i];
  ctx.fillRect(50 + i * 100, canvas.height - value, 80, value);
});
</syntaxhighlight>

输出效果：在400×300像素的画布上显示4个不同颜色的垂直柱体。

=== 流行库对比 ===
{| class="wikitable"
|+ 主流可视化库对比
! 库名称 !! 特点 !! 适用场景
|-
| D3.js || 高度灵活，底层控制 || 复杂定制化需求
|-
| Chart.js || 简单易用，响应式 || 快速实现标准图表
|-
| ECharts || 丰富图表类型，动画效果 || 大数据量展示
|-
| Three.js || 3D渲染能力 || WebGL三维可视化
|}

== 核心概念 ==

=== 数据绑定 ===
在D3.js中的典型数据绑定模式：
<syntaxhighlight lang="javascript">
const dataset = [10, 20, 30, 40];
d3.select("body").selectAll("div")
  .data(dataset)
  .enter()
  .append("div")
  .style("height", d => `${d}px`);
</syntaxhighlight>

=== 比例尺（Scales） ===
数学公式表示线性比例尺：
<math>\text{output} = \frac{\text{input} - \text{domainMin}}{\text{domainMax} - \text{domainMin}} \times (\text{rangeMax} - \text{rangeMin}) + \text{rangeMin}</math>

D3实现示例：
<syntaxhighlight lang="javascript">
const scale = d3.scaleLinear()
  .domain([0, 100])  // 输入范围
  .range([0, 500]); // 输出范围

console.log(scale(50)); // 输出250
</syntaxhighlight>

== 实战案例 ==

=== 疫情数据仪表盘 ===
使用Chart.js创建实时数据看板：
<syntaxhighlight lang="javascript">
const ctx = document.getElementById('covidChart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    datasets: [{
      label: '确诊病例',
      data: [1000, 2000, 15000, 30000],
      borderColor: 'rgb(255, 99, 132)'
    }]
  }
});
</syntaxhighlight>

=== 交互式股票图表 ===
<mermaid>
sequenceDiagram
    participant 用户
    participant 图表
    用户->>图表: 鼠标悬停K线
    图表-->>用户: 显示详细数据提示框
    用户->>图表: 拖动时间轴
    图表-->>用户: 更新显示时间段数据
</mermaid>

== 性能优化 ==
处理大规模数据时的技巧：
1. 数据采样：展示数据子集
2. Web Workers：后台处理计算
3. 虚拟渲染：只绘制可见区域
4. GPU加速：使用WebGL

=== 百万级数据示例 ===
<syntaxhighlight lang="javascript">
// 使用ECharts的增量渲染
option = {
  dataset: {
    source: bigData // 包含1,000,000个点
  },
  series: {
    type: 'scatter',
    progressive: 1000 // 每次渲染1000个点
  }
};
</syntaxhighlight>

== 进阶主题 ==
* '''动态可视化'''：实时数据流处理（如WebSocket）
* '''地理可视化'''：Mapbox/Leaflet集成
* '''VR/AR可视化'''：A-Frame/Three.js结合
* '''机器学习集成'''：TensorFlow.js可视化

== 学习路径建议 ==
1. 掌握基础HTML/CSS/JavaScript
2. 学习SVG和Canvas API
3. 选择一个主库（推荐Chart.js或ECharts开始）
4. 实践项目：从静态图表到交互式可视化
5. 学习D3.js进行高级定制
6. 探索3D可视化（Three.js）

== 常见问题 ==
'''Q：应该选择Canvas还是SVG？'''
A：Canvas适合大数据量和动态效果，SVG适合需要DOM交互的场景。

'''Q：如何处理异步数据加载？'''
A：使用Promise或async/await模式：
<syntaxhighlight lang="javascript">
async function loadData() {
  const response = await fetch('data.json');
  const data = await response.json();
  renderChart(data);
}
</syntaxhighlight>

== 总结 ==
JavaScript数据可视化是将抽象数据转化为直观图形的强大工具。通过选择合适的库和掌握核心概念，开发者可以创建从简单图表到复杂交互式仪表盘的各种可视化应用。关键是要根据数据特性和用户需求选择适当的技术方案。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript数据可视化]]