手绘稿如何1秒变身数据大屏？深度学习让人人成为可视化专家

概念：LADV是DataV内嵌的智能识别设计产品，可以迅速学习和识别手绘草图、信息图表、大屏截图等资料，并在DataV内自动生成可配置的可视化应用。

有了LADV从此人人都能作可视化专家了！

先来看看LADV的效果：

以上例子中，生成的可视化图表，都可以在DataV的环境下作进一步的样式调优和数据接入，最终发布为一个实时数据驱动展现的页面。

1.LADV解决了什么问题？

简单来讲，就是大幅下降数据可视化的设计成本。让用户在制做数据可视化应用时，能够将更多的精力投放在前期需求梳理、指标设计，和后期的数据探索、可视分析这些关键环节上。

纵观数据可视化这个垂直领域，包括DataV在内的不少团队都在尝试下降可视化的实现的工程成本（以下图1, 2）。然而除了工程成本自己，数据可视化的设计效率极大的影响了数据挖掘效率。

工业界可视化先驱如Tableau, Power BI等提出的解决方案是为用户提供不一样的模版。但模版不可能彻底贴合实际使用场景下的需求，不少用户在使用过程当中，只能向可视化设计的高门槛以及冗长的制做时间妥协，选择近似的模版来解决。如何让各类背景的用户真正制做本身中意的数据可视化一直是一个难题。而DataV团队研发的LADV——一个基于深度学习的可视化生成系统，经过机器学习可视化案例的风格而生成数据可视化(以下图3)，偏偏就是为了解决这个问题而生的。

2.颠覆可视化设计和搭建流程

2.1 传统流程

数据可视化设计须要多方配合，就DataV举例以下图传统流程，有产品和分析同窗进行需求调研，而设计同窗会根据所需图表进行高保真设计, 最后会交由前端同窗进行还原。这样的流程因为须要多方协同，致使效率变慢。更重要的是，这样的流程导致不少没有设计能力的用户缺乏建立属于本身可视化的能力。

2.2 LADV优化流程

经过LADV，咱们设计了一种新的可视化建立流程。如上图所示，LADV极大减小了传统的设计流程，新的流程支持经过图片进行原型设计及前端还原，并支持后续的设计微调。

3.技术方案

3.1.1 图表识别模型技术

深度学习技术在近些年来获得飞速发展，在不一样领域都取得优异的成绩。包括在数据图表分类领域也取得了很大的进展，如学术界的Revision, ChartSense 等。但大多数的模型仅仅可以进行图片分类，而非物体识别（换句话说，不只进行图片分类，同时识别该类型图片所在的位置）。

现有的方案中最优的也只是可以经过OCR技术识别文字的位置及内容（以下图），很难作到识别图表及图表的位置，如柱状图，饼图等。更况且物体识别所需的图表在可视化图片中的相对位置等信息，更是让这些数据看起来是不可能完成搜集的。

然而DataV又偏偏拥有数以万计的数据可视化模版数据，因此咱们经过DataV的数据训练了能够识别图表位置及类型的物体识别模型，这也是物体识别模型首次应用于数据图表领域。同时，LADV不只仅可以识别图表的类型及位置，还能够将可视化界面的颜色进行提取。从而将原案例风格中更多的维度迁移到机器生成的数据可视化界面中。

3.1.2 识别结果优化

在获得识别结果的基础上，咱们进行了对识别结果的优化。例如咱们使用了Grid Design这样的设计规范，来避免由识别致使的布局偏差(如上图a,c)，并可以将存在布局不规范的原图进行规范。

3.2 颜色识别模型技术

色彩是大屏展现不可或缺的成分之一，在使用颜色时不只须要考虑美观度和协调性，还须要考虑到可读性。咱们将从原始图片中提取颜色并在优化后加以应用。首先，从图片中提取颜色及其相应占比，通常来讲在一个大屏中背景色的占比是最大的， 因此使用占比最大的颜色做为背景色。文本颜色将影响大屏的可读性，咱们根据WCAG对比度标准计算出使得和背景色对比度达到7:1的文本颜色。接着对提取到的颜色进行过滤，去除背景色类似色和文本色类似色，而后对剩余的颜色进行聚类获得主色。最后使用色板生成方案生成色板并应用于大屏中。

3.3 文字及字体识别模型技术

在即将发布的版本中，LADV能够支持对文字及字体的识别，同时将识别到的文字及字体还原到生成可视化中。在字体识别中，咱们使用了ResNet-18 做为识别的模型。从而实现了可以识别案例可视化中的字体，例如包括衬线体及无衬线体等。LADV同时使用了OCR等传统方案对文字进行了识别。

3.4 识别图表映射

从 LADV 生成 DataV 大屏的过程主要分为两步——大屏基本配置生成和大屏配置优化。首先，咱们将 LADV 识别获得的图表类型映射为 DataV 中的组件类型，同时结合图表的位置，使用默认的图表样式配置和数据配置，生成一份“JSON”格式的大屏的基本配置。

在这一步中，咱们主要解决了大屏内容和布局的生成，使用默认的样式配置和数据在视觉层面还远不能达到咱们的需求，所以咱们还要针对这两个部分进行优化。咱们将 LADV 识别获得色彩信息做为大屏的主题配色，修改大屏相关色彩配置（如背景颜色和文字颜色），并遍历大屏中的每一个组件，应用当前的主题配色，这个步骤使得大屏总体的色彩会更加丰富和和谐。这里须要注意的是，因为手绘稿的色彩相对比较单一，因此咱们没有直接提取手绘稿的色彩信息，而是应用了一些内置的主题配色，对生成的大屏进行美化。

除了色彩的优化外，咱们根据识别获得的文字信息，修改文字类组件的字体、字号等样式配置，并使用识别获得的文字内容，做为文字组件的数据。完成以上步骤后，咱们经过 DataV 提供的大屏生成接口，将最终的大屏配置导入到DataV 产品中生成为可交互的可视化大屏，用户能够在此基础上继续优化，完成最终的数据可视化。

3.5 技术框架总结

在LADV的技术中，咱们总结了目前LADV的技术框架，以下图。

4.项目实例

4.1 LADV操做演示

咱们仅仅须要上传喜欢的数据可视化模版，就能够生成一份已在DataV内编辑好并可交互的可视化界面。同时，咱们还能够对该模版进行继续编辑，以达到咱们想要的结果。 下图左为选择案例模版页面，同时能够上传图片，并点击右下角上传案例。右侧图片为经过LADV学习而生成的可视化界面，并可在DataV内进行继续编辑。

与此同时，LADV考虑到有些用户更倾向于优先绘制草图，由于草图能够抽象出不一样的设计。因此，咱们提供了能够快速将用户手绘的数据可视化草图经过识别来生成可视化界面的方法。经过与浙江大学 CAD实验室合做，DataV收集了近2,000张手绘设计稿，并经过物体识别模型进行训练。

4.2 用户反馈

咱们在经过谷歌图片搜索，尝试经过搜索3种不一样的关键词获得的可视化案例来测试LADV,（1）Power BI, ( 2 ) Tableau, ( 3 ) Dashboard。同时咱们还搜集了( 4 ) Tableau Gallery的可视化案例界面 咱们发现，除了 Tableau Gallery，用户对全部的图表生成在美观上都给了很高的评价，而且，尽管Tableau Gallery目前美观分数最低（缘由为较多infographic案例，不规则图表等），但用户依旧愿意基于LADV生成图去继续搭建，而非从零开始设计可视化的界面。这也意味着，LADV有能力完全解放咱们在可视化设计上的能力。

可见的未来，咱们相信在设计可视化界面时，LADV能够参与到各个环节中。咱们真诚的但愿，LADV不只可以帮助用户解决可视化的设计问题，同时可以激起用户对可视化设计的兴趣，进而经过可视化设计及图表布局，颜色等展现维度来影响数据的挖掘。

5.将来期待

最后，通过接近一年的努力, LADV经过与国内外学术界不一样方式的合做受益良多，如国内可视化先驱浙江大学CAD实验室的陈为教授，并获得了TVCG主编Klaus Mueller教授的合做邀请。

该功能已在企业版和专业版中上线，体验点击连接哦！ 连接: data.aliyun.com/visual/data…

本文原做者：言顾

原文连接

本文为云栖社区原创内容，未经容许不得转载。