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

React Advanced 2024

Welcome to the Powerful Data Visualization with aggrid and AgCharts Workshop. The workshop covers installing Ag Grid, defining columns, sorting, filtering, dragging, pinning, and spanning using Ag Grid. It also explores advanced features of Ag Grid and dives into AgCharts, Ag Grid's new charting product. The workshop covers various topics such as getting started with Ag Grid, defining columns and binding data, setting up column definitions and row data, reviewing data and data set, row sorting, retrieving rows and virtualization, filtering and sorting, customizing sorting, default column definitions, custom filters, using filters in AGGrid, cell rendering in AGGrid, computing price value, using value getter to compute order totals, computing cell values and debugging errors, reusable value getters and formatting cell values, value formatter and formatting cell values, cell rendering in AGGrid, enabling cell editing, AG Charts, and configuring axes in AG Charts.

Does your React app have lots (and lots) of data that needs to be displayed in both Data Grids and Charts? Do your users want to interact with, analyse, and work with this data without compromising on performance or reliability? AG Grid provide the best React Data Grid &amp; Charts libraries that are packed with features and provide unbeatable performance whilst being fully customizable. In this workshop, you'll learn how to get started with both AG Grid and AG Charts, learn how to use their key features. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid &amp; AG Charts into your React application.

Powerful Data Visualisation with AG Grid & AG Charts

Brian Love

React Summit

React Summit 2024

Welcome to the workshop! Today we'll be diving into AG Grid and React, covering features such as column definition, row data and sorting, cell rendering and customization, cell editing, and styling AG Grid. We'll also explore value getters, value formatters, cell renderers, and custom cell editors. AG Grid supports infinite row rendering and integrates seamlessly with Firebase for real-time data streaming. With themes and extensive customization options, AG Grid provides functionality and scalability for handling large datasets.

Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.

Build a Powerful Datagrid With AG Grid

React Summit US

React Summit US 2023

AG Grid is a powerful JavaScript grid used in various applications. It can handle millions of rows of data and supports Excel-like functionality. The most important construct in AG Grid is the column definition, which instructs AG Grid on how to represent properties in the data set. AG Grid provides sorting and filtering options, as well as the ability to customize cell rendering and editing. Styling cells and rows in AG Grid can be done using cell styles, cell classes, or cell class rules. AG Grid also offers customization options with CSS variables, SAS rules, and module system for bundle size control.

Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application. We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid. Prerequisites: Basic React and JavaScript Workshop level: Beginner

Build a powerful DataGrid in few hours with Ag Grid

Mike Ryan

React Summit 2022

PolarisViz is a collection of React components that provide consistent visual styles, motion design, and accessibility features. It aims to solve the problem of inconsistencies in visualization decisions made by different teams. The library is flexible for different visual styles and has centralized theme management. PolarisViz was integrated with React Native using a separate library called Polaris Viz core. Challenges included limitations in native apps and the need to share UI components between web and mobile platforms.

At Shopify, the Insights team creates visualization experiences that delight and inform. We've done a lot of great work prioritizing accessibility and motion design for web. Our mobile experiences though, were a bit of an afterthought, but not anymore! In this talk, we'll go through how we created our data viz components library; How we encapsulated core logic, animation, types and even UI components for web and mobile; and also why keeping things separate sometimes is better - to create awesome UX.

Sharing is Caring: Reusing Web Data Viz in React Native

Krystal Campioni

JS Nation

JSNation 2022

Welcome to GPU Accelerating Node.js Web Services and Visualization with Rapids. Rapids aims to bring high-performance data science capabilities to Node.js, providing a streamlined API to the Rapids platform without the need to learn a new language or environment. GPU acceleration in Node.js enables performance optimization and memory access without changing existing code. The demos showcase the power and speed of GPUs and rapids in ETL data processing, graph visualization, and point cloud interaction. Future plans include expanding the library, improving developer UX, and exploring native Windows support.

The expansion of data size and complexity, broader adoption of ML, as well as the high expectations put on modern web apps all demand increasing compute power. Learn how the RAPIDS data science libraries can be used beyond notebooks, with GPU accelerated Node.js web services. From ETL to server side rendered streaming visualizations, the experimental Node RAPIDS project is developing a broad set of modules able to run across local desktops and multi-GPU cloud instances. <a href="https://www.froala.com/wysiwyg-editor?pb=1"></a>

GPU Accelerating Node.js Web Services and Visualization with RAPIDS

Allan Enemark

ML conf EU

ML conf EU 2020

Jupyter Notebooks are important for data science, but maintaining them can be challenging. Visualizing data sets and using code quality tools like NBQA can help address these challenges. Tools like nbdime and Precommit can assist with version control and future code quality. Configuring NBQA and other code quality tools can be done in the PyProject.toml file. NBQA has been integrated into various projects' continuous integration workflows. Moving code from notebooks to Python packages should be considered based on the need for reproducibility and self-contained solutions.

Data visualisation is a fundamental part of Data Science. The talk will start with a practical demonstration (using pandas, scikit-learn, and matplotlib) of how relying on summary statistics and predictions alone can leave you blind to the true nature of your datasets. I will make the point that visualisations are crucial in every step of the Data Science process and therefore that Jupyter Notebooks definitely do belong in Data Science. We will then look at how maintainability is a real challenge for Jupyter Notebooks, especially when trying to keep them under version control with git. Although there exists a plethora of code quality tools for Python scripts (flake8, black, mypy, etc.), most of them don't work on Jupyter Notebooks. To this end I will present nbQA, which allows any standard Python code quality tool to be run on a Jupyter Notebook. Finally, I will demonstrate how to use it within a workflow which lets practitioners keep the interactivity of their Jupyter Notebooks without having to sacrifice their maintainability. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Never Have an Unmaintainable Jupyter Notebook Again!

Marco Gorelli

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

Today's workshop focused on data visualization in web development, highlighting its value in understanding user needs, optimizing feature development, and analyzing code bases. The workshop covered various topics such as data wrangling, mapping abstract data values to visual values, and using tools like D3 and Vega-Lite. Participants learned how to create visualizations using Observable notebooks, plot library, and different types of plots. The exercises included working with user behavior and device types, API responses, and adding interactivity to charts. Overall, the workshop emphasized the importance of data visualization in making informed decisions and accessing insights and analytics.

In this workshop, through hands-on projects we'll learn how to use Observable, a browser-based reactive coding platform, to rapidly build insightful, interactive visualizations in JavaScript. After completing this workshop, you'll have the basic tools &amp; techniques you need to start using dataviz to better understand your code, your projects &amp; your users, and make better data-driven decisions as a developer. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#dataviz