学习路径 / 进阶
数据与故事
Data as Material
让项目连接真实世界的数据,并把数据可视化——不是画图表,是讲一个故事。
从”我编的内容”到”真实的世界”
到目前为止,你页面上的所有文字都是你自己写的。这一节开始,数据从外面来。
数据的来源有两类:
静态数据集 —— 一个 CSV 或 JSON 文件,你下载下来用。适合起步。 API —— 一个网址,你的程序去问它,它实时回答。数据会变。
API 是什么
想象一个自动售货窗口:你按它规定的格式递一张条子(请求),它按规定的格式递回来一包东西(响应,通常是 JSON 格式)。
你不需要知道它内部怎么运作,只需要知道怎么提问、答案长什么样。
# 试一个不需要密钥的公开 API
curl "https://api.github.com/users/torvalds"
把返回的一大坨内容贴给 AI,问:“这里面哪些字段是有用的,帮我在页面上展示头像、名字和仓库数量。”
找数据的地方
- 国家统计局、各地开放数据平台
- 世界银行、联合国的公开数据集
- Our World in Data
- Kaggle 上的公开数据集
- 你自己的数据——聊天记录、消费账单、步数、听歌历史
最后一类往往最有意思。当数据是关于你自己的,你才真正知道哪些数字在撒谎、哪些沉默是有意义的。
可视化:先有话说
一个常见的顺序错误是:拿到数据 → 挑一种图表 → 画出来 → 想想它说明了什么。
反过来做:
- 看数据,找到一句你想说的话(“过去十年,这个数字翻了三倍,但只发生在三个城市”)
- 想清楚什么图形最能撑起这句话
- 让 AI 实现它
- 检查:一个不了解背景的人看完,能不能得到你想说的那句话?
跟 AI 说的时候把这句话直接告诉它:
我想用这份数据说明「增长高度集中在少数城市」。
帮我做一个能凸显这一点的可视化,用 D3 或 Chart.js。
不要用饼图。
一个提醒
数据从来不是中立的。谁收集的、统计口径怎么定的、哪些人没被统计进去——这些决定了它能说什么、不能说什么。
这一节先把技术做通。这个问题会在「谁在背后干活」那一节被完整展开。
本节产出
一个可视化原型,配 300 字说明:为什么选这个数据、想说什么、为什么用这种图形。
随堂自测
检查一下自己
3 题
API 大致相当于什么?
你的前端页面直接把 API 密钥写在 JavaScript 里,会发生什么?
关于数据可视化,本课的立场是?