Data Visualization for Web Developers

Please sign in to watch this workshop.
Sign in
Bookmark
Rate this content

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 & techniques you need to start using dataviz to better understand your code, your projects & your users, and make better data-driven decisions as a developer.

This workshop has been presented at JSNation Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

Observable is a company that creates a JavaScript notebook environment designed for fast and easy data visualization in the browser. It allows users to quickly create and share dynamic visualizations and computational essays without needing to be an expert in JavaScript or data visualization.

Anjana Vakil is a Developer Advocate at Observable. She has a background in humanities, specifically in philosophy and linguistics, and has experience with Python, data analysis, and visualization before becoming a JavaScript developer.

Observable notebooks allow you to perform data visualization directly in the browser. You can write JavaScript code, visualize data dynamically, collaborate with others in real-time, and share your visualizations easily. It's particularly useful for quick explorations of data and creating interactive visual experiences.

No, you don't have to be an expert in JavaScript, data science, or data visualization to use Observable and create meaningful visualizations. Observable is designed to be accessible for users with varying levels of expertise, allowing them to leverage powerful visualization tools.

Observable is founded by Mike Bostock, the creator of D3.js. While D3.js is a lower-level library for creating complex, highly customizable visualizations, Observable provides a higher-level, more accessible environment that integrates D3.js for data visualization tasks directly in the browser.

Observable allows users to create notebooks where they can write JavaScript code to manipulate and visualize data. It uses a reactive programming model where changes in the data or code automatically update the visualizations. This makes it highly effective for dynamic, real-time data exploration and analysis.

Yes, Observable is highly suitable for educational purposes, particularly in teaching data visualization, programming, and data analysis. It allows educators and students to create interactive, dynamic content that can enhance learning and provide hands-on experience with real data.

With Observable, you can create a wide range of visualizations including charts, graphs, complex visual narratives, and interactive simulations. It supports integration with various JavaScript libraries like D3.js, allowing for extensive customization and creativity in visual representation.

Yes, Observable notebooks can be shared and collaboratively edited in real-time, making it an excellent tool for team projects and collaborations. Teams can work together on data analysis, visualization projects, and more, facilitating efficient teamwork and idea sharing.

Anjana Vakil
Anjana Vakil
139 min
16 Jun, 2021

Comments

Sign in or register to post your comment.
Sign in to access video transcription and chapter summary.

Watch more workshops on topic

Build a powerful DataGrid in few hours with Ag Grid
React Summit US 2023React Summit US 2023
96 min
Build a powerful DataGrid in few hours with Ag Grid
Top Content
Workshop
Mike Ryan
Mike Ryan
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 With AG Grid
React Summit 2024React Summit 2024
168 min
Build a Powerful Datagrid With AG Grid
Top Content
Workshop
Brian Love
Brian Love
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.
Powerful Data Visualisation with AG Grid & AG Charts
React Advanced 2024React Advanced 2024
145 min
Powerful Data Visualisation with AG Grid & AG Charts
Workshop
Brian Love
Brian Love
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 & 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 & AG Charts into your React application.
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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

(Easier) Interactive Data Visualization in React
React Advanced 2021React Advanced 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.
GPU Accelerating Node.js Web Services and Visualization with RAPIDS
JSNation 2022JSNation 2022
26 min
GPU Accelerating Node.js Web Services and Visualization with RAPIDS
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.
Never Have an Unmaintainable Jupyter Notebook Again!
ML conf EU 2020ML conf EU 2020
26 min
Never Have an Unmaintainable Jupyter Notebook Again!
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.
Sharing is Caring: Reusing Web Data Viz in React Native
React Summit 2022React Summit 2022
26 min
Sharing is Caring: Reusing Web Data Viz in React Native
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.