freeCodeCamp数据可视化项目：热力图实现指南-优快云博客

freeCodeCamp数据可视化项目：热力图实现指南

freeCodeCamp freeCodeCamp.org的开源代码库和课程。免费学习编程。项目地址: https://gitcode.com/gh_mirrors/fr/freeCodeCamp

项目概述

热力图(Heat Map)是一种通过颜色变化来展示数据密度的可视化方式，非常适合展示时间序列数据的分布模式。本项目将指导你使用D3.js库创建一个全球温度变化的热力图，通过颜色梯度直观展示不同年份各月份的温度变化趋势。

技术准备

核心工具

D3.js：强大的数据可视化JavaScript库
SVG：可缩放矢量图形，用于绘制可视化元素
CSS：样式设计
HTML：页面结构

数据源

项目使用全球温度数据集，包含1753年至2015年间的月度温度记录。

实现步骤详解

1. 基础结构搭建

首先创建HTML基础结构，包含必要的容器元素：

<div id="container">
  <h1 id="title">全球月度温度热力图</h1>
  <p id="description">1753-2015年全球温度变化趋势</p>
  <div id="heat-map"></div>
  <div id="legend"></div>
  <div id="tooltip"></div>
</div>

2. 数据加载与处理

使用D3的json()方法加载数据，并进行必要的预处理：

d3.json('temperature-data.json').then(data => {
  const dataset = data.monthlyVariance;
  
  // 数据转换：将方差转换为实际温度
  dataset.forEach(d => {
    d.temperature = data.baseTemperature + d.variance;
    d.month = d.month - 1; // 将月份转换为0-11范围
  });
});

3. 创建SVG画布

设置画布尺寸和边距：

const margin = {top: 60, right: 30, bottom: 80, left: 80};
const width = 1200 - margin.left - margin.right;
const height = 600 - margin.top - margin.bottom;

const svg = d3.select("#heat-map")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", `translate(${margin.left},${margin.top})`);

4. 构建比例尺

创建适合数据范围的x轴和y轴比例尺：

// x轴比例尺（年份）
const xScale = d3.scaleBand()
  .domain(dataset.map(d => d.year))
  .range([0, width])
  .padding(0.01);

// y轴比例尺（月份）
const yScale = d3.scaleBand()
  .domain([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11])
  .range([0, height])
  .padding(0.01);

5. 创建颜色比例尺

设计温度到颜色的映射关系：

const colorScale = d3.scaleQuantize()
  .domain([
    d3.min(dataset, d => d.temperature),
    d3.max(dataset, d => d.temperature)
  ])
  .range([
    "#2c7bb6",
    "#00a6ca",
    "#00ccbc",
    "#90eb9d",
    "#ffff8c",
    "#f9d057",
    "#f29e2e",
    "#e76818",
    "#d7191c"
  ]);

6. 绘制热力单元

为每个数据点创建矩形单元：

svg.selectAll(".cell")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("class", "cell")
  .attr("x", d => xScale(d.year))
  .attr("y", d => yScale(d.month))
  .attr("width", xScale.bandwidth())
  .attr("height", yScale.bandwidth())
  .attr("data-month", d => d.month)
  .attr("data-year", d => d.year)
  .attr("data-temp", d => d.temperature)
  .attr("fill", d => colorScale(d.temperature))
  .on("mouseover", showTooltip)
  .on("mouseout", hideTooltip);

7. 添加坐标轴

创建并格式化x轴和y轴：

// x轴（年份）
const xAxis = d3.axisBottom(xScale)
  .tickValues(xScale.domain().filter(year => year % 10 === 0));

svg.append("g")
  .attr("id", "x-axis")
  .attr("transform", `translate(0,${height})`)
  .call(xAxis);

// y轴（月份）
const monthNames = ["一月", "二月", "三月", "四月", "五月", "六月", 
                   "七月", "八月", "九月", "十月", "十一月", "十二月"];
const yAxis = d3.axisLeft(yScale)
  .tickFormat(month => monthNames[month]);

svg.append("g")
  .attr("id", "y-axis")
  .call(yAxis);

8. 创建图例

添加颜色图例帮助解读：

const legendWidth = 300;
const legendHeight = 30;

const legend = d3.select("#legend")
  .append("svg")
  .attr("width", legendWidth)
  .attr("height", legendHeight);

const legendScale = d3.scaleLinear()
  .domain(colorScale.domain())
  .range([0, legendWidth]);

const legendAxis = d3.axisBottom(legendScale)
  .tickSize(10)
  .tickValues(colorScale.range().map((d, i, arr) => 
    legendScale.invert(i * legendWidth / arr.length)));

legend.append("g")
  .attr("transform", `translate(0,${legendHeight - 10})`)
  .call(legendAxis);

legend.selectAll("rect")
  .data(colorScale.range())
  .enter()
  .append("rect")
  .attr("x", (d, i) => i * (legendWidth / colorScale.range().length))
  .attr("y", 0)
  .attr("width", legendWidth / colorScale.range().length)
  .attr("height", legendHeight - 10)
  .attr("fill", d => d);

9. 实现工具提示

添加交互式工具提示功能：

function showTooltip(event, d) {
  const tooltip = d3.select("#tooltip");
  tooltip
    .style("opacity", 0.9)
    .style("left", `${event.pageX + 10}px`)
    .style("top", `${event.pageY - 28}px`)
    .attr("data-year", d.year)
    .html(`
      ${d.year} - ${monthNames[d.month]}<br>
      温度: ${d.temperature.toFixed(2)}°C<br>
      方差: ${d.variance.toFixed(2)}°C
    `);
}

function hideTooltip() {
  d3.select("#tooltip").style("opacity", 0);
}