Goodbye D3, Hello ECharts

on YouTube ↗23m

" summary

GitLab replaces low-level D3 work with ECharts (landed in GitLab 11.6, December) and ships a synchronized zoomable metrics UI, column and line charts plus a heatmap, built by 3–4 engineers in about 8 months. ECharts uses ZRender to switch between SVG and canvas, handles large datasets with better performance than prior libraries, but has spotty English docs, minimal tests and a complex internal architecture; outcome: much higher development velocity and successful rollout.

AI-written summary · about

" chapters (20)

1. 0:00Intro
2. 1:31Single application for the entire DevOps lifecycle
3. 3:03D3.js is a JavaScript library for manipulating documents based on data using HTML, SVG, and CSS
4. 5:41Automatically monitor metrics so you know how any change in code impacts your production environment.
5. 6:35Line Charts
6. 6:49Visualization helps us achieve our product vision
7. 7:03We cannot spend months building our own wrappers around D3
8. 7:35Shipping features at a fast rate
9. 8:09We needed a library that was 1. flexible enough to run out of the box 2. allows us to customize when needed
10. 9:12ChartJS - works great out of the box - difficult to customize - difficult to add new charts
11. 10:34Opinion: Encapsulated config is more maintainable
12. 11:22Britecharts - examples that fit our needs - performance issues
13. 15:41Documentation could be improved
14. 16:11Difficult to contribute effectively upstream
15. 16:49Test coverage is minimal
16. 17:55Core team is very friendly and genuinely wants the project to succeed
17. 18:33Mentoring by the Apache incubation team
18. 19:20Core team trying to grow a greater community
19. 19:47Future goals of ECharts at GitLab
20. 22:21Depending on your use case, it might help you ship faster

" related talks

• 21mBootstrap your dashboard the right wayAlexis Falaise · EmberFest 2022
• 51mD3 js: Easy and flexible data visualisation using Web standardsJos Dirksen · Devoxx Belgium 2017
• 32mD3 and React, TogetherShirley Wu · React Amsterdam 2018
• 15mThe Future of Data Visualization on the WebAlan Mendelevich · You Gotta Love Frontend 2019
• 28mGetting Started with D3.jsElisabeth Engel · RuhrJS 2016
• 20mIntro to LayerChartSean Lynch · Svelte Summit Spring 2024
• 24mBeyond the bar graph: Creative visualization with D3.jsJoanne Cheng · FutureJS 2014
• 14mThe ABC of Data VisualizationIrene Ros · Fluent 2013