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

简介: G2 是蚂蚁金服数据可视化解决方案 AntV 的一个子产品,是一套数据驱动的、高交互的可视化图形语法。 经过两个多月密锣紧鼓的开发,400+次提交,G2 3.3版本今天终于和大家见面了。

G2 是蚂蚁金服数据可视化解决方案 AntV 的一个子产品,是一套数据驱动的、高交互的可视化图形语法。
经过两个多月密锣紧鼓的开发,400+次提交,G2 3.3版本今天终于和大家见面了。自上次 3.2版本发布以来,我们收到不少图表组件相关的需求和吐槽,团队的工程师们和设计师们倾力合作,为大家带来更丰富、体验更好的图表组件。同时,3.3版本为 G2 带来新的图表成员:小提琴图,并为大家带来官方精选的图表案例等。

图表组件整体升级

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

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 实现了一个版本: 链接

特别感谢

3.3版本的迭代中,我们很欣喜地看到,有越来越多开源社区的小伙伴加入到了 G2 的贡献者行列中来。感谢大家的鼎力支持,G2 非常荣幸能和大家一路同行!(以下贡献者排名不分先后)

更要感谢广大用户对 G2 的青睐,据不完全统计,自 G2 17年11月22开源至今,使用 G2 的系统数字已经由1.1k+增长到目前的8.5k+,G2 在 github 上的 star 数也由0.7k+增长到目前的6.3k+。大家的信任,让我们倍感喜悦,同时肩上也背负起沉甸甸的责任。希望未来的日子里,我们继续互相激励互相提携,做出更优秀的可视化产品来。

欢迎共建

G2 是一套数据驱动的、高交互的可视化图形语法。是目前 JavaScript 社区对 《The Grammar of Graphics》书中理论还原度最高的实现。感兴趣的小伙伴们欢迎通过以下途径关注和联系我们!
AntV 是蚂蚁金服全新一代数据可视化解决方案,主要子产品包括 G2、G6、F2,欢迎共建!
相关文章
|
数据可视化 JavaScript 前端开发
[Python可视化]一种极具特色(但是并没有什么用)的GIS专题图可视化方法
[Python可视化]一种极具特色(但是并没有什么用)的GIS专题图可视化方法
95 0
|
3月前
|
数据可视化 大数据 定位技术
GIS:开源webgl大数据地图类库整理
GIS:开源webgl大数据地图类库整理
122 0
|
1月前
|
数据可视化 小程序 Cloud Native
DIY可视化业界领先的可视化快速生成FinClip小程序源码
DIY可视化业界领先的可视化快速生成FinClip小程序源码
36 0
|
3月前
|
C# 数据可视化 开发者
WPF开发者福音:深度解析OxyPlot与LiveCharts图表库,轻松实现数据可视化不再是难题!
【8月更文挑战第31天】在WPF应用中,数据可视化对提升用户体验至关重要。本文介绍并演示了两种流行图表库OxyPlot和LiveCharts的集成与使用方法。OxyPlot是一款适用于.NET应用的开源图表库,提供多种图表类型,易于集成。LiveCharts则以其丰富的图表类型和动画效果,特别适合实时数据展示。通过具体代码示例,本文展示了如何利用这两种图表库创建折线图和柱状图,并详细说明了安装和配置步骤。希望本文能帮助开发者在WPF应用中轻松实现高效、美观的数据可视化。
204 0
|
6月前
|
数据可视化 安全 数据挖掘
Tableau进阶--Tableau数据故事慧(20)解构Tableau的绘图逻辑
Tableau进阶--Tableau数据故事慧(20)解构Tableau的绘图逻辑
|
移动开发 数据可视化 前端开发
低代码引擎核心技术,可视化动作——OneCode技术实践
低代码平台最大的一个技术特点便是开发图形化、可视化,通过拖拉拽方式快速实现企业数字化转型中的创新应用。在实践中通过图形化技术确实在一些特定领域大幅降低了应用开发的准入门槛,使得非专业人员也可以快速的参与到企业的数字化转型中。但随着业务的深入个性化需求也进一步增多,多数的低代码平台都无法满足相关的逻辑,这时仍然需要专业的程序员通过代码的方式来扩展。 但这些业务逻辑的代码繁琐且无用,只能让程序员在做低水平的重复工作。有痛点就会有需求,一些低代码平台推出了可视化逻辑编排能力,能够很好地解决这个问题。本文将结合OneCode平台的可视化逻辑编排设计来进行分析,希望对你有帮助。
|
存储 数据可视化 算法
「图型计算架构」GraphTech生态系统-第3部分:图形可视化
「图型计算架构」GraphTech生态系统-第3部分:图形可视化
|
SQL 移动开发 编解码
如何使用 AntV S2 打造大数据表格组件?
如何使用 AntV S2 打造大数据表格组件?
1100 0
|
数据可视化 算法 BI
【中级ECharts技术】transform进行数据转换和dataZoom在项目中的使用(可视化非常的强劲)
【中级ECharts技术】transform进行数据转换和dataZoom在项目中的使用(可视化非常的强劲)
【中级ECharts技术】transform进行数据转换和dataZoom在项目中的使用(可视化非常的强劲)
|
数据可视化 JavaScript 前端开发
【视觉高级篇】27 # 如何实现简单的3D可视化图表:GitHub贡献图表的3D可视化?
【视觉高级篇】27 # 如何实现简单的3D可视化图表:GitHub贡献图表的3D可视化?
184 0
【视觉高级篇】27 # 如何实现简单的3D可视化图表:GitHub贡献图表的3D可视化?
下一篇
无影云桌面