少儿编程Scratch第23讲: 数据可视化:线图V1.0- 列表、图章、画笔、滑行(Line Chart)

柱状图、饼图和线图是三大数据可视图形种类。本周继续数据可视化的学习。上次尝试了柱状图和饼图,这次做一个线图,其实和柱状图很类似。想尝试一下画出坐标刻度线,还是太复杂了。 最后还是简化一下,画一根基准横线,然后将线图画出来。程序共享在这里:https://scratch.mit.edu/projects/290881839/

 

 

功能:二年级下学期第一单元就是数据收集和统计,本想让小孩记录一个月的天气温度变化情况,无奈时间太长。还是相信科学,直接在网上搜索,找到北京12月份的平均温度数据。我们的目标,就是将这12个月的温度曲线画出来。这样能够看到每个月的温度变化趋势,能够看到哪些月份低温、哪些月份高温。

 

体会:

如果一个学生能够熟练掌握列表的存取操作、数字计算和逻辑比较,那么基本上就可以说这个人具有编程能力了。数据存取、数据计算和处理、逻辑比较,就是程序的核心灵魂。对于列表和数字计算、逻辑比较,还是需要通过诸多训练,掌握一定的数学知识才能完成的。

 

因此,别急,别急。别想听一两个小时课程或者一刻钟半小时的网课,就能把Scratch编程学好,那是不可能的。当然如果小孩具有初高中水平,或高年级小学生,理解起来可能会容易一些,大人理解起来可能很简单。但对于一二年级的学生来说,理解这些还是有一些困难的。在学习过程中,需要尽可能的拿出A4纸,学会数学计算,将相对位置、计算坐标写下来,然后转成变量,转成计算机代码程序。

 

本想本周一会做好的程序,花了不少时间,还能完全消化完毕,还得继续练习。

 

一、效果图:

少儿编程Scratch第23讲: 数据可视化:线图V1.0- 列表、图章、画笔、滑行(Line Chart)

小孩总是闹着要做游戏,当然不能每次都做游戏。我先在草稿上画了坐标,然后让小孩把这12个月的温度在上面标出来。到计算机上,先画横坐标,这还是可以的。设置起点,y轴不变,到最右边。结果说要找一个人打球,球打出来以后,球走过的轨迹,就画线。

 

那好吧,他加入了棒球的角色,还改变造型,看似挥动球杆了。还有模有样的。

 

二、角色:

少儿编程Scratch第23讲: 数据可视化:线图V1.0- 列表、图章、画笔、滑行(Line Chart)

球的角色,经过的轨迹,就画线。棒球手纯粹为了好玩。

 

三、列表:

一个温度列表,记录了12个月的温度数据。

少儿编程Scratch第23讲: 数据可视化:线图V1.0- 列表、图章、画笔、滑行(Line Chart)

 

四、变量:

为了能够更灵活一些,设置了月份数,起始点x,起始点y,间隔。

P1,P2是相邻的两个点,即1月份为P1,二月份为P2,然后二月份为P1,则三月份为P2,以此类推。其实这四个变量可以不要,只是为了更好的理解这些点是怎么计算出来的。

 

少儿编程Scratch第23讲: 数据可视化:线图V1.0- 列表、图章、画笔、滑行(Line Chart)

 

五、开始:

一堆初始化。

少儿编程Scratch第23讲: 数据可视化:线图V1.0- 列表、图章、画笔、滑行(Line Chart)

初始点和间隔是关键。

 

六、画横坐标

 

少儿编程Scratch第23讲: 数据可视化:线图V1.0- 列表、图章、画笔、滑行(Line Chart)

起始点在左下方一点,因为低温少,高温多。然后y轴不变,x轴到最右边的某个地方。落笔,抬笔,当中使用了滑行功能,这样能够看见动画效果。画完以后,盖个章,在尾巴处盖个章。

坐标还没有刻度线,下一个版本中再加入刻度线吧。刻度线其实也可以做,在适当的地方盖章即可。不过要计算好位置。

 

七、画温度线:

这是最为关键的,起始点相当于零点,然后1厘米的地方是一月份的温度,2厘米的地方是二月份的温度。

因此x轴是起始点x轴+间隔X月份。月份从1-12,这样x轴坐标就确定出来了。

 

然后是y轴,y轴要取当前月份的温度值,但温度比较小,放大8倍,然后要加上起始的y。

 

从1循环到12月份,我们就可以找到每个月份的x坐标和y坐标。这个最好在纸上写下来。

 

由于我们是从1月份画线到2月份,0-1是不画的。因此我们重复循环11次即可,从2月开始。

这样要计算出1月份的点(当前月份-1),然后是2月份的点(当前月份),然后从P1到P2滑行。这里依然使用了滑行运动操作,这样能够看到画线的过程。

 

少儿编程Scratch第23讲: 数据可视化:线图V1.0- 列表、图章、画笔、滑行(Line Chart)

这个程序能够自己做出来了,基本上就可以说会写程序了。

 

总图。

 

少儿编程Scratch第23讲: 数据可视化:线图V1.0- 列表、图章、画笔、滑行(Line Chart)

发表评论