教育者如何用 Observable 做教学？2025 最新交互式图表制作全流程

? 教育者如何用 Observable 做教学？2025 最新交互式图表制作全流程

?️ 准备工作：了解 Observable 的基本功能

? 第一步：明确教学目标和数据需求

? 第二步：选择合适的图表类型

• 折线图：适合展示数据随时间的变化趋势，比如股票价格、气温变化等。
• 柱状图：用于比较不同类别之间的数据差异，比如不同班级的考试成绩、不同地区的人口数量等。
• 饼图：展示各部分在总体中所占的比例，比如不同学科的课时分配、学生的兴趣爱好分布等。
• 散点图：分析两个变量之间的关系，比如身高与体重、学习时间与成绩等。
• 地图：呈现地理位置相关的数据，比如疫情分布、人口密度等。

? 第三步：编写代码创建图表

// 加载数据
const data = await FileAttachment('data.csv').csv();

// 定义 SVG 容器
const svg = d3.create('svg')
  .style('max-width', )
  .attr('height', );

// 定义比例尺
const xScale = d3.scaleLinear()
  .domain([, d3.max(data, d => d.value)])
  .range([, ]);

const yScale = d3.scaleBand()
  .domain(data.map(d => d.category))
  .range([, ])
  .padding(0.1);

// 绘制柱状图
svg.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', )
  .attr('y', d => yScale(d.category))
  .attr('width', d => xScale(d.value))
  .attr('height', yScale.bandwidth())
  .attr('fill', 'steelblue');

// 导出图表
svg.node();

? 第四步：添加交互元素提升教学效果

• 悬停提示：当鼠标悬停在图表元素上时，显示相关的数据信息。
• 点击事件：点击图表元素时，触发特定的操作，比如显示详细数据、跳转页面等。
• 滑动条：通过滑动条控制数据的范围，让学生直观地看到数据变化的影响。
• 下拉菜单：允许学生选择不同的数据维度进行展示，比如不同年份、不同地区的数据对比。

// 绘制柱状图并添加悬停提示
svg.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', )
  .attr('y', d => yScale(d.category))
  .attr('width', d => xScale(d.value))
  .attr('height', yScale.bandwidth())
  .attr('fill', 'steelblue')
  .on('mouseover', function(d) {
    d3.select(this)
      .attr('fill', 'orange')
      .append('title')
      .text(`Category: ${d.category}, Value: ${d.value}`);
  })
  .on('mouseout', function() {
    d3.select(this)
      .attr('fill', 'steelblue')
      .select('title')
      .remove();
  });

? 第五步：测试和优化图表

• 响应式设计：确保图表能够自适应不同的屏幕尺寸，比如在手机、平板和电脑上都能清晰显示。你可以使用 style('max-width', '100%') 来设置 SVG 容器的宽度，使其根据父容器的大小自动调整。
• 性能优化：避免在图表中使用过多的复杂元素，以免影响加载速度。如果数据量较大，可以考虑使用分页或数据抽样的方法。
• 兼容性测试：在不同的浏览器（如 Chrome、Firefox、Safari）和设备上测试图表，确保没有显示问题或交互异常。
• 用户反馈：邀请学生或同事试用图表，收集他们的反馈意见，根据反馈进行改进。

? 第六步：发布和分享图表

• 嵌入网页：将图表嵌入到教学网站或学习管理系统（LMS）中。你可以使用 @observablehq/runtime 库在自己的网页中运行 Observable 笔记本，或者直接生成嵌入代码，将图表插入到 HTML 页面中。
• 导出为静态文件：将图表导出为 PNG、SVG 或 PDF 格式，方便在课堂上展示或打印分发。
• 分享链接：通过 Observable 平台生成一个分享链接，学生可以直接点击链接访问图表。Observable 还支持协作编辑，你可以邀请学生共同编辑和完善图表。

? 案例：用 Observable 制作历史时间轴图

1. 数据准备：收集第二次世界大战的重要事件及其发生时间，整理成 CSV 文件，包含 “事件名称” 和 “时间” 两列。
2. 选择图表类型：时间轴图适合展示事件的先后顺序和时间跨度，因此选择时间轴图。
3. 编写代码：使用 D3.js 的 scaleTime 和 axisBottom 方法创建时间轴，使用 svg.append('line') 绘制时间线，使用 svg.append('text') 添加事件标签。
4. 添加交互元素：添加悬停提示，显示事件的详细描述；添加滑动条，允许学生选择不同的时间范围进行查看。
5. 测试和优化：确保时间轴在不同屏幕尺寸下都能正常显示，滑动条的交互效果流畅。
6. 发布和分享：将时间轴图嵌入到历史课程的网页中，或者生成分享链接发送给学生。

? 总结