Bootstrap your dashboard the right way
summary
Compares Chart.js (canvas) and D3 (SVG) inside Ember by concrete examples: simple monthly bar charts, stacked country breakdowns, and a 17,000-point daily series where Chart.js renders a single DOM canvas and keeps performance steady. Chart.js wins for fastest implementation and native tooltips but forces complex custom HTML-in-canvas hacks for bespoke styling. D3 requires more setup but lets code per-bar event handlers, use bisector to pick nearest point on lines, animate with transitions and interpolation, and add ARIA attributes for real accessibility and testable DOM.
AI-written summary · about
chapters (12)
- 0:00Introduction to dashboard design
- 1:50Choosing visualization libraries
- 3:40Basic chart implementation
- 5:27Simple bar charts with VGS
- 7:36Quick charts with Chart.js
- 9:03Stacked and complex charts
- 10:51Adding interactivity and tooltips
- 12:35Advanced interactivity with D3
- 14:23Handling large datasets
- 15:48Animations and transitions
- 16:33Accessibility and testing
- 19:00Final recommendations and Q&A
related talks
33mTemplate-first Data Visualizations
28mGetting Started with D3.js
24mBeyond the bar graph: Creative visualization with D3.js
43mThe Future of Data Visualization on the Web
33mPainting with Data
51mD3 js: Easy and flexible data visualisation using Web standards
32mD3 and React, Together
23mBattle for the DOM: D3 vs. React