Chapter 8 — Lab 1

Lab 1 · 数据采集

CSV / JSON / TSV 数据采集 · Promise · d3.autoType()

01

掌握常见数据格式(CSV、JSON、TSV)的特点与适用场景

02

熟练使用 d3.csv()、d3.json()、d3.tsv() 加载外部数据文件

03

理解 Promise 链式调用与异步数据加载的完整流程

04

学会使用 d3.autoType() 进行自动类型推断

核心概念
d3.csv()d3.json()d3.tsv()d3.dsv()d3.autoType()PromiseCSV/JSON/TSV

数据是可视化的根基。本阶段你需要找到适合自己项目的数据集,理解其结构,并使用 D3.js 将数据加载到可视化页面中。

01 选择并获取数据源

推荐从以下公开数据源寻找数据集:

• Kaggle Datasets(https://www.kaggle.com/datasets)

• UCI Machine Learning Repository

• 中国国家数据统计局

• 各行业公开 API(天气、股票、空气质量等)

选择标准:数据量 100~5000 条、至少包含 3 个可分析的字段、字段类型丰富(数值、分类、时序中的两种以上)。

下载数据后,回答以下问题(写入实验报告):

① 数据来源是什么?是否可靠/权威?

② 数据总量多少条?有哪些字段?

③ 数据更新时间是什么时候?

02 理解数据格式

常见数据格式对比:

CSV(Comma-Separated Values)

优点:体积小、易于 Excel 编辑、被所有工具支持

缺点:不支持嵌套结构,类型需手动声明

适用:表格型数据、统计数据

JSON(JavaScript Object Notation)

优点:支持嵌套结构,类型自描述,与 Web 技术天然兼容

缺点:文件体积较大

适用:API 返回值、复杂结构数据

TSV(Tab-Separated Values)

优点:字段值内可含逗号,适合文本数据

缺点:非标准格式,部分工具支持差

适用:生物信息、基因数据

03 使用 D3 加载数据

D3 提供了统一的数据加载接口,所有加载函数均返回 Promise:

d3.csv('data.csv').then(data => {
  console.log(data.length, data.columns);
});

d3.json('data.json').then(data => {
  console.log(data);
});

Promise.all([
  d3.csv('main.csv'),
  d3.json('meta.json')
]).then(([mainData, metaData]) => {
  // 两文件都加载完成后执行
});
04 数据质量检查与类型推断

加载后首先检查数据质量:

d3.csv('data.csv', d3.autoType).then(data => {
  // 自动将字符串数字转换为原生类型
  console.log(typeof data[0].year); // 'number'

  // 检查缺失值
  const missing = data.filter(d =>
    Object.values(d).some(v => v == null)
  );
  console.log(`缺失值记录: ${missing.length}`);

  // 检查数值字段范围
  const extent = d3.extent(data, d => d.value);
  console.log(`范围: ${extent}`);
});

将以上检查结果截图写入实验报告。

💡 提示

数据质量决定可视化上限。认真对待数据探索阶段,了解每个字段的含义、分布和关系,这将直接影响后续所有设计决策。建议在实验报告中绘制数据字段清单表格。

📦 交付物

实验报告(Word 填写): ① 数据来源说明(名称、URL、数据量) ② 数据字段清单(含字段名、类型、含义) ③ 数据加载代码截图 ④ 数据质量检查结果