Visualizing the Ethereum Blockchain

on YouTube ↗21m

" summary

A live Ethereum visualizer is built for Visa using the @pmndrs stack: react 3 fiber, react-spring and drei, rendered on a seven‑panel array with a central touchpad and deployed in the San Francisco Innovation Center. Transactions render as performant points with vertex positions, colored and sized via a custom Shader, blocks use physical/transmission materials so you can peer inside, and positional audio pings as transactions hit thresholds. Proof‑of‑concept runs live though large screens cut frame rate and required performance tuning.

AI-written summary · about

" chapters (14)

1. 0:00Ethereum visualizer intro
2. 1:04What is data experience
3. 4:41Project goals and blockchain
4. 6:24Visual language for Ethereum
5. 7:26Sound and touch expansion
6. 8:49San Francisco prototype
7. 10:163D data experience tools
8. 11:213D environment with React Three Fiber
9. 14:10Blockchain block component
10. 15:35Animating blockchain with React Spring
11. 16:38Transactions in blocks
12. 18:03Color size sound for transactions
13. 19:48Future plans and next steps
14. 20:31Q&A

" related talks

• 27mScalable Data VisualizationZach Nation · React.js Conf 2015
• 13mReactive BlockchainVladimir Tasev · <React.NotAConf /> 2018
• 21mData Visualizations with React + D3Swizec Teller · Reactathon 2018
• 32mConnecting JavaScript to the BlockchainMeng Shang · Nordic.js 2018
• 29mReact with Web3 and Smart contractsAnushavan Yeghiazaryan · JavaScript Summit Armenia 2023
• 29mEvolving the Visual Programming Environment with ReactJonas Gebhardt · ReactEurope 2016
• 42mReactive RealityMassimiliano Mantione · Full Stack Fest 2016
• 37mVisualizing Large Datasets with JavaScript Using deck.glMarko Letic · RVA JavaScript Conf 2019