Altair-Beispiel

In Altair wird direkt die pattern-Funktionalität der SVG benutzt. Hier wird über die ID ein Pattern aus den SVG-defs ausgewählt.

1. Importe

Wir benötigen die Funktion display_html von IPython, um die SVGs inline in HTML integrieren zu können, damit sie später als Pattern in Altair verwendet werden können.

from IPython.display import display_html

2. Einlesen und Dekodieren der SVG-Muster

Anschließend rufen wir die Funktion für unsere SVG auf und integrieren die Pattern in das HTML.

def read_svg(svg_path):
    with open(svg_path, "rb") as svg_file:
        svg = svg_file.read().decode("utf-8")
    return svg


display_html(read_svg("../../../_static/pattern/cusypattern.svg"), raw=True)

3. pandas DataFrame für die Bereitstellung der Daten

import altair as alt
import pandas as pd

data = pd.DataFrame(
    {
        "category": [
            "Purple",
            "Teal",
            "Orange",
            "Blue",
            "Red",
            "Cyan",
            "Magenta",
            "Green",
        ],
        "value": [90, 80, 50, 55, 50, 60, 40, 80],
        "pattern": [
            "pattern_0",
            "pattern_1",
            "pattern_2",
            "pattern_3",
            "pattern_4",
            "pattern_5",
            "pattern_6",
            "pattern_7",
        ],
    }
)

4. x- und y-Achsen definieren

Die x-Achse soll aus den Kategorien bestehen, die y-Achse aus den zugehörigen Werten.

Für altair.Fill wird die ID des jeweiligen SVG-Muster verwendet, um die Füllung festzulegen.

chart = (
    alt.Chart(data, title="cusy Pattern Example", width=600, height=400)
    .mark_bar(stroke=None)
    .encode(
        x=alt.X(
            "category:N",
            sort=[
                "Purple",
                "Teal",
                "Orange",
                "Blue",
                "Red",
                "Cyan",
                "Magenta",
                "Green",
            ],
            axis=alt.Axis(title=None, labelAngle=0),
        ),
        y=alt.Y("value:Q", axis=alt.Axis(title=None)),
        fill=alt.Fill(
            "pattern:N",
            scale=alt.Scale(
                range=[
                    "url(#dotspattern)",
                    "url(#caretpattern)",
                    "url(#trianglepattern)",
                    "url(#spiralpattern)",
                    "url(#crosspattern)",
                    "url(#diamondpattern)",
                    "url(#squarepattern)",
                    "url(#tristarpattern)",
                ]
            ),
            legend=None,
        ),
    )
)

5. svg-Backend auswählen

alt.renderers.set_embed_options(renderer="svg")

chart