D3 (Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It uses HTML, CSS, and SVG to create visualizations that can be viewed on any modern browser. D3 provides powerful visualization components and a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.
(Easier) Interactive Data Visualization in React
React Advanced Conference 2021React Advanced Conference 2021
27 min
(Easier) Interactive Data Visualization in React
Top Content
This Talk is about interactive data visualization in React using the Plot library. Plot is a high-level library that simplifies the process of visualizing data by providing key concepts and defaults for layout decisions. It can be integrated with React using hooks like useRef and useEffect. Plot allows for customization and supports features like sorting and adding additional marks. The Talk also discusses accessibility concerns, SSR support, and compares Plot to other libraries like D3 and Vega-Lite.
Painting with Data: Intro to d3.js
JSNation Live 2021JSNation Live 2021
130 min
Painting with Data: Intro to d3.js
Workshop
Ian Johnson
Ian Johnson
D3.js is a powerful JavaScript library for building data visualizations, but anyone who has tried to use it quickly finds out that it goes deeper picking your favorite chart type. This workshop is designed to give you a hands-on introduction to the essential concepts and techniques for creating custom data visualizations with d3.js. By the end of this workshop you will have made an interactive and animated visualization on a realistic dataset that you can easily swap out with your own.
Battle-Tested Techniques for Animation and Data Viz with React
React Summit Remote Edition 2021React Summit Remote Edition 2021
25 min
Battle-Tested Techniques for Animation and Data Viz with React
Motion is a powerful tool in data visualization, but it must be used carefully to avoid confusion. Implementing charts with React and D3 can improve the user experience. The use of D3 scales and react-spring can enhance animations. Canvas is a better choice for rendering many elements. Accessibility considerations should be made to accommodate users who prefer reduced motion.