This document is adapted from the Other Charts section of the Altair Example Gallery.

Our first step is to set up our environment:

Bar Chart with Highlighted Segment

Altair Example

Data

glimpse(vega_data$wheat())
#> Rows: 52
#> Columns: 3
#> $ year  <dbl> 1565, 1570, 1575, 1580, 1585, 1590, 1595, 1600, 1605, 1610, 1615…
#> $ wheat <dbl> 41.0, 45.0, 42.0, 49.0, 41.5, 47.0, 64.0, 27.0, 33.0, 32.0, 33.0…
#> $ wages <dbl> 5.00, 5.05, 5.08, 5.12, 5.15, 5.25, 5.54, 5.61, 5.69, 5.78, 5.94…

Chart

source <- vega_data$wheat()
threshold <- tibble(threshold = 90)

bars <- 
  alt$Chart(source)$
  mark_bar()$
  encode(
    x = "year:O",
    y = "wheat:Q"
  )

highlight <- 
  alt$Chart(source)$
  mark_bar(color = "#e45755")$
  encode(
    x = "year:O",
    y = "baseline:Q",
    y2 = "wheat:Q"
  )$
  transform_filter("datum.wheat > 90")$
  transform_calculate("baseline", "90")

rule <-
  alt$Chart(threshold)$
  mark_rule()$
  encode(
    y = "threshold:Q"
  )

(bars + highlight + rule)$properties(width = 600)

Becker’s Barley Trellis Plot (wrapped facet)

Altair Example

Data

glimpse(vega_data$barley())
#> Rows: 120
#> Columns: 4
#> $ yield   <dbl> 27.00000, 48.86667, 27.43334, 39.93333, 32.96667, 28.96667, 43…
#> $ variety <chr> "Manchuria", "Manchuria", "Manchuria", "Manchuria", "Manchuria…
#> $ year    <dbl> 1931, 1931, 1931, 1931, 1931, 1931, 1931, 1931, 1931, 1931, 19…
#> $ site    <chr> "University Farm", "Waseca", "Morris", "Crookston", "Grand Rap…

Chart

chart <- 
  alt$Chart(vega_data$barley())$
  mark_point()$
  encode(
    x = alt$X("median(yield)", scale=alt$Scale(zero = FALSE)),
    y = "variety:O",
    color = "year:N",
    facet = alt$Facet("site:O", columns = 2)
  )$
  properties(width = 200, height = 100)

chart

Binned Movie Rating Heatmap

Altair Example

Data

glimpse(fromJSON(vega_data$movies$url))
#> Rows: 3,201
#> Columns: 16
#> $ Title                  <chr> "The Land Girls", "First Love, Last Rites", "I …
#> $ US_Gross               <int> 146083, 10876, 203134, 373615, 1009819, 24551, …
#> $ Worldwide_Gross        <dbl> 146083, 10876, 203134, 373615, 1087521, 2624551…
#> $ US_DVD_Sales           <int> NA, NA, NA, NA, NA, NA, NA, NA, NA, NA, NA, NA,…
#> $ Production_Budget      <int> 8000000, 300000, 250000, 300000, 1000000, 16000…
#> $ Release_Date           <chr> "Jun 12 1998", "Aug 07 1998", "Aug 28 1998", "S…
#> $ MPAA_Rating            <chr> "R", "R", NA, NA, "R", NA, "R", "R", "R", NA, N…
#> $ Running_Time_min       <int> NA, NA, NA, NA, NA, NA, NA, NA, NA, NA, NA, NA,…
#> $ Distributor            <chr> "Gramercy", "Strand", "Lionsgate", "Fine Line",…
#> $ Source                 <chr> NA, NA, NA, NA, "Original Screenplay", NA, NA, …
#> $ Major_Genre            <chr> NA, "Drama", "Comedy", "Comedy", "Drama", NA, N…
#> $ Creative_Type          <chr> NA, NA, NA, NA, "Contemporary Fiction", NA, NA,…
#> $ Director               <chr> NA, NA, NA, NA, NA, NA, "Christopher Nolan", NA…
#> $ Rotten_Tomatoes_Rating <int> NA, NA, NA, 13, 62, NA, NA, NA, 25, 86, 81, 84,…
#> $ IMDB_Rating            <dbl> 6.1, 6.9, 6.8, NA, 3.4, NA, 7.7, 3.8, 5.8, 7.0,…
#> $ IMDB_Votes             <int> 1071, 207, 865, NA, 165, NA, 15133, 353, 3275, …

Chart

chart <- 
  alt$Chart(vega_data$movies$url)$
  mark_rect()$
  encode(
    x = alt$X("IMDB_Rating:Q", bin = alt$Bin(maxbins = 60)),
    y = alt$Y("Rotten_Tomatoes_Rating:Q", bin = alt$Bin(maxbins = 40)),
    color = alt$Color(
      "count():Q", 
      scale = alt$Scale(scheme = "greenblue")
    )
  )

chart

Box Plot with Min/Max Whiskers

Altair example

This example shows how to make a basic box plot using US Population data from 2000.

glimpse(vega_data$population())
#> Rows: 570
#> Columns: 4
#> $ year   <dbl> 1850, 1850, 1850, 1850, 1850, 1850, 1850, 1850, 1850, 1850, 185…
#> $ age    <dbl> 0, 0, 5, 5, 10, 10, 15, 15, 20, 20, 25, 25, 30, 30, 35, 35, 40,…
#> $ sex    <dbl> 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, …
#> $ people <dbl> 1483789, 1450376, 1411067, 1359668, 1260099, 1216114, 1077133, …

Chart

chart <-
  alt$Chart(vega_data$population$url)$
  mark_boxplot(extent="min-max")$
  encode(
    x = "age:O",
    y = "people:Q"
  )

chart

Candlestick Chart

Altair example

A candlestick chart inspired from Protovis. This example shows the performance of the Chicago Board Options Exchange Volatility Index (VIX) in the summer of 2009. The thick bar represents the opening and closing prices, while the thin bar shows intraday high and low prices; if the index closed higher on a given day, the bars are colored green rather than red. #### Data

Definition
data <- 
  jsonlite::fromJSON('[
  {
    "date": "01-Jun-2009",
    "open": 28.7,
    "high": 30.05,
    "low": 28.45,
    "close": 30.04,
    "signal": "short",
    "ret": -4.89396411092985
  },
  {
    "date": "02-Jun-2009",
    "open": 30.04,
    "high": 30.13,
    "low": 28.3,
    "close": 29.63,
    "signal": "short",
    "ret": -0.322580645161295
  },
  {
    "date": "03-Jun-2009",
    "open": 29.62,
    "high": 31.79,
    "low": 29.62,
    "close": 31.02,
    "signal": "short",
    "ret": 3.68663594470045
  },
  {
    "date": "04-Jun-2009",
    "open": 31.02,
    "high": 31.02,
    "low": 29.92,
    "close": 30.18,
    "signal": "short",
    "ret": 4.51010886469673
  },
  {
    "date": "05-Jun-2009",
    "open": 29.39,
    "high": 30.81,
    "low": 28.85,
    "close": 29.62,
    "signal": "short",
    "ret": 6.08424336973478
  },
  {
    "date": "08-Jun-2009",
    "open": 30.84,
    "high": 31.82,
    "low": 26.41,
    "close": 29.77,
    "signal": "short",
    "ret": 1.2539184952978
  },
  {
    "date": "09-Jun-2009",
    "open": 29.77,
    "high": 29.77,
    "low": 27.79,
    "close": 28.27,
    "signal": "short",
    "ret": -5.02431118314424
  },
  {
    "date": "10-Jun-2009",
    "open": 26.9,
    "high": 29.74,
    "low": 26.9,
    "close": 28.46,
    "signal": "short",
    "ret": -5.46623794212217
  },
  {
    "date": "11-Jun-2009",
    "open": 27.36,
    "high": 28.11,
    "low": 26.81,
    "close": 28.11,
    "signal": "short",
    "ret": -8.3743842364532
  },
  {
    "date": "12-Jun-2009",
    "open": 28.08,
    "high": 28.5,
    "low": 27.73,
    "close": 28.15,
    "signal": "short",
    "ret": -5.52763819095477
  },
  {
    "date": "15-Jun-2009",
    "open": 29.7,
    "high": 31.09,
    "low": 29.64,
    "close": 30.81,
    "signal": "long",
    "ret": 3.4920634920635
  },
  {
    "date": "16-Jun-2009",
    "open": 30.81,
    "high": 32.75,
    "low": 30.07,
    "close": 32.68,
    "signal": "short",
    "ret": 0.155038759689914
  },
  {
    "date": "17-Jun-2009",
    "open": 31.19,
    "high": 32.77,
    "low": 30.64,
    "close": 31.54,
    "signal": "short",
    "ret": 5.82822085889571
  },
  {
    "date": "18-Jun-2009",
    "open": 31.54,
    "high": 31.54,
    "low": 29.6,
    "close": 30.03,
    "signal": "short",
    "ret": 8.17610062893082
  },
  {
    "date": "19-Jun-2009",
    "open": 29.16,
    "high": 29.32,
    "low": 27.56,
    "close": 27.99,
    "signal": "short",
    "ret": 8.59872611464968
  },
  {
    "date": "22-Jun-2009",
    "open": 30.4,
    "high": 32.05,
    "low": 30.3,
    "close": 31.17,
    "signal": "short",
    "ret": 15.4907975460123
  },
  {
    "date": "23-Jun-2009",
    "open": 31.3,
    "high": 31.54,
    "low": 27.83,
    "close": 30.58,
    "signal": "short",
    "ret": 11.7370892018779
  },
  {
    "date": "24-Jun-2009",
    "open": 30.58,
    "high": 30.58,
    "low": 28.79,
    "close": 29.05,
    "signal": "long",
    "ret": -10.4234527687296
  },
  {
    "date": "25-Jun-2009",
    "open": 29.45,
    "high": 29.56,
    "low": 26.3,
    "close": 26.36,
    "signal": "long",
    "ret": 0
  },
  {
    "date": "26-Jun-2009",
    "open": 27.09,
    "high": 27.22,
    "low": 25.76,
    "close": 25.93,
    "signal": "long",
    "ret": 0
  },
  {
    "date": "29-Jun-2009",
    "open": 25.93,
    "high": 27.18,
    "low": 25.29,
    "close": 25.35,
    "signal": "long",
    "ret": 5.26315789473684
  },
  {
    "date": "30-Jun-2009",
    "open": 25.36,
    "high": 27.38,
    "low": 25.02,
    "close": 26.35,
    "signal": "long",
    "ret": 6.73758865248228
  }
]')
glimpse(data)
#> Rows: 22
#> Columns: 7
#> $ date   <chr> "01-Jun-2009", "02-Jun-2009", "03-Jun-2009", "04-Jun-2009", "05…
#> $ open   <dbl> 28.70, 30.04, 29.62, 31.02, 29.39, 30.84, 29.77, 26.90, 27.36, …
#> $ high   <dbl> 30.05, 30.13, 31.79, 31.02, 30.81, 31.82, 29.77, 29.74, 28.11, …
#> $ low    <dbl> 28.45, 28.30, 29.62, 29.92, 28.85, 26.41, 27.79, 26.90, 26.81, …
#> $ close  <dbl> 30.04, 29.63, 31.02, 30.18, 29.62, 29.77, 28.27, 28.46, 28.11, …
#> $ signal <chr> "short", "short", "short", "short", "short", "short", "short", …
#> $ ret    <dbl> -4.8939641, -0.3225806, 3.6866359, 4.5101089, 6.0842434, 1.2539…

Chart

open_close_color <- 
  alt$condition(
    "datum.open < datum.close",
    alt$value("#06982d"),
    alt$value("#ae1325")
  )

rule <- 
  alt$Chart(data)$
  mark_rule()$
  encode(
    alt$X(
      "date:T",
      timeUnit = "yearmonthdate",
      scale = alt$Scale(
        domain = list(
          list(month= 5, date= 31, year= 2009),
          list(month= 7, date= 1, year= 2009)
        )
      ),
      axis = alt$Axis(format = "%m/%d", title = "Date in 2009")
    ),
    alt$Y(
      "low",
      scale = alt$Scale(zero = FALSE),
      axis = alt$Axis(title = "Price")
    ),
    alt$Y2("high"),
    color = open_close_color
  )

bar <- 
  alt$Chart(data)$
  mark_bar()$
  encode(
    alt$X("date:T", timeUnit = "yearmonthdate"),
    y = "open",
    y2 = "close",
    color = open_close_color
  )

chart <- (rule + bar)
chart

Error Bar with Standard Deviation

Altair Example

Data

glimpse(vega_data$barley())
#> Rows: 120
#> Columns: 4
#> $ yield   <dbl> 27.00000, 48.86667, 27.43334, 39.93333, 32.96667, 28.96667, 43…
#> $ variety <chr> "Manchuria", "Manchuria", "Manchuria", "Manchuria", "Manchuria…
#> $ year    <dbl> 1931, 1931, 1931, 1931, 1931, 1931, 1931, 1931, 1931, 1931, 19…
#> $ site    <chr> "University Farm", "Waseca", "Morris", "Crookston", "Grand Rap…

Chart

source <- vega_data$barley()

error_bars <-
  alt$Chart(source)$
  mark_errorbar(extent = "stdev")$
  encode( 
    x = alt$X("yield:Q", scale = alt$Scale(zero = FALSE)),
    y = alt$Y("variety:N")
  )

points <-
  alt$Chart(source)$
  mark_point(filled = TRUE, color = "black")$
  encode(
    x = alt$X("yield:Q", aggregate = "mean"),
    y = alt$Y("variety:N")
  )

error_bars + points

Error Bars showing Confidence Interval

Altair Example

This example shows how to show error bars using confidence intervals. The confidence intervals are computed internally in vega by a non-parametric bootstrap of the mean.

Data

glimpse(vega_data$barley())
#> Rows: 120
#> Columns: 4
#> $ yield   <dbl> 27.00000, 48.86667, 27.43334, 39.93333, 32.96667, 28.96667, 43…
#> $ variety <chr> "Manchuria", "Manchuria", "Manchuria", "Manchuria", "Manchuria…
#> $ year    <dbl> 1931, 1931, 1931, 1931, 1931, 1931, 1931, 1931, 1931, 1931, 19…
#> $ site    <chr> "University Farm", "Waseca", "Morris", "Crookston", "Grand Rap…

Chart

source <- vega_data$barley()

error_bars <-
  alt$Chart(source)$
  mark_errorbar(extent = "ci")$
  encode(
    x = alt$X("yield:Q", scale = alt$Scale(zero = FALSE)),
    y = alt$Y("variety:N")
  )

points <-
  alt$Chart(source)$
  mark_point(filled = TRUE, color = "black")$
  encode(
    x = alt$X("yield:Q", aggregate = "mean"),
    y = alt$Y("variety:N")
  )

error_bars + points

Facetted Scatterplot with marginal histograms

Altair Example

Removing this example in anticipation of a new example using a suitable dataset.

Gantt Chart

Altair example

Data

Definition
data <- 
  fromJSON('[
    {"task": "A", "start": 1, "end": 3},
    {"task": "B", "start": 3, "end": 8},
    {"task": "C", "start": 8, "end": 10}
  ]')
glimpse(data)
#> Rows: 3
#> Columns: 3
#> $ task  <chr> "A", "B", "C"
#> $ start <int> 1, 3, 8
#> $ end   <int> 3, 8, 10

Chart

chart <- 
  alt$Chart(data)$
  mark_bar()$
  encode(
    x = "start",
    x2 = "end",
    y = "task"
  )

chart

Isotype Grid

Altair Example

Data

Definition
data <- tibble(id = 1:100)
person = c("M1.7 -1.7h-0.8c0.3 -0.2 0.6 -0.5 0.6 -0.9c0 -0.6 -0.4 -1 -1 -1c-0.6 0 -1 0.4 -1 1c0 0.4 0.2 0.7 0.6 0.9h-0.8c-0.4 0 -0.7 0.3 -0.7 0.6v1.9c0 0.3 0.3 0.6 0.6 0.6h0.2c0 0 0 0.1 0 0.1v1.9c0 0.3 0.2 0.6 0.3 0.6h1.3c0.2 0 0.3 -0.3 0.3 -0.6v-1.8c0 0 0 -0.1 0 -0.1h0.2c0.3 0 0.6 -0.3 0.6 -0.6v-2c0.2 -0.3 -0.1 -0.6 -0.4 -0.6z")
glimpse(data)
#> Rows: 100
#> Columns: 1
#> $ id <int> 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, …

Chart

chart <-
  alt$Chart(data)$
  transform_calculate(row = "ceil(datum.id/10)")$
  transform_calculate(col = "datum.id - datum.row*10")$
  mark_point(filled = TRUE, size = 50)$
  encode(
    x = alt$X("col:O", axis = NULL),
    y = alt$Y("row:O", axis = NULL),
    shape = alt$ShapeValue(person)
  )$
  properties(width = 400, height = 400)$
  configure_view(strokeWidth = 0)

chart

Multiple Marks

Altair Example

Data

glimpse(vega_data$stocks())
#> Rows: 560
#> Columns: 3
#> $ symbol <chr> "MSFT", "MSFT", "MSFT", "MSFT", "MSFT", "MSFT", "MSFT", "MSFT",…
#> $ date   <dttm> 2000-01-01, 2000-02-01, 2000-03-01, 2000-04-01, 2000-05-01, 20…
#> $ price  <dbl> 39.81, 36.35, 43.22, 28.37, 25.45, 32.54, 28.40, 28.40, 24.53, …

Chart

stocks <- vega_data$stocks()

chart <- 
  alt$Chart(stocks)$
  mark_line(point = TRUE)$
  encode(
    x = "date:T",
    y = "price:Q",
    color = "symbol:N"
  )

chart

Normalized Parallel Coordinates Example

Altair Example

A Parallel Coordinates chart is a chart that lets you visualize the individual data points by drawing a single line for each of them.

Such a chart can be created in Altair by first transforming the data into a suitable representation.

This example shows a modified parallel coordinates chart …, where the y-axis shows the value after min-max rather than the raw value. It’s a simplified Altair version of the VegaLite version.

Data

glimpse(vega_data$cars())
#> Rows: 406
#> Columns: 9
#> $ Name             <chr> "chevrolet chevelle malibu", "buick skylark 320", "pl…
#> $ Miles_per_Gallon <dbl> 18, 15, 18, 16, 17, 15, 14, 14, 14, 15, NaN, NaN, NaN…
#> $ Cylinders        <dbl> 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 4, 8, 8, 8, 8, 8, 8, 8,…
#> $ Displacement     <dbl> 307, 350, 318, 304, 302, 429, 454, 440, 455, 390, 133…
#> $ Horsepower       <dbl> 130, 165, 150, 150, 140, 198, 220, 215, 225, 190, 115…
#> $ Weight_in_lbs    <dbl> 3504, 3693, 3436, 3433, 3449, 4341, 4354, 4312, 4425,…
#> $ Acceleration     <dbl> 12.0, 11.5, 11.0, 12.0, 10.5, 10.0, 9.0, 8.5, 10.0, 8…
#> $ Year             <dttm> 1970-01-01, 1970-01-01, 1970-01-01, 1970-01-01, 1970…
#> $ Origin           <chr> "USA", "USA", "USA", "USA", "USA", "USA", "USA", "USA…

Chart

source <- vega_data$cars()

source <- source[complete.cases(source), ]

chart <-
  alt$Chart(source)$
  transform_window(index="count()")$
  transform_fold(
    list("Acceleration", "Displacement", "Horsepower", "Weight_in_lbs")
  )$
  transform_joinaggregate(
    groupby = list("key"),
    min = "min(value)",
    max = "max(value)"
  )$
  transform_calculate(
    minmax_value = "(datum.value - datum.min) / (datum.max - datum.min)",
    mid = "(datum.min + datum.max) / 2"
  )$
  mark_line()$
  encode(
    x = "key:N",
    y = "minmax_value:Q",
    color = "Cylinders:N",
    detail = "index:N",
    opacity = alt$value(0.3)
  )$
  properties(width = 500)

chart

Parallel Coordinates Example

Altair Example

A Parallel Coordinates chart is a chart that lets you visualize the individual data points by drawing a single line for each of them. Such a chart can be created in Altair by first transforming the data into a suitable representation.

Removing this example in anticipation of a new example using a suitable dataset.

Ranged Dot Plot

Altair Example

This example shows a ranged dot plot that uses layer to convey changing life expectancy for the five most populous countries (between 1955 and 2000).

Data

Cannot get the Vega-Lite data-layer to work.

Definition
data <- fromJSON(vega_data$countries$url)
data <- 
  data %>%
  select(-`_comment`) %>%
  filter(
    country %in% c("China", "India", "United States", "Indonesia", "Brazil"),
    year %in% c(1955, 2000)
  ) 
glimpse(data)
#> Rows: 10
#> Columns: 8
#> $ year          <int> 1955, 2000, 1955, 2000, 1955, 2000, 1955, 2000, 1955, 20…
#> $ fertility     <dbl> 6.1501, 2.3450, 5.5900, 1.7000, 5.8961, 3.1132, 5.6720, …
#> $ life_expect   <dbl> 53.28500, 71.00600, 50.54896, 72.02800, 40.24900, 62.879…
#> $ n_fertility   <dbl> 6.1501, NA, 5.7200, NA, 5.8216, NA, 5.6200, NA, 3.3140, …
#> $ n_life_expect <dbl> 55.66500, NA, 44.50136, NA, 43.60500, NA, 42.51800, NA, …
#> $ country       <chr> "Brazil", "Brazil", "China", "China", "India", "India", …
#> $ p_fertility   <dbl> NA, 2.4500, NA, 1.7810, NA, 3.4551, NA, 2.5500, NA, 1.99…
#> $ p_life_expect <dbl> NA, 69.388, NA, 70.426, NA, 61.765, NA, 66.041, NA, 76.8…

Chart

# Line between life expectancy in 1955 & 2000
chart_line <-
  alt$Chart(data)$
  mark_line(color = "#db646f")$
  encode(
    x = "life_expect:Q",
    y = "country:N",
    detail = "country:N"
  )

# Points for life expectancy in 1955 & 2000
chart_point <- 
  alt$Chart(data)$
  mark_point(size = 100, opacity = 1, filled = TRUE)$
  encode(
    x = "life_expect:Q",
    y = "country:N",
    color = alt$Color(
      "year:O",
      scale = alt$Scale(
        domain = list("1955", "2000"), 
        range = list("#e6959c", "#911a24")
      )
    )
  )$interactive()

# Compose charts, add data and transformations
chart <- 
  (chart_line + chart_point)$
  transform_filter(
    filter = list(
      field = "country",
      oneOf = list("China", "India", "United States", "Indonesia", "Brazil")
    )
  )$
  transform_filter(
    filter = list(field = "year", oneOf = list(1955, 2000))
  )

chart

Ridgeline plot Example

Altair Example

A Ridgeline plot chart is a chart that lets you visualize distribution of a numeric value for several groups.

Such a chart can be created in Altair by first transforming the data into a suitable representation.

Data

glimpse(vega_data$seattle_weather())
#> Rows: 1,461
#> Columns: 6
#> $ date          <dttm> 2012-01-01, 2012-01-02, 2012-01-03, 2012-01-04, 2012-01…
#> $ precipitation <dbl> 0.0, 10.9, 0.8, 20.3, 1.3, 2.5, 0.0, 0.0, 4.3, 1.0, 0.0,…
#> $ temp_max      <dbl> 12.8, 10.6, 11.7, 12.2, 8.9, 4.4, 7.2, 10.0, 9.4, 6.1, 6…
#> $ temp_min      <dbl> 5.0, 2.8, 7.2, 5.6, 2.8, 2.2, 2.8, 2.8, 5.0, 0.6, -1.1, …
#> $ wind          <dbl> 4.7, 4.5, 2.3, 4.7, 6.1, 2.2, 2.3, 2.0, 3.4, 3.4, 5.1, 1…
#> $ weather       <chr> "drizzle", "rain", "rain", "rain", "rain", "rain", "rain…

Chart

source <- vega_data$seattle_weather()

step <- 20
overlap <- 1

chart <-alt$Chart(source)$
  transform_timeunit(Month = "month(date)")$
  transform_joinaggregate(
    mean_temp = "mean(temp_max)", 
    groupby = list("Month")
  )$
  transform_bin(list("bin_max", "bin_min"), "temp_max")$
  transform_aggregate(
    value = "count()", 
    groupby = list("Month", "mean_temp", "bin_min", "bin_max")
  )$
  transform_impute(
    impute = "value", 
    groupby = list("Month", "mean_temp"), 
    key = "bin_min", 
    value = 0
  )$
  mark_area(
    interpolate = "monotone",
    fillOpacity = 0.8,
    stroke = "lightgray",
    strokeWidth = 0.5
  )$encode(
    alt$X("bin_min:Q", bin = "binned", title = "Maximum Daily Temperature (C)"),
    alt$Y(
      "value:Q",
      scale = alt$Scale(range = list(step, -step * overlap)),
      axis = NULL
    ),
    alt$Fill(
      "mean_temp:Q",
      legend = NULL,
      scale = alt$Scale(domain = list(30, 5), scheme = "redyellowblue")
    ),
    alt$Row(
      "Month:T",
      title = NULL,
      header = alt$Header(labelAngle = 0, labelAlign = "right", format = "%B")
    )
  )$
  properties(bounds ="flush", title = "Seattle Weather", height = step)$
  configure_facet(spacing = 0)$
  configure_view(stroke = NULL)$
  configure_title(anchor = "end")

chart

Sorted Error Bars showing Confidence Interval

Altair Example

This example shows how to show error bars using confidence intervals, while also sorting the y-axis based on x-axis values.

Data

glimpse(vega_data$barley())
#> Rows: 120
#> Columns: 4
#> $ yield   <dbl> 27.00000, 48.86667, 27.43334, 39.93333, 32.96667, 28.96667, 43…
#> $ variety <chr> "Manchuria", "Manchuria", "Manchuria", "Manchuria", "Manchuria…
#> $ year    <dbl> 1931, 1931, 1931, 1931, 1931, 1931, 1931, 1931, 1931, 1931, 19…
#> $ site    <chr> "University Farm", "Waseca", "Morris", "Crookston", "Grand Rap…

Chart

source <- vega_data$barley()

points <-
  alt$Chart(source)$
  mark_point(filled = TRUE, color = "black")$
  encode(
    x=alt$X("mean(yield):Q", title="Barley Yield"),
    y=alt$Y( 
      "variety",
      sort = alt$EncodingSortField(
        field = "yield",
        op = "mean",
        order = "descending"
      )
    )
  )$properties(width = 400, height = 250)

error_bars <-
  points$
  mark_rule()$
  encode(
    x = "ci0(yield)",
    x2 = "ci1(yield)"
  )

points + error_bars

Steam and Leaf Plot

Altair Example

Data

Definition
data <- 
  tibble(
    sample = rnorm(100, 50, 15) %>% round() %>% as.integer(),
    stem = (sample / 10L) %>% as.integer(),
    leaf = sample %% 10L
  ) %>%
  arrange(sample) %>%
  group_by(stem) %>%
  mutate(position = seq_along(leaf)) %>%
  ungroup()
glimpse(data)
#> Rows: 100
#> Columns: 4
#> $ sample   <int> 19, 21, 24, 27, 28, 30, 30, 31, 32, 32, 33, 33, 33, 33, 34, 3…
#> $ stem     <int> 1, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3…
#> $ leaf     <int> 9, 1, 4, 7, 8, 0, 0, 1, 2, 2, 3, 3, 3, 3, 4, 4, 5, 5, 5, 5, 6…
#> $ position <int> 1, 1, 2, 3, 4, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,…

Chart

chart <- 
  alt$Chart(data)$
  mark_text(align = "left", baseline = "middle", dx = -5)$
  encode(
    x = alt$X(
      "position:Q",
      axis = alt$Axis(title="", ticks = FALSE, labels = FALSE, grid = FALSE)
    ),
    y = alt$Y("stem:N", axis = alt$Axis(title = "", tickSize = 0)),
    text = "leaf:N"
  )$
  configure_axis(labelFontSize = 20)$
  configure_text(fontSize = 20)

chart

Text over a Heatmap

Altair Example

An example of a layered chart of text over a heatmap using the cars dataset.

Data

glimpse(vega_data$cars())
#> Rows: 406
#> Columns: 9
#> $ Name             <chr> "chevrolet chevelle malibu", "buick skylark 320", "pl…
#> $ Miles_per_Gallon <dbl> 18, 15, 18, 16, 17, 15, 14, 14, 14, 15, NaN, NaN, NaN…
#> $ Cylinders        <dbl> 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 4, 8, 8, 8, 8, 8, 8, 8,…
#> $ Displacement     <dbl> 307, 350, 318, 304, 302, 429, 454, 440, 455, 390, 133…
#> $ Horsepower       <dbl> 130, 165, 150, 150, 140, 198, 220, 215, 225, 190, 115…
#> $ Weight_in_lbs    <dbl> 3504, 3693, 3436, 3433, 3449, 4341, 4354, 4312, 4425,…
#> $ Acceleration     <dbl> 12.0, 11.5, 11.0, 12.0, 10.5, 10.0, 9.0, 8.5, 10.0, 8…
#> $ Year             <dttm> 1970-01-01, 1970-01-01, 1970-01-01, 1970-01-01, 1970…
#> $ Origin           <chr> "USA", "USA", "USA", "USA", "USA", "USA", "USA", "USA…

Chart

source <- vega_data$cars()

# Configure common options
base <-
  alt$Chart(source)$
  transform_aggregate(
    num_cars = "count()",
    groupby = list("Origin", "Cylinders")
  )$encode(
    alt$X("Cylinders:O", scale = alt$Scale(paddingInner = 0)),
    alt$Y("Origin:O", scale = alt$Scale(paddingInner = 0))
  )

# Configure heatmap
heatmap <- base$
  mark_rect()$
  encode(
    color=alt$Color(
      "num_cars:Q",
      scale = alt$Scale(scheme = "viridis"),
      legend = alt$Legend(direction = "horizontal")
    )
  )

# Configure text
text <- base$
  mark_text(baseline = "middle")$
  encode(
    text = "num_cars:Q",
    color = alt$condition(
      "datum.num_cars > 100",
      alt$value("black"),
      alt$value("white")
    )
  )

# Draw the chart
heatmap + text

Violinplot

Altair Example

This example shows how to make a kind of a Violinplot.

Data

glimpse(vega_data$cars())
#> Rows: 406
#> Columns: 9
#> $ Name             <chr> "chevrolet chevelle malibu", "buick skylark 320", "pl…
#> $ Miles_per_Gallon <dbl> 18, 15, 18, 16, 17, 15, 14, 14, 14, 15, NaN, NaN, NaN…
#> $ Cylinders        <dbl> 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 4, 8, 8, 8, 8, 8, 8, 8,…
#> $ Displacement     <dbl> 307, 350, 318, 304, 302, 429, 454, 440, 455, 390, 133…
#> $ Horsepower       <dbl> 130, 165, 150, 150, 140, 198, 220, 215, 225, 190, 115…
#> $ Weight_in_lbs    <dbl> 3504, 3693, 3436, 3433, 3449, 4341, 4354, 4312, 4425,…
#> $ Acceleration     <dbl> 12.0, 11.5, 11.0, 12.0, 10.5, 10.0, 9.0, 8.5, 10.0, 8…
#> $ Year             <dttm> 1970-01-01, 1970-01-01, 1970-01-01, 1970-01-01, 1970…
#> $ Origin           <chr> "USA", "USA", "USA", "USA", "USA", "USA", "USA", "USA…

Chart

source <- vega_data$cars()

chart <-
  alt$Chart(source)$
  transform_filter("datum.Miles_per_Gallon > 0")$
  transform_bin(
    list("bin_max", "bin_min"), 
    field = "Miles_per_Gallon", 
    bin = alt$Bin(maxbins = 20)
  )$
  transform_calculate(binned = "(datum.bin_max + datum.bin_min) / 2")$
  transform_aggregate(
    value_count = "count()", 
    groupby = list("Origin", "binned")
  )$
  transform_impute(
    impute = "value_count",
    groupby = list("Origin"), 
    key = "binned", 
    value = 0
  )$
  mark_area(interpolate = "monotone", orient = "horizontal")$
  encode(
    x = alt$X(
      "value_count:Q",
      title = NULL,
      stack = "center",
      axis = alt$Axis(
        labels = FALSE, 
        values = list(0), 
        grid = FALSE, 
        ticks = TRUE
      )
    ),
    y = alt$Y("binned:Q", bin = "binned", title = "Miles per Gallon"),
    color = alt$Color("Origin:N", legend = NULL),
    column = alt$Column(
      "Origin:N",
      header = alt$Header(
        titleOrient = "bottom",
        labelOrient = "bottom",
        labelPadding = 0
      )
    )
  )$
  properties(width = 80)$
  configure_facet(spacing = 0)$
  configure_view(stroke = NULL)

chart