improve: Add more relevant snippets to the snippets panel (1/2) (#3709

)

## 📝 Summary

This PR (1/2) adds data visualization and manipulation snippets for
common DS libraries; relevant issue #3602. The snippets cover Pandas
(add to existing list), Polars, DuckDB, Altair (add to existing list),
and Matplotlib, aiding in what I believe is common (_"boilerplate"_)
coding lines for data analysis/engineering projects/workflows in
notebooks.

## 🔍 Description of Changes

<details>
<summary>Pandas Snippets (26-36)</summary>

| Category | Snippets |
|----------|----------|
| Core Operations | Memory Optimization, Data Types |
| Data Transformation | Pivot Tables, Reshaping, Merging |
| Time Series | Window Operations, DateTime Features |
| Analysis | Groupby, Aggregations, Boolean Filtering |

Key additions include memory optimization, efficient window operations,
and advanced datetime handling.
</details>

<details>
<summary>Polars Snippets (0-10)</summary>

| Category | Key Features |
|-----------|-------------|
| Core Operations | Lazy evaluation, joins, grouping |
| Performance | Memory optimization, efficient IO |
| Data Types | String ops, timestamps, categoricals |
| Analytics | Stats, window functions |

Focuses on high-performance data operations with lazy evaluation
patterns.
</details>

<details>
<summary>Altair Snippets (9-14)</summary>

| Category | Features |
|----------|----------|
| Basic Charts | Scatter, bar, histogram |
| Interactivity | Brushing, linking, filtering |
| Statistical Viz | Box plots, distributions |
| Multi-View | Faceting, dashboards |

Emphasizes interactive visualizations and statistical graphics.
</details>

<details>
<summary>Matplotlib Snippets (0-11)</summary>

| Category | Components |
|----------|------------|
| Basic Plotting | Line, scatter, histograms |
| Layout | Subplots, gridspec |
| Styling | Themes, annotations |
| Scientific Viz | Error bars, 3D plots |

Covers essential scientific visualization patterns.
</details>

_Note: This is part 1 of 2 PRs focused on enhancing existing snippets
sidebar panel._

## 📋 Checklist

- [x] I have read the [contributor
guidelines](https://github.com/marimo-team/marimo/blob/main/CONTRIBUTING.md).
- [ ] For large changes, or changes that affect the public API: this
change was discussed or approved through an issue, on
[Discord](https://marimo.io/discord?ref=pr), or the community
[discussions](https://github.com/marimo-team/marimo/discussions) (Please
provide a link if applicable).
- [ ] I have added tests for the changes made.
- [x] I have run the code and verified that it works as expected.

## 📜 Reviewers

@akshayka OR @mscolnick

---------

Co-authored-by: Akshay Agrawal <[email protected]>
Co-authored-by: Myles Scolnick <[email protected]>

marimo/_snippets/data/altair-10.py

@@ -0,0 +1,86 @@
+# Copyright 2024 Marimo. All rights reserved.
+
+import marimo
+
+__generated_with = "0.11.0"
+app = marimo.App()
+
+
+@app.cell
+def _(mo):
+    mo.md(
+        r"""
+        # Visualization: Box Plot with Violin Layer in Altair
+
+        Create layered box and violin plots with Altair. Box plots display quartiles via `mark_boxplot()` 
+        while violin plots show density distributions using `transform_density()`.
+        Combining them reveals both summary statistics and full data distributions in a single visualization.
+        """
+    )
+    return
+
+
+@app.cell
+def _():
+    from vega_datasets import data
+    import altair as alt
+    return alt, data
+
+
+@app.cell
+def _(alt, data):
+    def create_box_violin_plot():
+        # Load the dataset
+        source = data.cars()
+
+        # Create the base chart for the box plot
+        box_plot = alt.Chart(source).mark_boxplot(size=50).encode(  # Increased box size
+            x=alt.X('Origin:N', axis=alt.Axis(labelFontSize=12, titleFontSize=14)),  # Larger font
+            y=alt.Y('Horsepower:Q', 
+                    title='Horsepower',
+                    scale=alt.Scale(zero=False),
+                    axis=alt.Axis(labelFontSize=12, titleFontSize=14)),  # Larger font
+            color=alt.Color('Origin:N', legend=alt.Legend(labelFontSize=12, titleFontSize=14))  # Larger legend
+        )
+
+        # Create the violin layer
+        violin = alt.Chart(source).transform_density(
+            'Horsepower',
+            as_=['Horsepower', 'density'],
+            groupby=['Origin']
+        ).mark_area(
+            opacity=0.3
+        ).encode(
+            x='Origin:N',
+            y='Horsepower:Q',
+            color='Origin:N',
+            fill='Origin:N'
+        )
+
+        # Combine the layers
+        chart = (violin + box_plot).properties(
+            width=600,  # Much larger width
+            height=500,  # Much larger height
+            title={
+                'text': 'Horsepower Distribution by Origin',
+                'fontSize': 16  # Larger title
+            }
+        ).configure_axis(
+            labelFontSize=12,
+            titleFontSize=14
+        ).interactive()
+
+        return chart
+
+    create_box_violin_plot()
+    return (create_box_violin_plot,)
+
+
+@app.cell
+def _():
+    import marimo as mo
+    return (mo,)
+
+
+if __name__ == "__main__":
+    app.run()

marimo/_snippets/data/altair-11.py

@@ -0,0 +1,70 @@
+# Copyright 2024 Marimo. All rights reserved.
+
+import marimo
+
+__generated_with = "0.11.0"
+app = marimo.App()
+
+
+@app.cell
+def _(mo):
+    mo.md(
+        r"""
+        # Visualization: Faceted Charts in Altair
+
+        Faceted charts split your data into multiple views based on categories, making it easy to spot patterns and compare groups. 
+        Built with Altair's `facet()` method and includes interactive zoom/pan controls via `.interactive()`.
+        """
+    )
+    return
+
+
+@app.cell
+def _():
+    from vega_datasets import data
+    import altair as alt
+    return alt, data
+
+
+@app.cell
+def _(alt, data):
+    def create_faceted_chart():
+        # Load the dataset
+        source = data.cars()
+
+        # Create interactive base scatter plot
+        base = alt.Chart(source).mark_point().encode(
+            x='Horsepower:Q',
+            y='Miles_per_Gallon:Q',
+            color='Origin:N',
+            tooltip=['Name', 'Origin', 'Horsepower', 'Miles_per_Gallon']
+        ).properties(
+            width=180,
+            height=180
+        ).interactive()  # Make base chart interactive
+
+        # Create faceted chart
+        chart = base.facet(
+            column='Cylinders:O',
+            title='Miles per Gallon vs. Horsepower by # Cylinders'
+        ).configure_header(
+            labelFontSize=12,
+            titleFontSize=14
+        ).configure_title(
+            fontSize=16
+        )
+
+        return chart
+
+    create_faceted_chart()
+    return (create_faceted_chart,)
+
+
+@app.cell
+def _():
+    import marimo as mo
+    return (mo,)
+
+
+if __name__ == "__main__":
+    app.run()

marimo/_snippets/data/altair-12.py

@@ -0,0 +1,66 @@
+# Copyright 2024 Marimo. All rights reserved.
+
+import marimo
+
+__generated_with = "0.11.0"
+app = marimo.App()
+
+
+@app.cell
+def _(mo):
+    mo.md(
+        r"""
+        # Visualization: Area Charts with Gradient Fill
+
+        Create stacked area charts using `alt.Chart().mark_area()`. Demonstrates 
+        gradient fills and opacity settings with `fillOpacity`. Common for 
+        visualizing time series data or part-to-whole relationships.
+        """
+    )
+    return
+
+
+@app.cell
+def _():
+    from vega_datasets import data
+    import altair as alt
+    return alt, data
+
+
+@app.cell
+def _(alt, data):
+    def create_area_chart():
+        # Load the dataset
+        source = data.stocks()
+
+        # Create area chart with gradient
+        chart = alt.Chart(source).transform_filter(
+            alt.datum.symbol != 'IBM'  # Remove one symbol to avoid overcrowding
+        ).mark_area(
+            opacity=0.7,
+            interpolate='monotone'
+        ).encode(
+            x='date:T',
+            y=alt.Y('price:Q', stack=True),
+            color=alt.Color('symbol:N', legend=alt.Legend(title='Company')),
+            tooltip=['date', 'price', 'symbol']
+        ).properties(
+            width=600,
+            height=300,
+            title='Stock Prices Over Time'
+        ).interactive()
+
+        return chart
+
+    create_area_chart()
+    return (create_area_chart,)
+
+
+@app.cell
+def _():
+    import marimo as mo
+    return (mo,)
+
+
+if __name__ == "__main__":
+    app.run()

marimo/_snippets/data/altair-13.py

@@ -0,0 +1,66 @@
+# Copyright 2024 Marimo. All rights reserved.
+
+import marimo
+
+__generated_with = "0.11.0"
+app = marimo.App()
+
+
+@app.cell
+def _(mo):
+    mo.md(
+        r"""
+        # Visualization: Distribution Plots in Altair
+
+        Create distribution visualizations using `mark_area()` and `transform_density()`. 
+        Common for comparing distributions across categories with interactive tooltips.
+        """
+    )
+    return
+
+
+@app.cell
+def _():
+    from vega_datasets import data
+    import altair as alt
+    return alt, data
+
+
+@app.cell
+def _(alt, data):
+    def create_distribution_plot():
+        # Load dataset
+        source = data.cars()
+
+        # Create distribution plot
+        chart = alt.Chart(source).transform_density(
+            'Miles_per_Gallon',
+            groupby=['Origin'],
+            as_=['Miles_per_Gallon', 'density']
+        ).mark_area(
+            opacity=0.5
+        ).encode(
+            x='Miles_per_Gallon:Q',
+            y='density:Q',
+            color='Origin:N',
+            tooltip=['Origin:N', alt.Tooltip('density:Q', format='.3f')]
+        ).properties(
+            width=400,
+            height=300,
+            title='MPG Distribution by Origin'
+        ).interactive()
+
+        return chart
+
+    create_distribution_plot()
+    return (create_distribution_plot,)
+
+
+@app.cell
+def _():
+    import marimo as mo
+    return (mo,)
+
+
+if __name__ == "__main__":
+    app.run()

marimo/_snippets/data/altair-14.py

@@ -0,0 +1,76 @@
+# Copyright 2024 Marimo. All rights reserved.
+
+import marimo
+
+__generated_with = "0.11.0"
+app = marimo.App()
+
+
+@app.cell
+def _(mo):
+    mo.md(
+        r"""
+        # Visualization: Multi-View Dashboard in Altair
+
+        Create interactive dashboards using `alt.vconcat()` and `alt.hconcat()`. 
+        Demonstrates linked views with `alt.selection()` for cross-filtering data.
+        """
+    )
+    return
+
+
+@app.cell
+def _():
+    from vega_datasets import data
+    import altair as alt
+    return alt, data
+
+
+@app.cell
+def _(alt, data):
+    def create_dashboard():
+        # Load dataset
+        source = data.cars()
+
+        # Create selection that links all views
+        brush = alt.selection_interval(name='select')
+
+        # Scatter plot
+        scatter = alt.Chart(source).mark_point().encode(
+            x='Horsepower:Q',
+            y='Miles_per_Gallon:Q',
+            color=alt.condition(brush, 'Origin:N', alt.value('lightgray'))
+        ).properties(
+            width=300,
+            height=200
+        ).add_params(brush)
+
+        # Histogram
+        hist = alt.Chart(source).mark_bar().encode(
+            x='Miles_per_Gallon:Q',
+            y='count()',
+            color='Origin:N'
+        ).transform_filter(
+            brush
+        ).properties(
+            width=300,
+            height=100
+        )
+
+        # Combine views
+        chart = alt.hconcat(scatter, hist)
+
+        return chart
+
+    create_dashboard()
+    return (create_dashboard,)
+
+
+@app.cell
+def _():
+    import marimo as mo
+    return (mo,)
+
+
+if __name__ == "__main__":
+    app.run()