Davinci用户体验 | 你离数据可视精美大屏只差一个Davinci!

68次阅读

共计 6154 个字符,预计需要花费 16 分钟才能阅读完成。

作者:李玲、王小燕 出处:敏捷大数据 来源:宜信技术学院技术沙龙 001 期 |AI 中台:一种敏捷的智能业务支持方案 | 宜信技术沙龙 3 月 28 日晚 8 点线上直播,点击报名

导读:同比和环比是衡量企业某个数据周期性增长速度变化的重要指标,但是一味的看数据,我们很难对增长率的大小做出比较,这个时候就需要可视化工具来帮助我们。小编这次又“编造”了另外一组数据,利用 Moonbox 写出 SQL 求同比环比增长率,最后借用 Davinci 展示出来。具体请看正文~
特别鸣谢
感谢万能的 Wormhole 一姐王小燕同学 & Moonbox 大神王浩同学 提供 SQL 技术支持!
一、Introduction
环比指本期统计数据与上期统计数据做对比,如 2018 年 2 月的数据与 2018 年 1 月的数据做对比。
同比指本期的统计数据与往年同期的统计数据做对比,如 2018 年 1 月与 2017 年 1 月的数据做对比。
同比和环比都反映变化速度,但侧重点不同:利用环比,我们会看到数据的短期趋势,但是这个数据可能是因为受到季节等因素的影响;而同比则更加侧重反映长期的大趋势,这样我们分析数据也就规避了季节的因素。
图 1 是小编随意编造的一组很简单的数据,表头包括年、月、场次、观众人数、票房及广告收入,用英文表示是为了之后写 SQL 的时候方便一些。

图 1
暂且称这组数据为“ABD 虚拟影院相关数据”,接下来,就是借助 Davinci 展示同比环比的时刻啦!
二、Process
Step 1:增加数据源
点击 Source 界面右上角“+”,在 Source List 里新增数据源(图 2),上传 CSV 文件至指定数据库中(图 3),小编使用的数据库为 MySQL。

图 2

图 3
上传完 CSV 文件之后,就来到了我们特别重要的一步:写 SQL、求出同比环比增长率。
计算同比环比可借助 SQL 里的 window 窗口函数实现。MySQL 数据库 8.x 版本才支持 window 函数,然而小编所用数据库版本为 5.x,升级比较麻烦,所以小编在这里使用 Moonbox 计算同比环比增长率。步骤如下:
(1)把 CSV 文件对应数据源挂载到 Moonbox 计算引擎中。

图 4
(2)在 Source 界面继续添加来自 Moonbox 的数据源,小编将其命名为“growthSource”,连接 Url 写 Moonbox jdbc 服务地址(例:jdbc:moonbox://localhost:10010/growthSource),注意将 Moonbox jdbc 驱动放至 Davinci lib 包下。
图 5
点击保存,就新增了一个 JDBC 类型的数据源。
Step 2:添加 View
点击 View 界面右上角“+”,出现图 6 界面。【View 是 Davinci 中非常重要的概念,所有的 SQL 逻辑都需要在这里创建,所有在图表上展示的数据都是通过这里的 SQL 获取,可视化建模和团队数据权限控制也在这里进行。(引自 Davinci 用户手册)】

图 6
点击图 6 左上角的“选择一个 Source”,选择上一步中新增的“growthSource”数据源,接着就是写 SQL 语句了,求同比与环比增长率的 SQL 语句分别如代码块 7、代码块 8 所示。
select g1.year,g1.month, g1.box_office_mln, g1.last_year_month_box_office_mln, round((g1.box_office_mln – g1.last_year_month_box_office_mln)/g1.last_year_month_box_office_mln * 100.0, 2) as box_office_mln_year_growth, g1.advertising_revenue_mln, g1.last_year_month_advertising_revenue_mln, round((g1.advertising_revenue_mln – g1.last_year_month_advertising_revenue_mln)/g1.last_year_month_advertising_revenue_mln * 100.0, 2) as advertising_revenue_mln_year_growth, g1.screening_ths, g1.last_year_month_screening_ths, round((g1.screening_ths – g1.last_year_month_screening_ths)/g1.last_year_month_screening_ths * 100.0, 2) as screening_ths_year_growth, g1.audience_mln, g1.last_year_month_audience_mln, round((g1.audience_mln – g1.last_year_month_audience_mln)/g1.last_year_month_audience_mln * 100.0, 2) as audience_mln_year_growth from (select g.year, g.month, g.box_office_mln, lead(box_office_mln) over(partition by g.month order by g.year desc) as last_year_month_box_office_mln, g.advertising_revenue_mln, lead(advertising_revenue_mln) over(partition by g.month order by g.year desc) as last_year_month_advertising_revenue_mln, g.screening_ths, lead(screening_ths) over(partition by g.month order by g.year desc) as last_year_month_screening_ths, g.audience_mln, lead(audience_mln) over(partition by g.month order by g.year desc) as last_year_month_audience_mln from GrowthRate_SQL g order by g.month, g.year desc) g1;
代码块 7
select g1.year,g1.month , g1.box_office_mln, g1.last_month_box_office_mln, round((g1.box_office_mln – g1.last_month_box_office_mln)/g1.last_month_box_office_mln * 100.0, 2) as box_office_mln_month_growth, g1.advertising_revenue_mln, g1.last_month_advertising_revenue_mln, round((g1.advertising_revenue_mln – g1.last_month_advertising_revenue_mln)/g1.last_month_advertising_revenue_mln * 100.0, 2) as advertising_revenue_mln_month_growth, g1.screening_ths, g1.last_month_screening_ths, round((g1.screening_ths – g1.last_month_screening_ths)/g1.last_month_screening_ths * 100.0, 2) as screening_ths_month_growth, g1.audience_mln, g1.last_month_audience_mln, round((g1.audience_mln – g1.last_month_audience_mln)/g1.last_month_audience_mln * 100.0, 2) as audience_mln_month_growth from (select g.year, g.month, g.box_office_mln, lead(box_office_mln) over(partition by g.year order by g.month desc) as last_month_box_office_mln, g.advertising_revenue_mln, lead(advertising_revenue_mln) over(partition by g.year order by g.month desc) as last_month_advertising_revenue_mln, g.screening_ths, lead(screening_ths) over(partition by g.year order by g.month desc) as last_month_screening_ths, g.audience_mln, lead(audience_mln) over(partition by g.year order by g.month desc) as last_month_audience_mln from GrowthRate_SQL g order by g.year, g.month) g1;
代码块 8
注:这里小编增加了两个“View”,分别是 yearGrowth 和 monthGrowth。另外,为了方便计算,在写 SQL 时,四列主数据的后面生成了一列新数据,用来表示去年同月或同年上月的数据。
点击右下角“Execute”执行 SQL 语句,yearGrowth 和 monthGrowth 里面的数据分别发生如下变化:
图 9

图 10
点击“Model”进行可视化建模,也就是数据中,哪几项用作维度,哪几项用作指标。更改完毕后,点击“保存”。在这两个 View 中,小编仅用年、月作为维度,其余都作为指标。
Step 3:制作 Widget
可视化组件 Widget 是 Davinci 中功能最强大也最复杂的部分。同一个数据视图可以被多个可视组件使用,并用不同的图形展现。
在展示同比环比数据方面,我们一般会用柱状图或者折线图来表示,而在 Davinci 所支持的透视驱动和图表驱动里,都有柱状图和折线图。它们具体有什么区别呢?让我们在实例中感受一下吧~
注:想了解透视驱动和图表驱动?请参考 Davinci 用户手册:
https://edp963.github.io/davi…
点击 Widget 界面右上角“+”,选择一个 View。选择完毕后,出现图 11 所示界面。

图 11
其中,分类型字段对应 View 中设置的是维度的字段,数值型字段对应指标字段。当鼠标悬停在图形图标上,系统提示图形的配置要求,满足条件生成图形。
例如,小编想要了解一下 2017 年下半年各月票房的环比增长率趋势,用透视驱动中的柱状图表示。在这个需求中,简简单单拖拽几个字段就能配制出小编想要的图表。
选择“monthGrowth”这个 View,将鼠标放在柱状图图标上,我们会发现要做这个柱状图会需要“0 到多个维度”及“1 到多个指标”。既然小编想看的是各月环比增长率,那维度这里我们就需要放上“month”字段(点击字段下拉菜单可以排序),指标则是票房环比增长率字段。
接下来我们就需要用到“筛选”一项,在小编的原始数据中,年份里包括 2017 和 2018 年,月份里有 12 个月。这里小编的要求是“2017 年下半年”,因此需要将“year”和“month”字段都拖到筛选栏里,并且按照自己需求配置筛选。这几项配置完以后,出现了如图 12 所示界面:

图 12
如果觉得单单只看图形,不够清晰明了,我们还可以将票房环比数据拖进标签栏,最终如图 13 所示:
图 13
当然,大家也可以根据自己的喜好配置柱状图颜色、标题颜色及大小以及坐标轴颜色等(图 14)。

图 14
点击右上角“保存”,小编就成功制作了一个 Widget。当然,这个 Widget 也可以用折线图来表示(图 15),完全看个人需求~

图 15
再例如,小编想试试用图表驱动里的折线图来展示一下 2018 年各月广告收入的同比增长率。这时候就要选择“yearGrowth”这个 View 了。然后将鼠标放在图表驱动的折线图图标上,我们会发现要做这个折线图需要“1 个维度”及“1 到多个指标”。
同样,将“month”字段拖入维度栏,“广告收入同比增长率”字段拖入指标栏。
Hmmmmm,就完成了。(图 16)

图 16
是不是过于简单了?
但是大家有没有发现一个问题:在这个数据配置栏里并没有“标签栏”,但是折线图中依然有数字。
原来这里的标签设置在样式配置中。
勾选样式配置中的“显示标签”,数字就出现在了折线图中(图 17)。
图 17
且慢!小编似乎发现了折线图可以变换面貌。点击了一下,发现果然平滑的折线图更符合小编心意。于是最终的“2018 年各月广告收入同比增长率”折线图制作完成!(图 18)

图 18
最后例如,小编想看一下 2018 年各月场次的增减与各月广告收入的多少有没有关系。透视驱动和图表驱动里的柱状图和折线图都可以表示,小编暂且选择透视驱动里的折线图。
同样还是将需求所需字段拖入维度栏和指标栏 —“month”拖入维度栏,“广告收入”和“场次”拖入指标栏,把“year”拖入筛选栏,选择出 2018 年。完成!(图 19)

图 19
值得一提的是,在这里我们还可以按照自己喜好变换指标栏中的图形。(图 20)

图 20
于是,小编就这样靠着拖拉拽完成了很多 Widget 的制作。
三、Display
最终,我们来到了展示界面。在展示界面,分别有 Dashboard 和 Display 两种展示方式。Dashboard 里面有很多更为高级的功能,比如联动关系配置和钻取设置。
然而,肤浅的小编暂时被 Display 展示吸引住了,所有兴趣都挂在了 Display 上面,因此,本文中小编只介绍 Display 展示,Dashboard 功能之后再做详细介绍。
下面我们来介绍一下 Davinci 的 Display 展示功能。
其实也没有什么介绍的,直接上图吧!
图 21 简约风
图 22 漫画风
图 23 科技风
如图所示,在 Display 的展示中,我们可以自己更改背景颜色或上传背景图片。设置好背景之后,点击左上角的“Widgets”图标,上传自己想展示的图表,排列成自己喜欢的形状,风格任君选择,一个个大屏就这样制作完成!
以上便是小编用 Davinci 展示同比环比的过程。由于数据是自己编的,难免会有不符合实际之处,敬请大家谅解。
另外,Davinci 一直在不断的成长中。未来,我们还是支持在 Davinci Widget 中直接计算出同比环比增长率这项功能,还请大家耐心等待,继续支持。
因为你们的支持,是我们不断前进的动力!
本文 Display 设计方面很大一部分是借鉴了 Davinci 用户做出来的大屏,当然这里只 copy 到一点皮毛,要学习到大神所制 Display 的精髓还有很长的路要走。还请各位大神能不吝赐教,多多放上自己用 Davinci 制作出来的精美 Display 或者形成教程小文,让大家更多的学习精美大屏制作方法~

正文完
 0