Streamlit-mpl-svg: Reformat Matplotlib SVGs for easier access in Streamlit and customzation with CSS

🧩 Streamlit Components
1

Hi all,

I recently had the idea to see if I could migrate a very old data-visualization project of mine (that was part of an extension for an in-house plotting library) to Streamlit. This plotting library relied on Matplotlib to output png plots for use in articles/papers. The challenge was to see if we could generate, in parallel, interactive widgets for the web out of a set of plots that depict changes (in time or other independent variables). Anyways, long story short, that old project inspired this much smaller one.

streamlit-mpl-svg

Component Demo

streamlit-mpl-svg-demo

Overview

This package provides tools for reformatting matplotlib figures with the end result being an SVG with accompaning CSS. The core motivations/intentions behind this package include:

  • make it easier to target plot elements with CSS,

  • automatically size SVG to fit parent Streamlit containers,

  • make changes to Matplotlib SVG without altering structure (moving or removing elements from the SVG DOM tree or adding elements to it) or changing the core nature of the SVG’s elements (like element types),

  • focus on the main important visual elements and characteristics rather than pass through Matplotlibs large, complex list of customization parameters (note: users should still be able to customize matplotlib plots the usual way if they so choose),

  • provide a static CSS template for reusability,

  • enable transition behavior by using single step CSS transitions and working with Streamlit’s data flow model to stitch the steps together

Installation

Install streamlit-mpl-svg with pip:

pip install streamlit-mpl-svg

Current limitations

This project was cobbled together in a short span of time and has only been tested with a few types of plots. It currently has many limitations and the CSS transitions capability is basically a proof of concept at this point. Limitations include:

  • Transitions and custom CSS can break when the SVG DOM tree structure changes. Best practice is to Fix axes (fix range) and not to move x or y position of elements such that they lie outside of the SVG.

  • Currently, transitions are only applied to bars (in bar graphs), lines, and poly collections.

  • Currently, transitions only apply to changes in the d property (not changes in translational properties like x, and y).

Fixes and improvements for some of these are already in the works, so stay tuned and check out the Github repo for updates:

2 Likes