点击查看精彩视频
阿里巴巴数据技术专家言顾在D2的分享。
“马良”的诞生
DataV一直致力于解决云上中小企业数据可视化的难题，也包括城市大脑的数据可视化业务。今天向大家介绍我们的新成果马良，我们希望将来做数据分析和调研时，仅仅通过手绘方式就能达到我们想要的数据分析规律。
如图为我们与麻省理工感知城市实验室合作的关于字体在城市中分布的研究，我们将城市中的常用字体进行分类，用谷歌的街景方式提取到街景中的字体和文字信息，我们也是用的物体识别模型来做这样一个提取方案，在我们提取到整个城市近百万张的街景之后，我们发现字体分布与街区的经济和商业都是有很强相关性的。
每一个不同的字体在区域内都和经济呈现正相关或者负相关，比如设计师经常用的无衬线字体与伦敦中心经济呈负相关，而衬线字体是正相关的，所以，高收入人群可能更倾向于选择带衬线字体，人们可能因为其它趋势选择无衬线字体。
通过这个研究，希望让大家了解我们对可视化的看法，我们希望从设计的角度和思维去解决工程化的问题。
马良仅仅通过手绘稿就可以生成完整的数据可视化大屏，同时，我们支持设计稿的上传，取得的设计稿通过马良可以在秒级内生成供大家继续编辑的数据可视化大屏。
可视化界面搭建难题
在整个马良研发过程中遇到的最大问题是可视化界面的搭建，我们在搭建过程中确实遇到了许多问题，其中也涉及到了业务方需求，我们发现很多时候做数据可视化大屏搭建时，首先要考虑设计中原型的搭建和开发，但近年来，很多可视化产品都极大降低了开发门槛，在设计方面并没有很好的解决。
我们现在在解决数据可视化设计问题时，在大屏领域包括DataV或其它可视化产品，都是通过选择模板来降低可视化设计的高开发门槛。在提供模板时，会遇到一些问题，比如自己做数据可视化大屏时，没有办法完全匹配自己的数据维度，数据可视化模板数量的限制导致没有办法选取更多样的风格。为了解决这样的问题，我们研发了马良这样的产品。
我们对近年来的数据可视化产品进行了相关分析，我们发现，可视化大屏创建包括了设计和研发，而很多可视化产品都在coding方面极大降低了开发成本，我们希望马良在开发和设计方面能够做好。
可视化大屏模板的设计流程
首先，可视化大屏模板需要有产品经理帮助我们梳理数据，同时设计师需要对梳理好的数据进行模板布局，包括颜色选取，最终交由工程师完成产品落地，可以看到整个流程非常冗长，需要不同角色配合。有了马良之后，任何单一角色不需要依赖于其他角色，都能够完成整个数据可视化大屏的搭建，比如产品经理不需要有设计知识也可完成搭建，设计师也可用草稿搭建数据可视化大屏。而且，马良对数据规律可以进行真正意义上的探索。
如图，右边为马良的时长，同样时长下我们相信有更多分析尝试，以前做一块大屏需要几天，如果大家用过DataV就会知道，DataV是支持拖拽的，可以选择图表组件进行拖拽，大概几小时完成。
为什么要推出马良？因为很多用户没有很好的设计背景和专业知识，同样只是简单的拖拽图表组件和布局，普通用户和设计师做的是完全不一样的，我们希望当发现很好的案例时，可以直接拖下来用马良生成，完成数据风格的迁移，而不是再拖拽，之前做过相应的测试，发现拖拽的创建过程还是要以小时计算的。而马良是以秒级来计算流程的。
基于深度学习辅助大屏可视化设计的方法
随着深度学习的发展，尽管深度学习与可视化有很强的沟通，但是一直没有很完善的产品让我们理解深度学习和可视化二者如何互相帮助的，我们知道一些比较知名的可视化与深度学习结合的案例如google用可视化来可视整个深度学习的神经网络，同样，我们相信可以通过深度学习及物体识别技术等能够帮助可视化进行搭建和还原。
如图为马良两个主要案例，上面为手绘稿生成，下面为设计稿生成，以应对生产环境中的两种需求。生成手绘稿是因为很多产品经理做数据可视化大屏时，可能更倾向于把想法概念绘制下来，这样当有新想法时更容易移除或擦除，有了马良之后，可以依据手绘稿生成继续支持开发的可视化大屏模板；同时我们也支持设计稿，很多时候产品经理拿着网上找到的设计稿可视化大屏与工程师沟通，希望工程师按照某种风格开发，有了马良之后，自己找到的设计稿可以很快实现数据可视化大屏。这样，单一角色可以完成搭建数据可视化大屏工作，同时，如果后续有更多个性化需求，更多人员接入，整个效果会有更好的提升。
图表识别与可视化界面识别的区别
整个技术内部最重要的是图表位置提取和生成可视化界面布局优化。在可视化领域，图表识别与可视化界面识别的区别在于，可视化界面识别不仅要识别图表是什么，同时要知道你的位置在哪里。
图表领域最原始的深度学习研究是斯坦福教授FeiFei Li和Jeffrey Heer发表的这篇文章，ReVision是把对应图表的特征提取出来，提取出来的便于机器理解的特征进行一个全链接层的映射，得到结果图形，但是并没有解决物体识别和位置识别。
因此，我们引入了物体识别模型如Faster R-CNN等，物体识别不仅知道你的物体在哪里，这样的模型应用于交通领域比较多，比如行人、车辆等，去年开始，我们与浙大在图表识别领域进行合作，得到了不错的效果。
深度学习和机器学习需要非常大的训练样本，我们在做相关的训练样本收集时，为了让我们的模型识别不同的风格，尽量让更多的参与者去参与，能够识别不同的风格。
如图就是一个训练样本，一个参与者绘制完不同的图表之后，对图表进行打标。为什么没有用随机的生成方式呢？因为让许多参与者参与需要大量的时间，能不能用随机的方式，比如有了图表之后，更换布局在一个空白的界面上随机放置，只要不重叠情况下就可以作为训练数据。我们最终没有使用这个方法，而是选择了DataV自己的数据，是因为我们相信可视化图表在界面中是有一定规律的，这也引入了我们对物体识别模型更多的算法和函数的思考和提高。
可视化界面的概率密度函数
可视化界面内部也有自己的概率密度，比如如图所示的大屏，title所在的位置一般都在图表的上半部分，地球map一般都会在屏幕中间，我们也是通过自己已有的数据进行概率密度的匹配和测试。
我们发现大部分的图表确实是有概率存在的，比如一些柱状图如果是横向柱状图，因为Y轴在图表左侧，所以横向柱状图更倾向于在整张大屏的左侧。
我们可以对深度学习模型做更高的优化。如图左侧是正常的深度学习模型，包括扔进图片之后经过训练得到一个结果，扔进一个数据可视化大屏进去得到具体信息，比如bar chart在屏幕什么位置，大小是什么，同时在这时进行概率密度的计算，我们会计算bar chart在某个位置的概率大概是多少，这就引入了后半部分Learning-Based Validation概率密度函数，引入此函数对整个模型准确率提升6%～7%左右。
返回到图中，当我知道在某处有一个bar chart或pie chart时，对bar chart 或 pie chart在这个位置的概率再进行一次计算，如果概率非常低，我就认为识别到的是错误的，相当于先有识别结果，但同时对识别结果再进行一次验证，这样对整个模型优化是非常大的。
同时我们也希望我们的产品不止能够识别电子版上的业务场景，同时也能够识别包括会议室内的数据分析，草图绘制也上传到马良，马良会在秒级内回复一个编辑好的数据可视化大屏。如果之前你有数据已经导入的情况下，可以很快地得到一个非常完善的可视化大屏。
无论是手绘稿识别还是设计稿识别，马良都遵循着如图几个步骤。首先会有一个图表识别，接下来会有一个颜色提取部分，第三步会被之前识别到的位置结果进行优化，最后基于之前收集到的数据可视化信息，生成一幅已选择的设计风格的数据可视化大屏。
主题色提取及赋予生成可视化界面的颜色
可视化界面颜色生成部分，我们做了主题色提取和色板生成。首先要提取背景色和主题色，同时依据背景色也会推荐字体颜色和其它辅助颜色，我们也会推荐不同的色板方案供大家参考。
有时，我们喜欢的图片不一定是数据可视化作品，可能只是一个音乐会或自然风光等不同场景，用这样的图片来生成数据可视化颜色，对此，我们也做了相应的工作，只要你上传任何图片，我们能够把图片风格的颜色设置到大屏中。
以上给大家介绍的更多的是依图生图的功能，我们现在也在做数据生图和风格迁移，底层使用的模型算法包括深度学习算法、机器学习算法和基础算法等，通过识别、回归和概率计算帮助上层的信息搭建。
图中彩色部分是马良现在做的部分，用户可以上传自己的可视化屏幕进行识别，整个识别是依据马良现有的模型，我们也在做马良的自动机器学习，使用户可以上传自己的图表，数据打标非常痛苦，可能上万张图片，马良作为迁移学习的模型后，相信大家可以只上传几十张上百张的图表就可以更针对的识别属于自己的数据可视化图表库。
我们从google上搜索不同的dashboard，随机的选取结果后拖下来由马良来生成，上面为原始数据可视化大屏，下面是由马良生成的数据可视化大屏。通过用户的反馈，我们了解到有一些生成的颜色和布局是优于原始可视化大屏的，这样的结果是激励我们前进。
现有场景中，很多厂商因为没有自己的能力，没有自己的专业的数据可视化设计团队，导致很多厂商的数据可视化从来不换。有了马良之后，我们希望至少快速帮助用户测试是否能够生成一个更好的更美的更适合的数据可视化模板。
关注「Alibaba F2E」
把握阿里巴巴前端新动向