Search code examples
pythonradio-buttonselectionaltair

How can i Move the radio Buttons to be under the Title with altair?


i'm trying to take the radio buttons to be under the Title and i tried to do it with HTML already it didn't worked for me as you can see in the Code. in order to understand better what i want

This is what i want

if you can remove Majore_Genre it will look better

the Code that i'm using:

brush = alt.selection_interval(
        resolve='global' # resolve all selections to a single global instance
    )

selection = alt.selection_single(
    name='Select',
    fields=['MPAA_Rating'],
    init={'MPAA_Rating': 'R'},
    bind={'MPAA_Rating': alt.binding_radio(options=mpaa)}
)

Chart=alt.Chart(movies).mark_circle().add_selection(
    brush,selection
).encode(
    
    alt.X('Rotten_Tomatoes_Rating', type='quantitative'),
    alt.Y('IMDB_Rating', type='quantitative'),
    color=alt.condition(brush, 'Cylinders:O', alt.value('grey'),legend=None),
    #opacity=alt.condition(brush, alt.value(0.8), alt.value(0.1)),
    opacity=alt.condition(selection |brush, alt.value(0.75), alt.value(0.05))
).properties(
    width=140,
    height=140,
    #title=None
).facet('Major_Genre:O',columns=7,title="Comparing IMDB & Rotten Tomatoes Ratings").configure_title(anchor='middle')  

from IPython.display import HTML
display(HTML("""
<style>
.vega-bind {
  text-align:Title;
}
</style>
"""))

display(Chart)

Solution

  • the HTML hat Problem, this works

    from IPython.display import display, HTML
    
    display(HTML("""
    <style>
    form.vega-bindings {
        position: absolute;
        left: 380px;
        top: 15px;
    }
    </style>
    """))