If you’re new to marimo, check out our GitHub repo: marimo is free and open source.
Data visualization is a crucial part of data analysis and storytelling. While static charts can convey information, interactive visualizations take it to the next level by allowing users to explore and understand data in depth. In this post, we’ll explore how marimo notebooks breathe life into Altair charts, creating a dynamic and interactive data exploration experience.
The power of Altair
Altair is a declarative statistical visualization library for Python. It provides a concise and intuitive way to create a wide range of statistical charts. Built on top of Vega and Vega-Lite, Altair leverages a grammar of graphics to describe data visualizations.
marimo’s built in reactivity brings a new level of interactivity to Python notebooks, and when combined with Altair, it creates a powerful environment for data visualization and exploration.
Bringing Altair charts to life with marimo
marimo enhances Altair charts in several ways:
-
Reactive Charts: With marimo’s
mo.ui.altair_chartfunction, Altair charts become reactive. This means that when you interact with the chart (e.g., selecting data points), the selected data is automatically made available in Python as a filtered DataFrame from the original dataset. -
Automatic Interactivity: marimo adds interactivity to Altair charts based on the mark type and encodings used. It chooses sensible defaults that best serve a reactive experience, without requiring additional configuration.
-
Performance: marimo provides custom data transformers for Altair charts that can reduce the payload size of data sent to the frontend by up to 80%. This is achieved by sending columnar data instead of full records, resulting in faster load times and smoother interactions.
Here’s a simple example of how to create a reactive Altair chart with marimo. Users can interact with the chart by selecting points, and the selected data will be instantly available in the chart.value DataFrame.
Not only can you display the selected data, but you can also re-use this DataFrame for further analysis or visualization. (Try making a selection below!)
How it works
marimo creates a two-way data binding between the frontend (browser) and backend (Python), for all marimo widgets under mo.ui, including mo.ui.altair_chart.
When data is selected in the frontend, we the selection range back to Python. We then use this range to filter the original DataFrame which can be accessed via chart.value.
Thanks to narwhals whatever DataFrame type is passed into mo.ui.altair_chart will be the same DataFrame type that is used for the chart.value property.
Data exploration
Sometimes it’s challenging to know what to chart. To address this, we built mo.ui.data_explorer to help you easily explore your data. This plugin was inspired by Vega’s Voyager and provides an intuitive interface for data discovery.
import marimo as mo
import polars as pl
df = pl.read_csv("hf://datasets/scikit-learn/adult-census-income/adult.csv")
mo.ui.data_explorer(df)What’s next
While marimo currently offers powerful reactivity for many types of Altair charts, we’re continuously working on expanding its capabilities. Currently, marimo does not support reactivity for geospatial data or pre-aggregated data. However, these limitations are not by design and are on our roadmap for future development.
We’re excited about the possibilities and are committed to enhancing marimo’s integration with Altair and other data visualization libraries. Stay tuned for updates!
Join the marimo community
If you’re interested in helping shape marimo’s future, here are some ways you can get involved:
