altair-viz / altair_saver

Altair extension for saving charts in a variety of formats.
BSD 3-Clause "New" or "Revised" License
94 stars 32 forks source link

SVG export and custom mark_point() shapes #91

Closed ewhalen12 closed 3 years ago

ewhalen12 commented 3 years ago

I'm experiencing two issues which I believe are related to how altair_saver exports SVG strings:

  1. When I export the SVG string of a mark_circle chart and directly copy/paste the mark-symbol path into a mark_point chart with custom pointer shape, the resulting figure appears different from the original

  2. When I export the SVG of the second chart, the mark-symbol path contains many NaNs and appears to have a different structure than the input path

A simple example:

import numpy as np
import pandas as pd
import altair as alt
import altair_saver

# create a simple scatter plot with a single circulat point at the origin
df = pd.DataFrame({'x':[0], 'y':[0]}, index=[0])
circleChart = alt.Chart(df, background='none').mark_circle().encode(
    x=alt.X('x', axis=None),
    y=alt.Y('y', axis=None)
).configure_view(strokeOpacity=0)

display(circleChart)

# export to SVG string
altair_saver.save(circleChart, fmt='svg')

Result: image

`

' ` Take the exact SVG from the mark-symbol and use it to define a custom marker: ``` python # the exact mark-symbol SVG path produced by the first example customSymbolSvg = '' # create a new scatter plot with point shape defined by SVG string customSymbolChart = alt.Chart(df, background='none').mark_point( shape=customSymbolSvg, fill='#4c78a8', stroke=None ).encode( x=alt.X('x', axis=None), y=alt.Y('y', axis=None) ).configure_view(strokeOpacity=0) display(customSymbolChart) # export to SVG string altair_saver.save(customSymbolChart, fmt='svg') ``` Result: ![image](https://user-images.githubusercontent.com/8379337/106291368-89c49b80-6219-11eb-9c98-c26a6726bc86.png) `''` The second plot appears different from the first and the exported SVG of the second contains many NaNs Ubuntu 16.04.6 python 3.7.7 altair 4.1.0 altair-data-server 0.4.1 altair-saver 0.5.0 altair-viewer 0.3.0 selenium 3.141.0
ewhalen12 commented 3 years ago

I'm sorry, this was user error. Changing the string to include only the values following "d=" (as below) resolved both issues

customSymbolSvg = "M2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,-2.7386127875258306,0A2.7386127875258306,2.7386127875258306,0,1,1,2.7386127875258306,0"