szjuliet 发表于 2023-9-16 22:20:01

【App Inventor数据可视化】使用电子表格和图表

【App Inventor数据可视化】使用电子表格和图表

Part 1:通过图表理解数据
Part 2:通过比较数据集加深理解
Part 3:通过比较多个例子收集证据
Part 4:在App中添加数学模型
附录A:将你的app连接到自己的数据集
附录B:为Google表格创建一个凭证

## Janelle的App:可视化湖泊冰期

Janelle是一名湖泊生态学家,她对自己家附近湖泊的变化感到担忧。在最近的一次游泳时,她注意到水里有很多绿藻。Janelle认为,藻类和冬季湖面结冰之间可能存在某种关系。

让我们跟随Janelle来创建App,通过将湖泊数据放在图表中,使其更易于理解。她将在前往Spirit Lake岸边研究站的徒步旅行中使用app中的图表,并在需要时输入新的数据。

这只是一个数据科学app的例子。如果你选择了本指南的一些技能,修改app为自己所用,通过展示你需要的任何数据来更好地理解。(我们会在附录中告诉你如何做。)

**讨论:什么样的手机移动数据可以帮助你的学校或社区?**

查看手机数据的原因有很多。把信息摆在你面前,可以让你更了解影响你生活或社区的问题并采取行动。

快速访问手机上的可视化数据可以更轻松地了解数据,并跟踪要解决的挑战的信息。例如,你可以看到所在城市各小区的流感发病率,或各村县的污染数据,或哪个地方的孩子对电子烟上瘾最多。使用可视化可以发现模式,向同学展示证据,并一起讨论如何最好地应对挑战。

与朋友或同学讨论——什么样的数据可以帮助你理解和解决当地的问题?
![](https://markdown.liuchengtu.com/work/uploads/upload_2bded82123ce620a0d723fcca0b7f7a7.png)


## 先决条件:

* 能够轻松进行 App Inventor 组件设计和逻辑设计。
* 如果用手机或平板,需要一个最新版本的App Inventor伴侣(安卓设备AI伴侣版本号在 2.65 以上)(iOS 电子表格功能目前正在开发中)。
* 仅限Part 4:统计术语的一些预备知识

## 你能做什么?

* 挑战:查看原始数据

    * 在谷歌电子表格中查看数据集

    * 思考只凭原始数据来理解趋势所存在的困难

* Part 1:用图表理解原始数据

    * 添加图表到你的app*

    * 将图表链接到联网的电子表格以可视化数据*

* Part 2:通过比较数据集加深理解

    * 在同一个app屏幕上编码两个图表以比较数据

    * 编码图表,针对同一湖泊显示不同类型的数据*

* Part 3:通过比较多个例子收集证据

    * 编码电子表格组件*

    * 编码图表来比较不同湖泊的数据

* Part 4:向图表添加数学模型

    * 在图表中添加“最佳拟合线”(也称为最小二乘回归线),以加深对数据的理解,并对湖泊的未来做出预测*

注:“*”指的是新的App Inventor技能

* 附录

    * 附录A:将你的app连接到自己的电子表格

    * 附录B:创建免费的Google Sheets凭证,用于读写私有电子表格

## 挑战:理解原始数据

打开Janelle的(https://docs.google.com/spreadsheets/d/1vF7NgXlofxEBefsOCv1ndQBEjHMVubSBsyKQdUtQMRQ/edit#gid=0),其中包含有关美国各个湖泊的数据*。电子表格应该出现在浏览器中。(如无法正常访问可在附件中下载电子表格)
![](https://markdown.liuchengtu.com/work/uploads/upload_183b3539a685c282ba09d4877b08b3fc.png)

*本项目中冰的数据来源于Sharma, Sapna等人的研究。“冰盖减少,物候变化,以及北半球湖泊发生的更多极端事件。”地球物理学报:生物地球科学126.10 (2021):e2021JG006348。来自NOAA的温度数据。
("Loss of ice cover, shifting phenology, and more extreme events in Northern Hemisphere lakes." Journal of Geophysical Research: Biogeosciences 126.10 (2021): e2021JG006348. Temperature data from NOAA. )

仔细查看表中每一列的内容:

* A列是这个湖的名字。

* B列显示数据采集的年份。

* 你认为C列显示的是什么?**C列是一项名为“冰期”的科学测量**,即那年冬天湖泊被冰覆盖的天数。每年到访湖泊的研究者都会记录冰期,他们会在湖水刚结冰的时候进行记录,在春天看到湖水融化的时候再次记录。

**讨论:大家能真正理解原始数据吗?**

* 从Janelle的工作薄里你理解了些什么?

    * 你能说出多年来冰期是变长了还是变短了?

    * 针对冰期及冰期内平均温度之间的关系,你能说些什么?

这些都是棘手的问题。为什么你会认为单凭原始数据很难弄清楚?

Janelle仔细查看了数据,为她在Spirit Lake的研究做准备,但她无法对这个湖做出任何有用的预测。

她决定创建一个app来*可视化*这些数据。当你构建同样的app时,试着在数据中寻找模式和趋势。
## Part 1:用图表理解数据

### 1. 获取App模板。

模板让你在构建App时有一个好的开始。

* 找到包含[本课程的文件夹](https://drive.google.com/drive/folders/19po9j10qU5yXHJDqBNRJ5JZIB3xoanE0?usp=sharing)中提供的文件((https://drive.google.com/file/d/19mNOQWJXLTi2Q_WZ8y4TVY9FxEb38m_l/view?usp=drive_link)。(如无法正常访问,可在附件中下载)

* 把文件下载到你电脑的硬盘上。注意保存文件的位置。* 进入App Inventor (http://ai2.appinventor.mit.edu), 或国内可正常访问的(http://code.appinventor.mit.edu), 从电脑中导入下载的AIA文件


### 2. 查看组件设计:

* 模板将在Screen1上打开,这是一个欢迎屏幕。单击屏幕选择按钮切换到singleCaseScreen。
![](https://markdown.liuchengtu.com/work/uploads/upload_732da4ae0c4470b57dfe9662d0e313c4.png)
![](https://markdown.liuchengtu.com/work/uploads/upload_41b5364ab6386855a07e98a5281db794.png)


* 这时看到**singleCaseScreen**:
![](https://markdown.liuchengtu.com/work/uploads/upload_5df5635eccf23c3c2739f524207558f7.png)
这个屏幕有什么作用?猜猜看。

查看**组件设计**中的组件。你能猜到这些组件的作用吗?不要忘记查看组件设计底部的不可视组件!(注意:本指南稍后将使用这些组件名称。请不要重命名它们。)
![](https://markdown.liuchengtu.com/work/uploads/upload_0c3b1aa0468a8f62eab4fcfca1c05615.png)

* Screen组件代表app中的一个屏幕。
![](https://markdown.liuchengtu.com/work/uploads/upload_f02f5261aa4a333915a47b190005e8a1.png)

* HorizontalArrangement1组件包含两个按钮,及一个用于分隔的垂直布局spaceVerticalArrangement:
![](https://markdown.liuchengtu.com/work/uploads/upload_30ef06e0a2fd12216cc7b419cbf026a8.png)

* 标签的文本属性是空,但当你点击“Show Data”按钮时会显示湖泊名称。
![](https://markdown.liuchengtu.com/work/uploads/upload_49344a1250c2637a45af908f7d717c4d.png)

* 添加代码后,Chart和ChartData2D组件将显示湖泊数据。
![](https://markdown.liuchengtu.com/work/uploads/upload_51f5bd81df9dd5da7b25713f9bb8d32d.png)

* Spreadsheet组件从Google Sheets中获取数据
![](https://markdown.liuchengtu.com/work/uploads/upload_c02250ef0f911c0c43260b82374c4e7a.png)

### 3. 查看代码:

* 点击App Inventor中的Blocks(逻辑设计)来查看模板代码:
![](https://markdown.liuchengtu.com/work/uploads/upload_b43c63648b10b4ad2f1c848f9931452c.png)


### 4. 在App中“读取”工作薄中的数据(新技能)

* 你能猜到当按下 **showDataButton** 会发生什么吗?
![](https://markdown.liuchengtu.com/work/uploads/upload_402a7aa71a9472eacb1afefc95599dda.png)

* call spreadsheet1.ReadSheet代码块通过在互联网上问询信息来“读”*一张工作表*。基于这样的场景,下图的代码块会复制所有稍后使用的数字。
![](https://markdown.liuchengtu.com/work/uploads/upload_9a734f11166d4ff187e7beaf2099cf16.png)


    | 什么是“Sheet”(工作表)? |
    | -------- | -------- |
    | Spreadsheets工作薄中通常有很多“工作表”。   |
    |再查看一下(https://docs.google.com/spreadsheets/d/1vF7NgXlofxEBefsOCv1ndQBEjHMVubSBsyKQdUtQMRQ)。你能鉴别出每一个独立的工作表吗?一共有多少个工作?它们的名字是什么?    |
    |点击工作表名来了解每个工作表中的数据。      |
    |![](https://markdown.liuchengtu.com/work/uploads/upload_cba8325e979f9db461f369abc002e10f.png)|

* **ReadSheet** *代码块在名为“spiritLake”的表上查找和复制数据:
![](https://markdown.liuchengtu.com/work/uploads/upload_1c8863f2c53111a6c45ab4e7492540b1.png)

### 5. 将数据导入图表(新技能)

* 当用户在最后一步按下 **showDataButton ** 时,**ReadSheet** 代码块读取工作表。但是这些信息发生了什么?

* 当App准备好了信息,它触发代码块 **when.spreadsheet1.GotSheetData**。当这个代码块获得数据时,我们就知道数据已经为app准备好了!把这个代码块拖到你的代码中:
![](https://markdown.liuchengtu.com/work/uploads/upload_24773652911dc0c23f6c9416ee3abc44.png)

* 当GotSheetData激活时,使代码块显示标签上的文本:
![](https://markdown.liuchengtu.com/work/uploads/upload_4588cf9bad8b5644546d0d0d399f4ebe.png)

* 从“文本”抽屉中拖出**text string** 块,将其添加到标签块中,然后键入一些描述图表的文本。在这种情况下,图表将显示每年在Spirit Lake上出现冰的时间:
![](https://markdown.liuchengtu.com/work/uploads/upload_157fc93b29f9c478c623802607364c3f.png)

* 当 **GotSheetData** 激活时,使代码块显示图表中的数据。从**topChartData2D**抽屉中,拖动代码块**call topChartData2D.ImportFromSpreadsheet**:
![](https://markdown.liuchengtu.com/work/uploads/upload_07161e7dea0582546c555e10251823b6.png)

* 接下来,填写代码块的参数来告诉图表要显示什么。你能猜到这些插槽里填的是什么吗?
![](https://markdown.liuchengtu.com/work/uploads/upload_bd52f7e042554662d95b54b1d9026a9e.png)

    * 指定要使用的工作薄 — 此处为spreadsheet1。在底部的spreadsheet1抽屉,拖动**spreadsheet1**块:
![](https://markdown.liuchengtu.com/work/uploads/upload_2a92f63579801aa15d39b259d14f9579.png)

    * 图表的x轴是哪一列?

      * 在工作薄中找出显示时间流逝的那一栏

      * 从文本抽屉中拖出 **text string** 块

      * 输入列的标题名称。仔细检查你的拼写!!

      * 你可以在下面的测试框中检查你的答案
![](https://markdown.liuchengtu.com/work/uploads/upload_ac4897fc12abce0dec0f0026c24008e3.png)

    * **图表的y轴是哪一列**?记住,Janelle 想要可视化每年冬天的冰期。输入对yColumn最有意义的标题名。(你可以在下面的测试框中检查你的代码。)

    * **useHeaders** 的参数要如何填写?你是否使用标题的名称来描述每一列(如“Year”或“Ice”)?如果是,从“Logic 逻辑”抽屉中,将“True”拖动到插槽中:
![](https://markdown.liuchengtu.com/work/uploads/upload_84be4bddc0df570a2bc8b79d8fc88534.png)


      | 在手机或平板上使用AI伴侣(2.65或更高版本)测试代码。               |
      | --------------------------------------------------------------------------------------------- |
      | 按“**Show Data**”按钮。(根据你的网速,你可能需要再按一次。)                                        |
      | ![](https://markdown.liuchengtu.com/work/uploads/upload_761b79c9074694d1876cc39770af106a.png)|
      | 如果多次按下后仍未看到图表,请检查代码:                               |
      | ![](https://markdown.liuchengtu.com/work/uploads/upload_82f352209b19c42baaf5e55a105d2856.png) |

**讨论:从图表中你能看出什么?**

看看图表中从1955年到2007年冰期的整体模式。

    冰期每年都有很多变化,能否猜一下变化的趋势是怎样的。随着时间的推移,这些数值看上去是在上升还是在下降?
    如果你看到冰期的趋势,解释这个趋势意味着什么。
    试着将你的解释用不熟悉这个话题的人都能理解的方式表达出来。

    (注:数据来源于Sharma, Sapna等人的研究。“冰盖减少,物候变化,以及北半球湖泊发生的更多极端事件。”地球物理学报:生物地球科学126.10 (2021):e2021JG006348。)
    【"Loss of ice cover, shifting phenology, and more extreme events in Northern Hemisphere lakes." Journal of Geophysical Research: Biogeosciences 126.10 (2021): e2021JG006348. 】

**Part 1额外挑战**:如果将工作表“spiritLake”替换为同一工作薄中的另一个工作表会怎样?在代码中进行此更改并再次测试你的app。(别忘了把湖的标签也改成新的湖名!)

幻化有心 发表于 2024-9-30 16:35:28

哈哈哈哈哈哈威威威威
页: [1]
查看完整版本: 【App Inventor数据可视化】使用电子表格和图表