【App Inventor数据可视化】使用电子表格和图表3：通过比较...
本帖最后由 szjuliet 于 2023-9-22 20:06 编辑【App Inventor数据可视化】使用电子表格和图表
Part 3：通过比较多个例子收集证据
[*]编码电子表格组件
[*]编码图表来比较不同湖泊的数据
Part 1：通过图表理解数据
Part 2：通过比较数据集加深理解
Part 3：通过比较多个例子收集证据
Part 4：在App中添加数学模型
附录A：将app连接到自己的数据集
附录B：为Google表格创建一个凭证
## Part 3：通过比较多个例子收集证据
到目前为止，Janelle只研究了Spirit Lake的数据。但她当地的湖泊只是地球上数百万个湖泊中的一个。你认为Janelle接下来应该做些什么来论证她所看到的趋势在冬季湖泊中很常见?
如果Spirit Lake的冰真的在减少，这将对她在游泳时湖水中的藻类产生影响。冬天的冰让湖水一整年都更冷些。更温暖的海水使藻类等植物生长得更快。
然而，作为一名科学家，Janelle 告诉自己，她需要为这些趋势提供更多的证据。她问自己：“随着时间的推移，其他湖泊是否也经历着与Spirit Lake相同的变化?”Janelle 在她的app中添加了一个新屏幕来比较多个样本或案例。
与第一个屏幕一样，这个屏幕也有两个图表。不过这个屏幕不是显示同一湖泊的冰和温度，而是显示两个不同湖泊的冰的数据。
### 1. 向模板添加一个新屏幕。
* 点击菜单中的“添加屏幕”按钮，将新屏幕命名为“**multiCaseScreen**”。
* 新的空屏幕目前为止没有任何组件和代码。
###2. 快速建立新设计(使用复制粘贴)
* 该app将需要两个图表来显示冰期数据，就像Part 2一样。为了节省时间，按照下面的步骤从singleCaseScreen复制和粘贴相同的组件。然后，根据需要修改组件。
* 切换到singleCaseScreen：
* 在singleCaseScreen上，在“组件”中选择屏幕名称，然后在计算机上按“复制”键(Ctrl-c或⌘-c)：
* 回到新的**multiCaseScreen**，然后在设计器的任何地方点击粘贴到计算机上(Ctrl-v或⌘-v)。来自singleCaseScreen屏幕的所有组件都应该自动填充：
* app将使用新屏幕比较两个湖上的冰。首先，修复一些与剪切粘贴一起出现的旧标签。
* 在**bottomChart**的属性中，将描述改为“冰期”：
* 在bottomChartData2D的属性中，将标签更改为“天数”：
### 3. 添加Spreadsheet组件(新技能)
* 在前面的屏幕复制粘贴中，Spreadsheet1组件已经复制到当前屏幕中
* 但在当前屏幕下，你**需要在两个不同的表格上比较两个湖泊**。这意味着该app将需要另一个Spreadsheet组件来保存来自不同来源的信息。
* 使用复制和粘贴方法创建另一个Spreadsheet组件节省时间。选中组件Spreadsheet1，按复制(Ctrl-c或⌘-c)和粘贴(Ctrl-v或⌘-v)
* **注意，使用复制粘贴会保留一些重要的属性，比如Spreadsheet的id**。
* 自己创建这个来访问自己的电子表格是一项重要的技能，在附录A中有介绍。
* 现在，这些设置会在Janelle的示例App中正常工作。
### 4. 完成屏幕1的代码。
* 切换到屏幕1：
* 使你的新multiCaseScreen可从Screen1访问。参照下图中上面的代码块作为示例来填充下面的代码块：
* 当你完成后，两个按钮的代码应该在主屏幕上工作。
### 5. 完成multiCaseScreen代码。
* 当你将组件粘贴到组件设计工作面板中后，任何相关的代码都会自动出现在逻辑设计工作面板中。你可以在multiCaseScreen中看到这段代码：
* 现在有一个问题：你粘贴的代码让两个不同的图表读取相同的工作表 **spiritLake**。如何从不同的工作表(工作薄中不同的湖泊)读取数据?
* 设置代码以使用不同的数据源。从“**Spreadsheet2**”抽屉中，拖动另一个**ReadSheet** ：
* 使用[电子表格](https://docs.google.com/spreadsheets/d/1vF7NgXlofxEBefsOCv1ndQBEjHMVubSBsyKQdUtQMRQ)上的工作表名称作为指导，在“**ReadSheet**”代码块中填写另一个工作表名称。记得检查你的拼写。(尤其是当你拼写“otsegoLake”的时候!)
* 用新的湖泊名称更新**bottomLake**标签：
* <font class="text-color-4" color="#673ab7">**bottomChartData2D.ImportFromSpreadsheet**</font>代码块仍然从Sheet1中抓取数据。改为从**spreadsheet2**导入：
* 在这个例子中，新的图表应该比较两个湖泊的冰量数据。因此，删除yColumn中的“Temp”(如图所示)，并将列标题更改为“冰期”。
* 最后，检查你的代码！注意 <font class="text-color-15" color="#ff9800">**spreadsheet1.GotSheetData**</font> 块运行时，它已经“got”了sheet1的信息。但是屏幕下方湖泊的spreadsheet2的信息呢?App如何知道spreadsheet2信息准备好了?从spreadsheet2的抽屉中，拖动另一个 <font class="text-color-15" color="#ff9800">**GotSheetData**</font>代码块：
* 将屏幕底部的湖(使用spreadsheet2信息的那个)的所有块 -- 标签块和<font class="text-color-4" color="#673ab7">**bottomChartData2D.ImportFromSpreadsheet**</font>块。移动到spreadsheet2的<font class="text-color-15" color="#ff9800">**GotSheetData**</font>块中(你可以在下面的测试框中检查最终代码。)
| 测试你的代码 |
| --------------------------------------------------------------------------------------------- |
| 按下**Show Data**按钮 |
|  |
| 如果多次按下后仍未看到图表，请检查代码： |
|  |
**讨论：但这是一个合理的比较吗?**
仔细观察这两个图表的y轴。
* 在每个例子中下，y轴是从哪里开始?
* y轴的不同原点如何改变你对这些图表上数据的观察和比较?
* 修改轴可以使数据更容易可视化，但重要的是在做比较的时候要确保图表没有失真 -- 或不真实！
将y轴设置为0
* 使每个图表上的y轴相同。在组件设计面板中，单击topChart组件，勾选底部的属性 **YfromZero** 。
* 对bottomChart组件重复此操作。
在设备上再次测试代码。(如果Companion已失去连接，请重新连接。)
* 这将如何改变 Spirit Lake数据的外观?
* 这将如何改变屏幕上下两个湖泊的比较?
**讨论：数据可视化如何帮助我们更好地理解数据?**
看看屏幕上下这两张图表。
沿着图表的x轴选择某个年份。该年两个湖的冰期有什么不同?
你认为什么因素可以解释两个湖泊在同一年份的差异？
将两个湖泊的数据图表放在一起比较有什么好处?
除了湖泊数据，在未来的App中，你对可视化和比较哪些类型的数据感兴趣?
（注：数据来源于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 3额外挑战**：同时展示两张图
有时，你可能希望在同一图表中同时显示两个图形，以便于比较。如何在组件设计中排列ChartData2D组件以使它们显示在相同的空间中?
页:
[1]