Advanced Streamlit Visualization Techniques

Streamlit in Snowflake (SiS) has become the standard for building internal data apps. While st.line_chart and st.dataframe are great for quick prototypes, professional-grade applications often require more sophisticated visualizations. In this post, we’ll explore advanced techniques using Altair, PyDeck, and custom components to take your dashboards to the next level.

1. Mastering Altair for Declarative Visualizations#

Streamlit’s native charts are built on top of Altair, but using Altair directly (st.altair_chart) gives you granular control over implementation.

Linked Brushing & Cross-Filtering#

One of the most powerful features of Altair is interactivity. You can link multiple charts so that selecting data in one filters the other.

import altair as alt
from vega_datasets import data

source = data.cars()

brush = alt.selection_interval()

points = alt.Chart(source).mark_point().encode(
    x='Horsepower',
    y='Miles_per_Gallon',
    color=alt.condition(brush, 'Origin', alt.value('lightgray'))
).add_params(brush)

bars = alt.Chart(source).mark_bar().encode(
    y='Origin',
    color='Origin',
    x='count(Origin)'
).transform_filter(brush)

st.altair_chart(points & bars, use_container_width=True)

This snippet creates a scatter plot and a bar chart where dragging a box (brushing) on the scatter plot dynamically updates the bar chart.

2. Geospatial Analytics with Deck.gl (PyDeck)#

For mapping, st.map is basic. st.pydeck_chart opens up the world of WebGL-powered layers.

HexagonLayers and ArcLayers#

You can visualize density and flows (e.g., logistics routes, shipping lanes) effectively.

import pydeck as pdk

layer = pdk.Layer(
    "HexagonLayer",
    data=df,
    get_position=["lon", "lat"],
    auto_highlight=True,
    elevation_scale=50,
    pickable=True,
    elevation_range=[0, 3000],
    extruded=True,
    coverage=1
)

view_state = pdk.ViewState(
    longitude=-122.4,
    latitude=37.7,
    zoom=11,
    min_zoom=5,
    max_zoom=15,
    pitch=40.5,
    bearing=-27.36,
)

r = pdk.Deck(layers=[layer], initial_view_state=view_state)
st.pydeck_chart(r)

3. Performance Profiling#

Advanced visualizations can be heavy.

• Downsampling: Don’t try to plot 1 million points. Snowflake is fast at aggregation. Use GROUP BY in your query to aggregate data before sending it to Streamlit.
• Caching: Aggressively use @st.cache_data for the result sets driving your charts.

4. Custom Components (The “Escape Hatch”)#

Sometimes Python isn’t enough. You might need a specific D3.js visualization or a React component. Streamlit’s Custom Components feature allows you to render HTML/JS/CSS directly.

In Snowflake, due to potential security constraints (content security policy), not all external scripts may load, but building self-contained components works well.

import streamlit.components.v1 as components

components.html(
    """
    <div style="background-color: #f0f2f6; padding: 20px; border-radius: 10px;">
        <h3>Custom HTML Card</h3>
        <p>This is rendered via raw HTML!</p>
    </div>
    """,
    height=150
)

Conclusion#

Don’t settle for default charts. By leveraging the full power of the Python ecosystem libraries available in Snowflake, you can build applications that look and feel like custom enterprise software.