With Beams and Cannons — How to Spice Up D3 Graphs with a Physics Engine

on YouTube ↗40m

" summary

Combines D3.js and the Matter.js physics engine to drive graph layouts by mapping SVG paths to physics bodies and rendering them with a custom D3+Matter renderer. Demonstrates a box-office-style drop chart where bars leaving the chart spawn falling physics bodies, and implements constraints to pull circles into a packed layout. Notes performance limits—about 100 moving bodies on modest hardware—so throttling and removing old bodies is necessary to keep it responsive.

AI-written summary · about

" chapters (11)

1. 0:00Physics motivation
2. 2:08D3.js basics
3. 8:56Data binding updates
4. 11:04Matter.js intro
5. 13:32Matter.js with D3
6. 19:15Box Office Chart physics
7. 22:47New physics layout
8. 27:42Forces and constraints
9. 30:53Physics-based pack layout
10. 35:10Demo summary
11. 36:12Q&A

" related talks

• 51mD3 js: Easy and flexible data visualisation using Web standardsJos Dirksen · Devoxx Belgium 2017
• 12mBattle-Tested Techniques for Animation & Data VizKrystal Campioni · React Summit Remote Edition 2021
• 45mNatural physics simulations and canvas hackeryMatt Keas · Full Stack Fest 2015
• 27mVisualizing Graphs in SwiftConrad Kramer · iOS Conf SG 2016
• 24mBeyond the bar graph: Creative visualization with D3.jsJoanne Cheng · FutureJS 2014
• 28mGetting Started with D3.jsElisabeth Engel · RuhrJS 2016
• 21mData Visualizations with React + D3Swizec Teller · Reactathon 2018
• 26mHooked on D3: Creating Animated Ch(art)s with D3 and ReactMonica Wojciechowska · Nordic.js 2019