Data visualization with Observable JavaScript

Data visualization with Observable JavaScript

• Software
• October 07, 2022

uilt-in reactivity is one of Observable JavaScript's biggest value adds. In my two previous articles, I've introduced you to using Observable JavaScript with R or Python in Quarto and learning Observable JavaScript with Observable notebooks. In this article, we get to the fun part: creating interactive tables and graphics with Observable JavaScript and the Observable Plot JavaScript library.

Create a basic Observable table

I usually think of a table as an “output”—that is, a helpful way to view and explore data. In Observable, though, a basic table can also be considered an “input." That’s because Observable tables have rows that are clickable and selectable by default, and those selected values can be used to affect plots and other data on your page. This helps explain why the function  Inputs.table(your_dataset) generates a table.

The default table is sortable if you click column headers, and shows several rows along with a scroll bar.