亲述：阿里天池数据可视化大赛特别奖作品制作全程

　 11月16日晚八点，大数据百人会沙龙第六期主讲嘉宾——“2016阿里巴巴天池数据可视化大赛”专业组媒体特别奖获得者郭伟，分享其获奖作品“最熟悉的陌生人”交互可视化项目“智慧物流”的制作全过程。想要炫到没朋友，或许你该学学这个↓↓↓

,

(以下是沙龙实录，以嘉宾第一人称讲述)

　　今天给大家分享的是我参加阿里巴巴天池数据 可视化 大赛的一个项目，主题是关于物流的可视化。这个项目用到的可视化技术：有现在比较流行的webGL、可视化比较常见的D3.js;专门用于地理信息可视化leaflet.js技术以及原生的canvas。

在前端框架的选择上，为了支持不同模块之间的交互选用了vue.js，鉴于用户在本地查看及分享能更加方便，在这里使用了electron框架。

　　 1基于Web的可视化技术选型

可视化项目最开始要考虑的一个问题就是用什么可视化技术来实现效果?

　　　 CSS

通常最简单的方式是选择CSS对作品进行美化，不仅简单成本也最低。CSS的优势就是体积非常小，而且一下子就可以加载起来。

　 ECharts

如果常规的CSS不能满足普通的效果，就要考虑用图表库。国内比较流行的echart，比国外都会好很多，有非常多的文档，而且还有在线可以调试的工具网页版，如果对可视化控制的技术不是很强的话，可以选择echart等这些成熟的图表库。

　　 D3、canvas

D3是基于SVG格式，它的一个优点就是可以支持矢量缩放。比如你要做一个可视化的效果，但是客户的需求是在缩放过程中不能出现锯齿，那么你就可以选择D3。如果需要做比较多的动画，或者数据节点比较多，那你就可以选择基于canvas的可视化效果。因为D3浏览器的框架是基于dom节点，如果你的数据节点比较多，比如超过几千个几万个甚至十万个那就没办法运行起来，那么就需要用canvas来写一些图表。

　 webGL

如果有一些场景需要有非常多的数据源，可能一下子要带动十万个点，计算非常密集的时候，二维的数据的数据图表不能满足要求，这种情况下基于webGL的可视化是最符合要求的，因为webGL是通过GPU来进行计算，这样能极大提升可视化作品运行速度。另外很多三维的展示场景只能选用webGL，目前三维用于数据可视化也是一种趋势。

最终一个项目选择什么样的可视化技术还是需要根据项目的需求来看，如果这个项目比较简单，最后如果用webGL做肯定相当不划算，可视化技术选型并没有优劣之分，具体看适用场景。甚至说，往往简单的技术更实用一些，相同的时间和精力投入下去能产生更大的效果。

　　 2可视化作品概念草图绘制

草图主要解决两个问题：1.用户的交互模式;2.数据流动的问题。在这一阶段你可以最大程度发挥个人的想象空间，把各类天马行空的想法都写下来，最后剔除成本较高和实现不了的部分。

① 总体界面

② 订单调度甘特图

草图画完后就是需求的分解，因为草图是非常概念化的状态，只能进行概念上的指示，最终的落实还需要对项目需求进行分解。

概念草图：需求分解

我做这个项目的主题是物流可视化，在构思四个模块后，每个模块分别表现什么样的功能?每个功能用什么可视化手段支撑?都需要做一个详细的分解。

比如其中一个模块是绩效考核层次的模块，物流行业包括快递员、物流站点，在分解的时候，就要对这两个展示主体做各自不同的绩效可视化展示。

再比如地理信息的展示，不同的物流站点、配送目的地，分析的需求就要把地理位置展现出来，然后用不同的可视化手段把不同的目的地，种类区分出来。

所以需求分解的目的是在概念草图画完后，细化这些想法然后固定下来，针对每个想法具体采用什么手段实现这些需求。

　　 3原型设计

草图离最后可视化效果可能非常远，这时候你需要用到原型绘制以验证最终视觉效果是否满意。绘制原型的专业软件非常多，我个人偏向AI、PS这样的绘图软件。

一般原型绘制是从低保真原型到高保真原型，我这里两步变成一步了。能在有限的时间和资源下，以最快的速度查看原型能否达到最佳效果，而图片处理软件的速度无疑是最快的。

这个就是用Photoshop做的高保真原型。当然中间实时的canvas立体化效果图肯定不是用Photoshop画的，而是用程序生成的。但是可以用Photoshop把它贴过来，边上可以用Photoshop画一个左侧的控制面板，这样两块儿拼起来就可以看到第二个模块的视觉效果是不是达到了自己的预期。

这是一个静态效果的高保真原型，左侧和右侧的交互模块可以在图片绘制软件中直接画，如果觉得最终效果还可以的话，编程实现可以用这个尺寸和颜色来操作。

中间的三维效果可以有两种解决办法：第一个最简单，可以在网上找到现有的案例，把图片扣进来放进去看是不是满意;另外，如果平时有差不多类似的项目可以生成后放进去也是一样。

　　 4数据处理及开发环境配置

数据处理是为了提升最终程序的性能，避免跨文件查询、计算，避免网页加载多个csv文件导致载入时间变长。

为了提升可视化项目的交互效果，如果是有多个文件需要读取，实时计算交互，建议合并成一个文件，特别是需要重新计算一个新的数据，预先计算好，就能大幅度提升效率。

开发环境配置

涉及到开发效率问题，开发环境需要考虑编辑器、打包&编译的环境、第三方库的管理这几个因素。避免跨文件查询、计算，避免网页加载多个csv文件导致载入时间变长。

很多人刚开始接触可视化或者前端开发的时候习惯直接开一个页面，在head里面直接引入一个独立的库文件。这样的缺点在于，每次都要拷贝一个第三方的库文件，不太好管理，第二如果库文件更新了这个不能自动更新，第三，程序写完后也没有压缩，直接部署速度很慢。

如果预先配置好打包编辑环境，相对比较方便，每次直接引入一个像d3,这样的第三方库就可以。如果它更新，我的也会自动更新。网页做完后也会自动压缩，这样分享效率提高很多。

　 5编码开发

底层框架设计图

我们配置好开发环境后根据前面的草图构思包括原型绘制，我们就形成了一个认识，整个项目我是分4个模块实现，每个模块采用的技术心里都有底了。

 

第一个模块概况透视需求，就是把所有物流分支点配送目的地，商家、以及快递员路径全部展示出来。最好还能提供用户交互效果。最好的实现方式就是采用WebGL他可以提供三维的数据展示，同时带动几万个点非常轻松。

第二个模块我们要展示实时物流状况，把每个快递员实时地理位置展示出来，最好有一个C线拖影的效果。canvas最符合我们的需求，因为可以做二维的动画，因为要展示地理信息，还需要用到D3地理投影功能。要实现这样的效果我们可以分层绘制动画。

可以把底图边界或者静态地理位置分另外的层绘制，不需要刷新他，运动的部分用专门用一层canvas绘制他，每次更新运动部分，不更新静止部分，这样可以提升效率。

第三个模块绩效分析，绩效分析模块基于地图做一个三维柱状图，解决了地图底图问题。可以用D3把现有地图文件通过绘制成SVG再传入three.js再拉伸，这样操作可以支持分地区展示不同的高度。

基于地理位置的网点监控模块解决主要的难点是leaflet.js插件本身有事件捕获值，它会重写覆盖掉现有事件，如果要在上面添加自定义交互需要覆盖掉本身事件捕获值。

网点监控功能需求是展示地图上各个网点，最好实现乘积的缩放功能，因为不能所有的点全部展示在可视范围之内，这样当视图缩小的时候点的密集程度会覆盖掉地图，最好是能实现聚合分散效果。即地图放大的时候点分散开来，地图缩小的时候点能聚拢在一起。在一定范围内控制点的数量，用户体验会好点。

针对这个需求，地理展示的框架leaflet.js会是一个比较好的选择，因为它是一个比较成熟的框架，能提供点的聚合分离效果，也能在每个点上做视频加载效果都可以坐上去。

为了支撑4个模块之间来回切换以及数据管理，我在vue.js框架里面引入数据状态管理和路由的插件。现在这种单页应用，每次访问都会跳到同一个页面，为了支持不同模块都可以进行浏览器展示，其中需要用路由插件来支持。

还有个比较关键的地方，由于每个模块都用了动画的效果，那么模块之间在切换的时候就需要把动画停掉，否则动画之间会冲突导致浏览器崩溃。

　 6作品部署

作品做完后就剩下作品的部署和分享，最简单的方式是放到github上，不用另外购买域名和服务器，github支持个人静态网页的部署。如果没有用过github的同学可以先注册一个账号，网上搜索一下“怎么用github做一个blog”，操作过程非常简单。

如果可视化作品数据量非常大，用网络分享就不太现实，可以用electron打个包，在本地即可运行，然后发给想要欣赏作品的人。我已经把代码放到了github上，有兴趣的同学可以下载看一下。

　 注：本文来源东湖大数据交易中心，作者：郭伟，版权著作权属原创者所有。欲了解更多大数据行业相关资讯，可搜索数据观(中国大数据产业观察网www.cbdio.com)进入查看。

☞点击进入 阿里云 在数据观的企业栏目>>>

 

责任编辑：汤德正