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