34 | 数据处理（二）：如何处理多元变量？

月影



该思维导图由 AI 生成，仅供参考

你好，我是月影。
数据处理是一门很深的学问，想要学好它，我们不仅需要掌握很复杂的理论，还需要不断地积累经验。不过，其中也有一些基础的数据处理技巧，掌握它们，我们就能更好地入门可视化了。
比如我们上节课重点讲解的数据分类，就是其中一种非常基础的数据处理技巧，也是数据处理的第一步。这一节课，我会以处理 2014 年北京市的天气历史数据为例，来和你进一步讨论数据处理的基础技巧，包括从数据到图表的展现以及处理多元变量的方法。
从数据到图表展现一般来说，我们拿到的原始数据通常可以组织成表格的形式，表格中会有很多列，每一列都代表一个变量。比如，我们拿到的这份天气历史数据，它看起来可能是下面这样的：
这里有许多变量，比如时间、最高气温、平均气温、最低气温、最高湿度、平均湿度、最低湿度、露点等等。一般的情况下，我们会将其中我们最关心的一个变量平均气温，用一个图表展现出来。具体怎么做呢？我们可以来动手操作一下。
这份数据是 csv 格式的，是一张表，我们先用 D3.js 将数据读取出来，然后结构化成 JSON 对象。
const rawData = await (await fetch('beijing_2014.csv')).text();
const data = d3.csvParse(rawData);
const dataset = data.filter(d => new Date(d.Date).getMonth() < 3)
  .map(d => {return {temperature: Number(d['Temperature(Celsius)(avg)']), date: d.Date, category: '平均气温'}});
console.log(dataset);
如上面代码所示，我们通过 fetch 读取 csv 的数据。CSV 文件格式是用逗号和回车分隔的文本，所以我们用.text() 读取内容。然后我们使用 d3 的 csvParse 方法，将数据解析成 JSON 数组。最后，我们再通过数组的 filter 和 map，将我们感兴趣的数据取出来。这里，我们截取了 1 月到 3 月的平均气温数据。

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

本文介绍了如何处理可视化中的多元变量。作者以处理2014年北京市的天气历史数据为例，讨论了从数据到图表展现的基础技巧，并介绍了处理多元变量的方法。文章首先介绍了使用D3.js将原始数据读取并结构化成JSON对象，然后展示了如何使用图表库将平均气温数据呈现为折线图。接着，作者讨论了在同一张图表上绘制多元变量的方法，通过直接在图表上同时绘制多个变量的图形，实现了同时显示温度和湿度数据的折线图。文章还介绍了使用散点图分析变量的相关性，以及如何扩展散点图来处理多维数据。此外，还提到了其他图表形式如晴雨表、平行坐标图等来表示多维度的信息。总的来说，本文通过实际代码示例和技术讨论，为读者提供了处理多元变量的实用技术指导。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《跟月影学可视化》，新⼈⾸单¥68

立即购买

登录后留言

全部留言(1)

最新
精选

hey
请教下假如想把基于canvas的js图形库用到c++客户端除了依赖浏览器有没有别的实践思路
作者回复: C++应该有Canvas的库？可以结合嵌入式JS引擎把代码运行起来。这样应该移植比较简单。
2020-09-16
2
1

收起评论