Online Altair Compiler

Run Altair code in your browser. Make bar, line and scatter charts and histograms from pandas data, with tooltips and selections.

Python
import altair as alt
from vega_datasets import data

cars = data.cars()
alt.Chart(cars).mark_point().encode(
    x='Horsepower',
    y='Miles_per_Gallon',
    color='Origin',
).interactive()

Altair, also called Vega-Altair, makes charts from a description. You give it a pandas DataFrame, pick a mark such as points, bars or lines, and map columns to channels such as x, y, color and tooltip. Altair turns that description into a Vega-Lite specification, a JSON document that the Vega-Lite JavaScript library draws in the browser. People use it to explore data in notebooks and to publish charts with tooltips and selections. This page is an online Altair compiler: the code runs in your browser, so you can try it without installing anything. Run the example first, then paste any snippet below into a new cell to try it.

What the example does

data.cars() from the vega_datasets package returns a DataFrame of 406 car models from 1970 to 1982, with columns such as Horsepower, Miles_per_Gallon and Origin. The file ships inside the package, so nothing is downloaded. alt.Chart(cars) starts a chart from the DataFrame, and mark_point() draws one point per row. encode() puts horsepower on the x axis and fuel economy on the y axis, and color='Origin' colors the points by region (USA, Europe or Japan) and adds a legend. .interactive() binds the x and y scales to the mouse, so you can zoom with the scroll wheel and pan by dragging. As the last expression in the cell, the chart is displayed.

Make a bar chart with tooltips

A column name can end with its type after a colon: Q for numbers, N for categories, O for ordered categories and T for dates. Altair infers the type from a pandas column, so the suffix only overrides it. sort="-y" orders the bars from largest to smallest, and tooltip lists the columns to show when the pointer is over a bar:

import altair as alt
import pandas as pd

df = pd.DataFrame({
    "fruit": ["Apples", "Pears", "Plums", "Grapes", "Cherries"],
    "sold": [28, 55, 43, 91, 81],
})
alt.Chart(df).mark_bar().encode(
    x=alt.X("fruit:N", sort="-y"),
    y="sold:Q",
    tooltip=["fruit", "sold"],
)

Count values with a histogram

Altair aggregates inside the chart. bin groups a numeric column into ranges, at most 30 here, and count() counts the rows in each. Other aggregates work the same way, such as "mean(price)" or "sum(sales)":

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

rng = np.random.default_rng(seed=0)
df = pd.DataFrame({"height": rng.normal(170, 10, 500)})

alt.Chart(df).mark_bar().encode(
    x=alt.X("height:Q", bin=alt.Bin(maxbins=30), title="Height (cm)"),
    y="count()",
)

Draw lines over time

A pandas datetime column is encoded as a date (T) without a suffix. color draws one line per series, and point=True marks each value:

import altair as alt
import pandas as pd

months = pd.date_range("2024-01-01", periods=12, freq="MS")
df = pd.DataFrame({
    "month": list(months) * 2,
    "visits": [120, 132, 101, 134, 190, 230, 210, 250, 220, 180, 160, 170,
               80, 95, 110, 105, 140, 160, 175, 190, 185, 150, 130, 140],
    "site": ["Blog"] * 12 + ["Shop"] * 12,
})
alt.Chart(df).mark_line(point=True).encode(x="month", y="visits", color="site")

Highlight points with a selection

alt.selection_interval() lets you drag a rectangle over the chart. alt.condition() then colors the points inside it by group and grays out the rest, and add_params() attaches the selection to the chart:

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

rng = np.random.default_rng(seed=1)
df = pd.DataFrame({
    "x": rng.normal(0, 1, 200),
    "y": rng.normal(0, 1, 200),
    "group": rng.choice(["A", "B", "C"], 200),
})
brush = alt.selection_interval()
alt.Chart(df).mark_point().encode(
    x="x", y="y",
    color=alt.condition(brush, "group:N", alt.value("lightgray")),
).add_params(brush)

Good to know

  • Altair copies the data into the chart specification and raises MaxRowsError for a DataFrame with more than 5,000 rows. Aggregate or sample the data first, or call alt.data_transformers.disable_max_rows() to embed every row.
  • chart.save("chart.html") writes a standalone page that loads the Vega libraries from a CDN. Saving as PNG or SVG needs the vl-convert-python package, which does not install in this browser version of Python. Files your code saves appear in the sidebar's Data tab.