AI 助理
备案控制台
开发者社区 大数据 文章 正文

【数据篇】34 # 如何处理多元变量？

2023-02-26 158
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【数据篇】34 # 如何处理多元变量？

说明

【跟月影学可视化】学习笔记。



从数据到图表展现

2014 年北京市的天气历史数据（csv 格式）

be227ce4ff914068b0b37dc907d493ac.png


这里使用QCharts 图表库折线图来展示平均气温

c38cc9c0ba314855aabf1ce87a10858f.png

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2014 年北京市的天气</title>
    </head>
    <body>
        <div id="app" style="width: 1200px; height: 600px"></div>
        <script src="https://d3js.org/d3.v6.js"></script>
        <script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>
        <script src="https://unpkg.com/@qcharts/core/dist/index.js"></script>
        <script>
            (async function () {
                // 通过 fetch 读取 csv 的数据
                const rawData = await (await fetch("./data/beijing_2014.csv")).text();
                console.log(rawData)
                // 使用 d3 的 csvParse 方法，将数据解析成 JSON 数组
                const data = d3.csvParse(rawData);
                // 截取了 1 月到 3 月的平均气温数据
                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);
                const { Chart, Line, Legend, Tooltip, Axis } = qcharts;
                // 创建图表（Chart）并传入数据
                const chart = new Chart({
                    container: "#app",
                });
                let clientRect = { bottom: 50 };
                chart.source(dataset, {
                    row: "category",
                    value: "temperature",
                    text: "date",
                });
                // 创建图形（Visual)，这里创建的是折线图，所以使用 Line 对象；
                const line = new Line({ clientRect });
                // 创建横、纵两个坐标轴（Axis）、提示（ToolTip）和一个图例（Legend）
                const axisBottom = new Axis({ clientRect }).style(
                    "grid",
                    false
                );
                axisBottom.attr("formatter", (d) => "");
                const toolTip = new Tooltip({
                    title: (arr) => {
                        return "平均气温";
                    },
                });
                const legend = new Legend();
                const axisLeft = new Axis({ orient: "left", clientRect })
                    .style("axis", false)
                    .style("scale", false);
                // 将图形、坐标轴、提示和图例都添加到图表上
                chart.append([line, axisBottom, axisLeft, toolTip, legend]);
            })();
        </script>
    </body>
</html>

562d2f0576f14be887333e15d185b396.png



处理多元变量

上面只有平均气温一个变量，一张图表怎么展示多元变量呢？



在一张图表上绘制多元变量

最简单的方式是直接在图表上同时绘制多个变量，每个变量对应一个图形，这样一张图表上就同时显示多个图形。


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>在一张图表上绘制多元变量</title>
    </head>
    <body>
        <div id="app" style="width: 1200px; height: 600px"></div>
        <script src="https://d3js.org/d3.v6.js"></script>
        <script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>
        <script src="https://unpkg.com/@qcharts/core/dist/index.js"></script>
        <script>
            (async function () {
                // 通过 fetch 读取 csv 的数据
                const rawData = await (
                    await fetch("./data/beijing_2014.csv")
                ).text();
                console.log(rawData);
                // 使用 d3 的 csvParse 方法，将数据解析成 JSON 数组
                const data = d3.csvParse(rawData).filter(d => new Date(d.Date).getMonth() < 3);
                // 截取了 1 月到 3 月的平均气温数据
                const dataset1 = data.map((d) => {
                    return {
                        value: Number(d["Temperature(Celsius)(avg)"]),
                        date: d.Date,
                        category: "平均气温",
                    };
                });
                console.log(dataset1);
                // 截取了 1 月到 3 月的平均湿度数据
                const dataset2 = data.map((d) => {
                    return {
                        value: Number(d["Humidity(%)(avg)"]),
                        date: d.Date,
                        category: "平均湿度",
                    };
                });
                console.log(dataset2);
                const { Chart, Line, Legend, Tooltip, Axis } = qcharts;
                // 创建图表（Chart）并传入数据
                const chart = new Chart({
                    container: "#app",
                });
                let clientRect = { bottom: 50 };
                chart.source([...dataset1, ...dataset2], {
                    row: "category",
                    value: "value",
                    text: "date",
                });
                // 创建图形（Visual)，这里创建的是折线图，所以使用 Line 对象；
                const line = new Line({ clientRect });
                // 创建横、纵两个坐标轴（Axis）、提示（ToolTip）和一个图例（Legend）
                const axisBottom = new Axis({ clientRect }).style(
                    "grid",
                    false
                );
                axisBottom.attr("formatter", (d) => "");
                const toolTip = new Tooltip({
                    title: (arr) => {
                        return "平均气温";
                    },
                });
                const legend = new Legend();
                const axisLeft = new Axis({ orient: "left", clientRect })
                    .style("axis", false)
                    .style("scale", false);
                // 将图形、坐标轴、提示和图例都添加到图表上
                chart.append([line, axisBottom, axisLeft, toolTip, legend]);
            })();
        </script>
    </body>
</html>

434d2a11aec8474988a89b776039b681.png


用散点图分析变量的相关性

分析两个变量的相关性，可以使用散点图，散点图有两个坐标轴，其中一个坐标轴表示变量 A，另一个坐标轴表示变量 B。


8607663ea9f8415d83c441690a8c888c.png



下面例子是平均气温和露点的相关性以及平均湿度和露点的相关性：

在空气中水汽含量不变， 并且气压一定的情况下， 空气能够冷却达到饱和时的温度就叫做露点温度， 简称露点， 它的单位与气温相同。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>用散点图分析变量的相关性</title>
    </head>
    <body>
        <div id="app" style="width: 1200px; height: 600px"></div>
        <script src="https://d3js.org/d3.v6.js"></script>
        <script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>
        <script src="https://unpkg.com/@qcharts/core/dist/index.js"></script>
        <script>
            (async function () {
                // 通过 fetch 读取 csv 的数据
                const rawData = await (
                    await fetch("./data/beijing_2014.csv")
                ).text();
                console.log(rawData);
                // 使用 d3 的 csvParse 方法，将数据解析成 JSON 数组
                const data = d3.csvParse(rawData);
                const dataset1 = data.map(d => {
                    return {
                        value: Number(d['Temperature(Celsius)(avg)']),
                        tdp: Number(d['Dew Point(Celsius)(avg)']),
                        category: '平均气温与露点'
                    }
                });
                const dataset2 = data.map(d => {
                    return {
                        value: Number(d['Humidity(%)(avg)']),
                        tdp: Number(d['Dew Point(Celsius)(avg)']),
                        category: '平均湿度与露点'
                    }
                });
                const { Chart, Scatter, Legend, Tooltip, Axis } = qcharts;
                // 创建图表（Chart）并传入数据
                const chart = new Chart({
                    container: "#app",
                });
                let clientRect = { bottom: 50 };
                chart.source([...dataset1, ...dataset2], {
                    row: "category",
                    value: "value",
                    text: "tdp",
                });
                // 创建横、纵两个坐标轴（Axis）、提示（ToolTip）和一个图例（Legend）
                const scatter = new Scatter({
                    clientRect,
                    showGuideLine: true,
                });
                const toolTip = new Tooltip({
                    title: (data) => data.category,
                    formatter: (data) => {
                        return `温度和湿度：${data.value}C  露点：${data.tdp}% `
                    }
                });
                const legend = new Legend();
                const axisLeft = new Axis({ orient: "left", clientRect })
                    .style("axis", false)
                    .style("scale", false);
                const axisBottom = new Axis();
                // 将图形、坐标轴、提示和图例都添加到图表上
                chart.append([scatter, axisBottom, axisLeft, toolTip, legend]);
            })();
        </script>
    </body>
</html>

可以看到平均气温和露点以及平均湿度和露点都是成正相关的，不过露点与温度的相关性更强，因为散点更集中一些。


86fe496d33e94cc7ae4c2365db6d2b96.png



散点图和相关性之间关系的总结图：

c546bb8e355d4b29b46e79b8d86776e2.png



散点图的扩展


散点图也有明显的局限性，那就是它的维度只有二维，所以它一般只能处理二元变量，超过二维的多元变量的相关性，得引入比如颜色、透明度、大小等信息来表示额外的数据维度，这样才能处理多维数据。


例子可以参考这篇：厉害了，散点图还能这么画！

49a6a2cbe7fc4901ad549cb14e576f68.png



这是一个加州房产价格的数据集，其中共有10个属性，包含经度、纬度、房屋年龄中位数、总房间数、总卧室数、人口数、家庭数、收入中位数、房屋价值中位数和该地区离大海的距离。


在这个案例中，散点图大致的勾勒出了加州的地理轮廓，一个点代表了一个街区，用alpha呈现了街区密集度，s呈现了人口密集度，c反映房价高低，再加上横纵坐标的经纬度，一共反映了5个维度的信息。


   通过设置参数 alpha，控制散点的透明度，设置了透明度之后，颜色越深的部分代表该区域的街区密集程度更大


   通过设置参数 s，将散点的大小和人口多少挂钩


   通过设置参数 c，将颜色和房价高低挂钩，通过颜色的渐变来展现房价高低，颜色由蓝到红代表了价格由低到高


17f6462e8eb04dc4bc70aa3234c300ec.png




通过这个散点图就可以得到结论：

  • 房价比较高的区域集中于两个中心，且都靠近海湾
  • 房价高的地方对应的人口密集度也较高



其他图表形式


北大疫情可视化工作分享里弄的疫情变化晴雨表，每个地区每日的新增确诊用方块表示，方块的大小表示具体的数量，方块的颜色表示和前一天比较，是否有更多的新增确诊病例。


da83c04130a94ae3944a5c45d8124017.png


还有平行坐标图跟热力图


73eb59a9b5ef4ee884d833161aef6056.png


三维直方图跟三维气泡图

f0c3139db49e4ee09fc263f57badca01.png

文章标签：
数据可视化
凯小默
目录
相关文章
vohelon
|
6月前
|
数据采集 数据挖掘 数据处理
数据清洗的主要步骤包括**理解数据、处理重复值、处理空缺值、处理异常值、数据标准化和数据收集
【4月更文挑战第3天】数据清洗的主要步骤包括**理解数据、处理重复值、处理空缺值、处理异常值、数据标准化和数据收集
vohelon
304 2
CamilleKing
|
1天前
|
存储 机器学习/深度学习 数据可视化
数据集中存在大量的重复值，会对后续的数据分析和处理产生什么影响？
数据集中存在大量重复值可能会对后续的数据分析和处理产生多方面的负面影响
CamilleKing
21 10
c的前世今生
|
12天前
|
传感器 存储 索引
如何解决 analogRead()函数读取到的模拟值不准确的问题
在使用analogRead()函数时，若读取到的模拟值不准确，可以通过校准ADC、增加采样次数取平均值、使用外部参考电压或检查电路连接等方式来提高读取精度。
c的前世今生
38 3
张飞的猪
|
5月前
|
SQL 安全 数据挖掘
Elasticsearch如何聚合查询多个统计值，如何嵌套聚合？并相互引用，统计索引中某一个字段的空值率？语法是怎么样的？
Elasticsearch聚合查询用于复杂数据分析，包括统计空值率。示例展示了如何计算字段`my_field`非空非零文档的百分比。查询分为三步：总文档数计数、符合条件文档数计数及计算百分比。聚合概念涵盖度量、桶和管道聚合。脚本在聚合中用于动态计算。常见聚合类型如`sum`、`avg`、`date_histogram`等。组合使用可实现多值统计、嵌套聚合和空值率计算。[阅读更多](https://zhangfeidezhu.com/?p=515)
张飞的猪
297 0
Elasticsearch如何聚合查询多个统计值，如何嵌套聚合？并相互引用，统计索引中某一个字段的空值率？语法是怎么样的？
干饭小白
|
存储 编译器
数据类型的本质分析
数据类型的本质分析
干饭小白
102 0
iOS开发欢乐使者
|
存储 程序员 C语言
c++ 如何做出实现一组数据的实际索引
c++ 如何做出实现一组数据的实际索引
iOS开发欢乐使者
53 0
漏刻有时
|
PHP
php清洗数据实战案例(4)：按照关联数组相同值名称进行筛选后对不同的指标予以合并计算的解决方案
php清洗数据实战案例(4)：按照关联数组相同值名称进行筛选后对不同的指标予以合并计算的解决方案
漏刻有时
65 0
游客6clkame7u5cdc
|
存储 程序员 C语言
c++ 如何做出实现一组数据的实际索引
C++是一种计算机高级程序设计语言， 由​​C语言​​​扩展升级而产生 ， 最早于1979年由​​本贾尼·斯特劳斯特卢普​​在AT&T贝尔工
游客6clkame7u5cdc
60 0
Deephub
|
测试技术
参数与非参数检验：理解差异并正确使用
数据科学是一个快速发展的领域，它在很大程度上依赖于统计技术来分析和理解复杂的数据集。这个过程的一个关键部分是假设检验，它有助于确定从样本中获得的结果是否可以推广到总体。
Deephub
323 0
云课程笔记
|
SQL 数据采集 NoSQL
数据预处理-航线类型操作类型-读取规则到程序|学习笔记
快速学习数据预处理-航线类型操作类型-读取规则到程序
云课程笔记
308 0
数据预处理-航线类型操作类型-读取规则到程序|学习笔记