React Advanced

React Advanced 2021

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.

If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick &amp; easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data &amp; use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time &amp; effort! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

(Easier) Interactive Data Visualization in React

Anjana Vakil

JSNation Live

JSNation Live 2021

This workshop covers the process of making a D3 visualization with real data. It explores drawing elements using D3 and SVG, generating data-driven elements, and building a scatter plot. It also covers useful D3 functions for scale setup, debugging D3 visualizations, and creating dynamic chart components. The workshop emphasizes the importance of object constancy, interactivity, and tooltips in data visualization. It also mentions the potential of D3, different rendering technologies, and the use of the brush tool for data selection.

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Painting with Data: Intro to d3.js

Ian Johnson

React Summit Remote Edition

React Summit Remote Edition 2021

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.

In this talk we will discuss how to combine the power of D3 as a math library with React's rendering capabilities. How can we encapsulate animation for reuse with React functional components? How can we deal with restrictions in data structures to create interesting visualizations? How to approach performance issues when there are multiple animated elements on the screen? These are some of the questions that will be addressed as we dig deeper into techniques applied to real-world examples. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#d3