驱动DT时代的数据可视化

韩凯 ,董晓庆 蚂蚁金服－体验技术部－数据可视化小组

韩凯

• ⼩小鲜⾁肉 • 重度视觉刺激依赖症患者 • 现在在蚂蚁⾦金服体验技术部从事数

据可视化的开发和研发⼯工作

董晓庆

• 技术狂⼈人 • ⽼老极客 • 多年互联⺴⽹网⾏行业码农经验 • 现在在蚂蚁⾦金服体验技术部从事

数据可视化的开发和研发⼯工作

搭档



极客



搭档



极客

柱状图



雕兄

折线图

程序员小A



饼图

复杂



业务为主



专业



效率



现成的

so happy！



版权



收费



太贵了

你给我做⼀一个⼀一样的！ 2个⽉月！



多久？ 好！

小白



学习 ACharts



模仿

http://acharts.github.io/

SVG



Raphael



ACharts-canvas



canvas SVG



Gabriel

追随经典



传统图表



绘图系统



需求者从可视化demo中选取可视化形式



可视化⼯工程师 完成组件



后端程序员 加⼯工数据



前端⼯工程师 集成系统

1. 过程复杂，效率低。 2. 不恰当。 3. 结果浅显。



设计师 设计视觉效果

可视化⼯工程师

什么是数据可视化？

？

什么是数据可视化？



世界



数据



可视化



⼈人类智慧



⽆无限



海量 规律 反⼈人类



精炼 直观 启发性



发现 总结

通⽤用数据处理技术 ⾼高级智能模型 ⼀一种探索⽅方法

the Grammar of Graphics

桥？ ＋ 统计 ＝ G2系统

统计性的

X Table Width



Z depth



Z



X

Y

depth z depth / Z *100 table = table width / X *100

FW：完全洁净级 IF：内部洁净级 VVS1-VVS2：⾮非常⾮非常细微的内部瑕疵级 VS1-VS2：很轻微的瑕疵级 S1-S2：轻微瑕疵级 I1-I2-I3：不洁净级

carat

price clarity



映射



y x color

位置 尺⼨寸 ⾓角度／斜率



颜⾊色 形状 。。。



视觉通道

平均数 中值 平滑



计数 封箱 回归 等等

统计

clarity



color



标度

可视对象

空间

图例



坐标轴



分⾯面



辅助设施

展⽰示型



统计型



关系型



⾼高交互



可视化服务平台



ACharts



G2



Spider



Spirit



map scale stat legend tooltip



geom



space



视觉
 通道



axis 。。。



Gabriel



可 视 化 知 识 沉 淀 平 台



SVG



Canvas



WebGL

拿来主义 追随传统 图形⼯工程 思考本质 新的突破 整体构架



HighCharts ACharts Gabriel

可视化本质 G2

全新构架

谢谢

蚂蚁⾦金服——体验技术部——可视化⼩小组

Q&A



拿来主义 追随传统 图形⼯工程 思考本质 新的突破 整体构架



Highcharts Acharts Gabriel

可视化本质 G2

全新构架

姓名：韩凯 花名：好修 email：hankaiai@126.com 微信：hankaiai

姓名：董晓庆 花名：萧庆 email：dxq613@gmail.com 微信：737198674