Chapter 8 — Lab 1
CSV / JSON / TSV 数据采集 · Promise · d3.autoType()
掌握常见数据格式(CSV、JSON、TSV)的特点与适用场景
熟练使用 d3.csv()、d3.json()、d3.tsv() 加载外部数据文件
理解 Promise 链式调用与异步数据加载的完整流程
学会使用 d3.autoType() 进行自动类型推断
数据是可视化的根基。本阶段你需要找到适合自己项目的数据集,理解其结构,并使用 D3.js 将数据加载到可视化页面中。
推荐从以下公开数据源寻找数据集:
• Kaggle Datasets(https://www.kaggle.com/datasets)
• UCI Machine Learning Repository
• 中国国家数据统计局
• 各行业公开 API(天气、股票、空气质量等)
选择标准:数据量 100~5000 条、至少包含 3 个可分析的字段、字段类型丰富(数值、分类、时序中的两种以上)。
下载数据后,回答以下问题(写入实验报告):
① 数据来源是什么?是否可靠/权威?
② 数据总量多少条?有哪些字段?
③ 数据更新时间是什么时候?
常见数据格式对比:
CSV(Comma-Separated Values)
优点:体积小、易于 Excel 编辑、被所有工具支持
缺点:不支持嵌套结构,类型需手动声明
适用:表格型数据、统计数据
JSON(JavaScript Object Notation)
优点:支持嵌套结构,类型自描述,与 Web 技术天然兼容
缺点:文件体积较大
适用:API 返回值、复杂结构数据
TSV(Tab-Separated Values)
优点:字段值内可含逗号,适合文本数据
缺点:非标准格式,部分工具支持差
适用:生物信息、基因数据
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]) => {
// 两文件都加载完成后执行
});
加载后首先检查数据质量:
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、数据量) ② 数据字段清单(含字段名、类型、含义) ③ 数据加载代码截图 ④ 数据质量检查结果