Is there a way to encode SVG paths as a point shape?

user_6586200 0
Viewed 157

I'd like to have an encoded SVG path for each point I'm plotting on an Altair plot. Say I have a list of points:

points = [p1, p2, p3, ..., pn]

and each point is defined as:

p1 = {
   'x': x1,
   'y': y1,
   'svg_path': 'M x1 y1 C x1c y1c, x2c y2c, x2 y2' 
}

And I'd like each of these paths to be plotted on an altair chart as follows:

alt.Chart(points).mark_point().encode(
    x='x:Q',
    y='y:Q',
    shape='shape:N'
)

This gives categorical shapes for each point. Is it possible to use the string for a shape in an Encoding, so each point can have a different svg path?

altair svg python
1 Answers

You can do this by setting the shape to the column containing the SVG path and setting scale=None, which causes the raw values to be used directly. Here is a short example:

import pandas as pd
import altair as alt

df = pd.DataFrame({
   'x': [0],
   'y': [0],
   'svg_path': ['M1.7 -1.7h-0.8c0.3 -0.2 0.6 -0.5 0.6 -0.9c0 -0.6 -0.4 -1 -1 -1c-0.6 0 -1 0.4 -1 1c0 0.4 0.2 0.7 0.6 0.9h-0.8c-0.4 0 -0.7 0.3 -0.7 0.6v1.9c0 0.3 0.3 0.6 0.6 0.6h0.2c0 0 0 0.1 0 0.1v1.9c0 0.3 0.2 0.6 0.3 0.6h1.3c0.2 0 0.3 -0.3 0.3 -0.6v-1.8c0 0 0 -0.1 0 -0.1h0.2c0.3 0 0.6 -0.3 0.6 -0.6v-2c0.2 -0.3 -0.1 -0.6 -0.4 -0.6z'],
})

alt.Chart(df).mark_point().encode(
  alt.X('x'),
  alt.Y('y'),
  alt.Shape('svg_path', scale=None)
)

enter image description here

user_29378310
Related