人机交互原理及应用第九次实验报告

引言

在计算机科学中，有一个很重要的功能就是利用计算机语言对数据进行分析，得出分析结果后再利用图表来表达结论。今天我们将使用电商婴儿用户数据集，处理数据集、并利用得到的数据来制作图表。

过程

第一步：对数据文件进行读取

下载的文件是csv（逗号分隔值文件格式），有时也成为字符分隔值其文件以纯文本形式存储表格数据。纯文本意味着该文件是一个字符序列，不含必须像二进制数字那样被解读的数据。所以我们读取的时候只要像txt一样用fs同步读取即可。 读取文件 JavaScript中利用split()函数可以对将读取到的字符串进行分割。我们读取的文件中不同行的分割符为“\r\n”（回车符和换行符）。split()中的参数为分割的符号，返回值为数组，字符串中不包含分割的符号。再将分割后的数据储存到数据中即可。同时需要注意的是，JavaScript中没有赋值的变量是不能使用数组的。 字符串分割

第二步：数据处理

我们获得了大量的数据，光靠我们大脑看这些数据并不能获得信息，需要通过计算机帮助我们处理。利用统计学知识，我们需要利用不同的标志将数据分组。现在根据婴儿出生年份和婴儿性别将数据分类 分类
得到的结果为： 结果

第三步：作图

我们可以利用p5.js进行简单作图。在html中简单引用p5.js，在另一个JavaScript保存作图操作。 HTML内容
简单的p5仅需要两个函数，setup()用于设置画布参数，draw()用于进行作图。p5中有许多函数用于作图。我们作一个直方图需要用到矩形和线段。 p5.js
draw.js
效果

第四步：完善图表

利用text()函数给图形添加注释。 添加注释

第五步：进行分析

我们需要对获得的数据得出结论。 image.png

总结

如今是一个数据爆炸的时代，我们能够方便的获取大量的数据。利用计算机处理数据，，对数据进行挖掘，获得数据的信息，并利用图表来展示是计算机科学的重要应用。
利用框架绘图也是计算机的重要用途，我们可以简单的根据数据进行可视化。计算机的魅力也在于能够创造出现实中不存在的东西。人机交互的重要表现方式就是图片。一张图往往能够顶上千言万语。我们需要更加熟练的运用这种方法。