Responsive graphics in Altair

By default, Altair graphics are given a specific height and width. But you probably don't want that! You usually want a visualization to change sizes as the page gets smaller.

When creating your graphic in Altair, you'll need to set the width to be container. It might look like this:

alt.Chart(df).mark_circle().encode(
    x='gdp_per_capita',
    y='life_expectancy'
).properties(width='container')

Then when you embed your code into a web page, you'll want to tell the container it is in to expand as wide as possible using CSS:

<style>
.vega-container {
    width: 100%;
}
</style>