【AICon】探索八个行业创新案例,教你在教育、金融、医疗、法律等领域实践大模型技术! >>> 了解详情
写点什么

蚂蚁金服开源 | 可视化图形语法 G2 3.3 琢磨

  • 2019-08-30
  • 本文字数:901 字

    阅读完需:约 3 分钟

蚂蚁金服开源 | 可视化图形语法G2 3.3 琢磨

G2 是蚂蚁金服数据可视化解决方案 AntV 的一个子产品,是一套数据驱动的、高交互的可视化图形语法。



经过两个多月密锣紧鼓的开发,400+次提交,G2 3.3 版本今天终于和大家见面了。自上次 3.2 版本发布以来,我们收到不少图表组件相关的需求和吐槽,团队的工程师们和设计师们倾力合作,为大家带来更丰富、体验更好的图表组件。同时,3.3 版本为 G2 带来新的图表成员:小提琴图,并为大家带来官方精选的图表案例等。

图表组件整体升级

G2 3.3 版本里,我们重构了所有图表组件,包括图例(legend)、提示信息(tooltip)、文本标签(label)、坐标轴(axis)和辅助信息(guide),梳理并简化了组件的生命流程,以此为基础为组件带来更优化的样式和交互,并扩充了更多功能。

1.标签(label)的痛点改进和增强

针对性地对地图、散点图和 treemap 做了 label placement 相关防覆盖的处理。


2.提示信息(tooltip)增强

tooltip 此前都是 HTML 版本,本次补充了 G(Canvas 和 SVG)版本,也就是支持导出的版本。另外,HTML 版本也做了进一步加强,可以更轻松地定制出更多效果。


3.图例(legend)的扩展

legend 做了大量的功能扩展和样式调整,比较值得一提的是 color / size / html 和翻页 legend。


4.坐标轴(axis)的新功能

axis 组件的 label 目前增加了两个方向的 offset 支持,因此,在小型图表中,可以实现坐标轴文本内嵌了。


6 个精品案例

根据业务的关联性和复用性,我们提炼了大量的精品 demo 案例,后续会逐步开放,这一期更新了 6 个折线图。



致敬和探索

3.3 版本里,geom 的大家庭里又多了一位成员,小提琴图(violin)。向 vega、ggplot2 两位前辈致敬,希望 G2 实现的版本也能为统计世界里这个经典的图表带来不一样的体验。



另一方面基于 3.3 提供的更完善的图形语法能力,这段时间我们做了可视化 storytelling 案例《泰坦尼克号数据集可视分析》。



另一个案例是这次 3.3 发布前我们用 webpack-visualizer 对 G2 的打包模块进行了可视化分析,排查 Webpack 打包过程中存在的重复、冗余的依赖库。


最终我们用 G2 实现了一个版本:



本文转载自公众号蚂蚁金服科技(ID:Ant-Techfin)。


原文链接:


https://mp.weixin.qq.com/s/S2q8vaIkPJBvkeFhwjmtKg


2019-08-30 18:001804
用户头像

发布了 150 篇内容, 共 31.9 次阅读, 收获喜欢 38 次。

关注

评论

发布
暂无评论
发现更多内容

Javascript实现一个Module

Jeannette

Web/Css预处理语言的Less的使用01

Jeannette

架构训练营 - 模块七

Geek_9de3de

架构实战营

聊聊 Kafka:Producer Metadata 读取与更新机制

老周聊架构

云原生 Apache Pulsar 签约计划第二季 2月月更

模块八作业

bob

「架构实战营」

Trino通过Iceberg创建表的过程分析

漫长的白日梦

数据湖 iceberg trino

模块六作业:拆分电商系统为微服务

危险游戏

架构实战营

Go+ HTTP 服务器教程(5.2)

liuzhen007

28天写作 12月日更

❤️使用 HTML、CSS 和 JavaScript 的简单模拟时钟❤️

海拥(haiyong.site)

JavaScript 大前端 28天写作 签约计划第二季 12月日更

040022-week6-design

InfoQ_70156470130f

EasyRecovery如何恢复虚拟建模软件的数据文件

淋雨

EasyRecovery

模块6作业

Geek_cb2b43

初探.net core微服务架构

为自己带盐

Consul dotnet 28天写作 12月日更

模块6作业

忘记喝水的猫

架构训练营

测试敏捷化 vs 敏捷测试

BY林子

敏捷测试 测试敏捷化

Web/Css 预处理语言的 Less 的使用 03

Jeannette

小程序开通cms可视化网页后台

坚果

小程序 28天写作 12月日更

架构实战营总结

michael

#架构实战营

Web/Css 预处理语言的 Less 的使用 02

Jeannette

聊聊 Kafka: Producer 的网络模型

老周聊架构

签约计划第二季

Linux之pwd命令

入门小站

Linux

在线JSON转jsdoc工具

入门小站

工具

给弟弟的信第10封|但行好事,莫问前程

大菠萝

28天写作

Dubbo框架学习笔记一

风翱

dubbo 12月日更

架构训练营 -- 模块二

LJK

架构训练营

dart系列之:如丝滑般柔顺,操作文件和目录

程序那些事

flutter io dart 程序那些事 12月日更

从0开始设计Twitter系统架构

俞凡

twitter 架构 微服务 大厂实践

Web/Css 预处理语言的 Less 的使用 04

Jeannette

架构学习总结

George

HubSpot company数据在UI上的展示和通过API方式进行获取

Jerry Wang

Cloud 28天写作 SAP 12月日更

电商系统设计

michael

#架构实战营

蚂蚁金服开源 | 可视化图形语法G2 3.3 琢磨_开源_Geek_cb7643_InfoQ精选文章