Altair: line chart with different point marker?

[python152]

How can I give different lines a different type of point marker, say a cross (+) symbol? For example, the following chart with point=True will have data points as solid circle, but it won't work well when print black & white.

import altair as alt
from vega_datasets import data

source = data.stocks()

alt.Chart(source).mark_line(point=True).encode(
    x='date',
    y='price',
    color='symbol'
)

[Alcampopiano]

Hi there,

Perhaps you could add the shape encoding.

alt.Chart(source).mark_line().encode(
    x='date',
    y='price',
    color='symbol',
    shape=alt.Shape('symbol', scale=alt.Scale(range=['cross', 'circle', 'square', 'triangle-right', 'diamond']))
)

[python152]

It is exactly what I am hoping for. thanks.
The default symbol size does seem small, alt.Shape doesn't seem to have any option to set it though, is there anyway to change it?

[Alcampopiano]

Hi there,

Just as you can specify a shape encoding, you can also specify a size encoding. You can find the Altair encoding options here in the docs.

One way to have more control over the shapes, apart from the lines, is to use layers (docs here):

import altair as alt
from vega_datasets import data

source = data.stocks()

c=alt.Chart(source).encode(
    x='date',
    y='price',
    color='symbol'
)

l=c.mark_line()

p=c.mark_point(filled=True).encode(
    shape=alt.Shape('symbol', scale=alt.Scale(range=['cross', 'circle', 'square', 'triangle-right', 'diamond'])),
    size=alt.Size('symbol', scale=alt.Scale(range=[100,500],domain=['AAPL', 'AMZN', 'GOOG', 'IBM', 'MSFT']))
)

l+p

[cmartin-cay]

Hi there,

Perhaps you could add the shape encoding.

alt.Chart(source).mark_line().encode(
    x='date',
    y='price',
    color='symbol',
    shape=alt.Shape('symbol', scale=alt.Scale(range=['cross', 'circle', 'square', 'triangle-right', 'diamond']))
)

Is there a way to combine the two legends to include both the color and the shape in a single legend?

[jakevdp]

For point charts, this kind of legend combination is done automatically:

import altair as alt
from vega_datasets import data

source = data.stocks()

alt.Chart(source).mark_point(filled=True).encode(
    x='date',
    y='price',
    color='symbol',
    shape='symbol'
)

The reason this doesn't happen for the line chart is because the color legend refers to the line itself.

[cmartin-cay]

Thanks Jake. I saw that for the point chart and thought I was mostly finished with a little excel chart replacement project. But, people will want the legend to look like the above, but also have the lines.

I'll have to see what else I can find.

[Alcampopiano]

@cmartin-cay

You might consider layering the points on top of the line chart.

[jakevdp]

I'll have to see what else I can find.

OK, best of luck. Sorry Altair didn't work for you.

[cmartin-cay]

Doing that brings me back to the initial situation where I have two separate legends. One with colors and one with shapes.

Maybe I can convince people that it's better this way :)

[jakevdp]

You can get the result you want by carefully defining legends and scale resolution:

import altair as alt
from vega_datasets import data

source = data.stocks()

line = alt.Chart(source).mark_line().encode(
    x='date',
    y='price',
    color=alt.Color('symbol', legend=None)
)

points = line.mark_point(filled=True).encode(
    color='symbol',
    shape='symbol'
)

alt.layer(
    line,
    points
).resolve_scale(
    color='independent',
    shape='independent'
)

[Alcampopiano]

I knew there was a way!

[cmartin-cay]

All I can say is thank you very much.

[TomBugnon]

Is there any way to set the size of the points on a mark_line chart with the 'shape' encoding without overlaying a mark_line and a mark_point chart?

[JanetMatsen]

Where can I find a menu of available shapes? (And thanks for the great thread!)

[Alcampopiano]

Where can I find a menu of available shapes? (And thanks for the great thread!)

Hi Janet. This link to the Vega-Lite docs on the "point" mark may help.

[jakevdp]

In Altair's docs, it's under shape here: https://altair-viz.github.io/user_guide/marks.html#mark-properties