Interactive Charts

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

Our first step is to set up our environment:

library("altair")
library("tibble")
library("dplyr")
library("tidyr")
library("jsonlite")

vega_data <- import_vega_data()

Interactive Average

Altair example

The plot below uses an interval selection, which causes the chart to include an interactive brush (shown in grey). The brush selection parameterizes the red guideline, which visualizes the average value within the selected interval.

Data

weather <- vega_data$seattle_weather()

glimpse(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

brush <- alt$selection(type = "interval", encodings = list("x"))

bars <- 
  alt$Chart()$
  mark_bar()$
  encode(
    x = alt$X("date:O", timeUnit="month"),
    y = "mean(precipitation):Q",
    opacity = alt$condition(
      brush, 
      alt$OpacityValue(1), 
      alt$OpacityValue(0.7)
    )
  )$
  properties(selection = brush)

line <- 
  alt$Chart()$
  mark_rule(color = "firebrick")$
  encode(
    y = "mean(precipitation):Q",
    size = alt$SizeValue(3)
  )$
  transform_filter(brush$ref())

chart <- alt$layer(bars, line, data = weather)

chart

Interactive Chart with Cross-Highlight

Altair example

This example shows an interactive chart where selections in one portion of the chart affect what is shown in other panels. Click on the bar chart to see a detail of the distribution in the upper panel.

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

pts <- alt$selection(type = "single", encodings = list("x"))

rect <- 
  alt$Chart(vega_data$movies$url)$
  mark_rect()$
  encode(
    x = alt$X("IMDB_Rating:Q", bin = TRUE),
    y = alt$Y("Rotten_Tomatoes_Rating:Q", bin=TRUE),
    color = alt$Color(
      "count()",
      scale = alt$Scale(scheme = "greenblue"),
      legend = alt$Legend(title = "Total Records")
    )
  )

circ <- 
  rect$
  mark_point()$
  encode(
    color = alt$ColorValue("grey"),
    size = alt$Size(
      "count()",
      legend = alt$Legend(title = "Records in Selection")
    )
  )$
  transform_filter(pts$ref())

bar <- 
  alt$Chart(vega_data$movies$url)$
  mark_bar()$
  encode(
    x = "Major_Genre:N",
    y = "count()",
    color = alt$condition(
      pts, 
      alt$ColorValue("steelblue"), 
      alt$ColorValue("grey"))
  )$
  properties(
    selection = pts,
    width = 550, 
    height = 200
  )

chart <- 
  ((rect + circ) & bar)$ 
  resolve_legend(color = "independent", size = "independent")

chart

Interactive Crossfilter

Altair example

This example shows a multi-panel view of the same data, where you can interactively select a portion of the data in any of the panels to highlight that portion in any of the other panels.

Note: alt$repeat() must be translated to alt$\x60repeat\x60().

Data

glimpse(fromJSON(vega_data$flights_2k$url))

## Rows: 2,000
## Columns: 5
## $ date        <chr> "2001/01/14 21:55", "2001/03/26 20:15", "2001/03/05 14:55"…
## $ delay       <int> 0, -11, -3, 12, 2, 47, 3, -4, 4, 0, 18, -7, -10, 23, 7, -1…
## $ distance    <int> 480, 507, 714, 342, 373, 189, 872, 723, 318, 487, 239, 453…
## $ origin      <chr> "SAN", "PHX", "ELP", "SJC", "SMF", "DAL", "AUS", "GEG", "F…
## $ destination <chr> "SMF", "SLC", "LAX", "SNA", "LAX", "AUS", "PHX", "OAK", "J…

Chart

brush <- alt$selection_interval(encodings = list("x"))

# Define the base chart, with the common parts of the
# background and highlights
base <- 
  alt$Chart(vega_data$flights_2k$url)$
  mark_bar()$
  encode(
    x = alt$X(
      alt$`repeat`("column"), 
      type = "quantitative", 
      bin = alt$Bin(maxbins=20)
    ),
    y = "count()"
  )$
  properties(width = 160, height = 130)

# blue background with selection
background <- base$properties(selection = brush)

# yellow highlights on the transformed data
highlight <- 
  base$
  encode(
    color = alt$value("goldenrod")
  )$
  transform_filter(brush$ref())

# layer the two charts & repeat
chart <- 
  (background + highlight)$ 
  transform_calculate("time", "hours(datum.date)")$
  `repeat`(column = list("distance", "delay", "time"))

chart

Interactive Rectangular Brush

Altair example

This example shows how to add a simple rectangular brush to a scatter plot. By clicking and dragging on the plot, you can highlight points within the range.

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

brush <- alt$selection(type = "interval")

chart <- 
  alt$Chart(vega_data$cars())$
  mark_point()$
  encode(
    x = "Horsepower:Q",
    y = "Miles_per_Gallon:Q",
    color = alt$condition(brush, "Cylinders:O", alt$value("grey"))
  )$
  properties(selection = brush)

chart

Interactive Scatter Plot and Linked Layered Histogram

Altair example

This example shows how to link a scatter plot and a histogram together such that clicking on a point in the scatter plot will isolate the distribution corresponding to that point, and vice versa.

Data

Definition

source <- tibble(
  gender = c(rep("M", 1000), rep("F", 1000)),
  height = c(rnorm(1000, 69, 7), rnorm(1000, 64, 6)),
  weight = c(rnorm(1000, 195.8, 144), rnorm(1000, 167, 100)),
  age = c(rnorm(1000, 45, 8), rnorm(1000, 51, 6))
)

glimpse(source)

## Rows: 2,000
## Columns: 4
## $ gender <chr> "M", "M", "M", "M", "M", "M", "M", "M", "M", "M", "M", "M", "M"…
## $ height <dbl> 67.32169, 76.02880, 70.84474, 74.81332, 63.78757, 79.18516, 65.…
## $ weight <dbl> 40.73732, -117.29040, -136.48887, 75.42213, 328.06836, 248.9139…
## $ age    <dbl> 50.12464, 62.52822, 37.64530, 46.06724, 63.17965, 39.90173, 46.…

Chart

selector <- alt$selection_single(empty = "all", fields = list("gender"))

color_scale <- 
  alt$Scale(
    domain = list("M", "F"),
    range = list('#1FC3AA', '#8624F5')
  )

base <- 
  alt$Chart(source)$
  properties(width = 250, height = 250)$
  add_selection(selector)

points <-
  base$mark_point(filled=TRUE, size=200)$
  encode(
    x = alt$X(
      "mean(height):Q",
      scale = alt$Scale(domain = list(0, 84))
    ),
    y = alt$Y(
      "mean(weight):Q",
      scale = alt$Scale(domain=list(0,250))),
      color = alt$condition(
        selector,
        "gender:N",
        alt$value("lightgray"),
        scale = color_scale
    )
  )$
  interactive()

hists <-
  base$
  mark_bar(opacity = 0.5, thickness = 100)$
  encode(
    x = alt$X(
      "age",
      bin = alt$Bin(step = 5), # step keeps bin size the same
      scale = alt$Scale(domain = list(0, 100))
    ),
    y = alt$Y(
      "count()",
      stack = NULL,
      scale = alt$Scale(domain = list(0, 350))
    ),
    color = alt$Color("gender:N", scale = color_scale)
  )$
  transform_filter(selector)

points | hists

Multi-Line Highlight

Altair example

This multi-line chart uses an invisible Voronoi tessellation to handle mouseover to identify the nearest point and then highlight the line on which the point falls. It is adapted from the Vega-Lite 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

highlight <- 
  alt$selection_single(
    on = "mouseover",
    fields = list("symbol"), 
    nearest = TRUE
  )

base <- 
  alt$Chart(vega_data$stocks())$
  encode(
    x = "date:T",
    y = "price:Q",
    color = "symbol:N"
  )

points <- 
  base$mark_circle()$
  encode(
    opacity = alt$value(0)
  )$
  properties(selection = highlight, width = 600)

lines <- 
  base$
  mark_line()$
  encode(
    size = alt$condition(highlight, alt$value(3), alt$value(1))
  )

chart <- (points + lines)

chart

Multi-Line Tooltip

Altair Example

This example shows how you can use selections and layers to create a multi-line tooltip that tracks the x position of the cursor.

To find the x-position of the cursor, we employ a little trick: we add some transparent points with only an x encoding (no y encoding) and tie a nearest selection to these, tied to the x field.

Data

Definition

set.seed(42)

category <- c("A", "B", "C")
x <- seq(1, 100)

data <-
  crossing(
    category = c("A", "B", "C"),
    x = seq(1, 100)
  ) %>%
  mutate(y = rnorm(n()) %>% round(2)) %>%
  group_by(category) %>%
  mutate(y = cumsum(y)) %>%
  ungroup()

glimpse(data)

## Rows: 300
## Columns: 3
## $ category <chr> "A", "A", "A", "A", "A", "A", "A", "A", "A", "A", "A", "A", "…
## $ x        <int> 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18…
## $ y        <dbl> 1.37, 0.81, 1.17, 1.80, 2.20, 2.09, 3.60, 3.51, 5.53, 5.47, 6…

Chart

# Create a selection that chooses the nearest point & selects based on x-value
nearest <- alt$selection(
  type = "single", 
  nearest = TRUE, 
  on = "mouseover",
  fields = list("x"), 
  empty = "none"
)

# The basic line
line <- 
  alt$Chart(data = data)$
  mark_line(interpolate = "basis")$
  encode(
    x = "x:Q",
    y = "y:Q",
    color = "category:N"
  )

# Transparent selectors across the chart. This is what tells us
# the x-value of the cursor
selectors <- 
  alt$Chart(data = data)$
  mark_point()$
  encode(
    x = "x:Q",
    opacity = alt$value(0)
  )$
  properties(selection = nearest)$
  copy()

# Draw points on the line, and highlight based on selection
points <-
  line$
  mark_point()$
  encode(
    opacity = alt$condition(nearest, alt$value(1), alt$value(0))
  )

# Draw text labels near the points, and highlight based on selection
text <- 
  line$
  mark_text(align = "left", dx = 5, dy = -5)$
  encode(
    text = alt$condition(nearest, "y:Q", alt$value(" "))
  )

# Draw a rule at the location of the selection
rules <- 
  alt$Chart(data = data)$
  mark_rule(color = "gray")$
  encode(
    x = "x:Q"
  )$
  transform_filter(nearest$ref())

# Put the five layers into a chart and bind the data
chart <-  
  (line + selectors + points + rules + text)$
  properties( width = 600, height = 300)

chart

Multi-panel Scatter Plot with Linked Brushing

Altair example

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()

brush = alt$selection(type = "interval", resolve = "global")

base = alt$Chart(source)$
  mark_point()$
  encode(
    y = "Miles_per_Gallon",
    color=alt$condition(brush, "Origin", alt$ColorValue("gray"))
  )$
  add_selection(brush)$
  properties(width = 250, height = 250)

base$encode(x = "Horsepower") | base$encode(x = "Acceleration")

Multiple Interactions

Altair example

This example shows how multiple user inputs can be layered onto a chart. The four inputs have functionality as follows:

Dropdown: Filters the movies by genre

Radio Buttons: Highlights certain films by Worldwide Gross

Mouse Drag and Scroll: Zooms the x and y scales to allow for panning.

Data

movies <- jsonlite::fromJSON(vega_data$movies$url)

glimpse(movies)

## 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

movies <- 
  alt$UrlData(
    vega_data$movies$url,
    format = alt$DataFormat(parse = list(`Release Date` = "date"))
  )

ratings <- list("G", "NC-17", "PG", "PG-13", "R")
genres <- 
  list("Action", "Adventure", "Black Comedy", "Comedy", "Concert/Performance",
       "Documentary", "Drama", "Horror", "Musical", "Romantic Comedy", 
       "Thriller/Suspense", "Western")

base <-
  alt$Chart(movies, width = 200, height = 200)$
  mark_point(filled = TRUE)$
  transform_calculate(
    Rounded_IMDB_Rating = "floor(datum.IMDB_Rating)",
    Hundred_Million_Production = "datum.Production_Budget > 100000000.0 ? 100 : 10",
    Release_Year = "year(datum.Release_Date)"
  )$
  transform_filter(
    "datum.IMDB_Rating > 0"
  )$
  transform_filter(
    alt$FieldOneOfPredicate(field = "MPAA_Rating", oneOf = ratings)
  )$encode(
    x = alt$X(
      field = "Worldwide_Gross",
      type = "quantitative",
      scale = alt$Scale(domain = c(100000, 10**9), clamp = TRUE)
    ),
    y = alt$Y(field = "IMDB_Rating", type = "quantitative"),
    tooltip = "Title:N"
  )

# A slider filter
year_slider <- alt$binding_range(min = 1969, max = 2018, step = 1)
slider_selection <- 
  alt$selection_single(
    bind = year_slider, 
    fields = list("Release_Year"),
    name = "Release Year_"
  )

filter_year <- base$
  add_selection(slider_selection)$
  transform_filter(slider_selection)$
  properties(title = "Slider Filtering")

# A dropdown filter
genre_dropdown <- alt$binding_select(options = genres)
genre_select <- 
  alt$selection_single(
    fields = list("Major_Genre"), 
    bind = genre_dropdown,
    name = "Genre"
  )

filter_genres <- 
  base$
  add_selection(genre_select)$
  transform_filter(genre_select)$
  properties(title = "Dropdown Filtering")

#color changing marks
rating_radio <- alt$binding_radio(options = ratings)

rating_select <- 
  alt$selection_single(
    fields = list("MPAA_Rating"), 
    bind = rating_radio, 
    name = "Rating"
  )

rating_color_condition <- 
  alt$condition(
    rating_select,
    alt$Color("MPAA_Rating:N", legend = NULL),
    alt$value("lightgray")
  )

highlight_ratings <-
  base$
  add_selection(rating_select)$
  encode(
    color = rating_color_condition
  )$
  properties(title = "Radio Button Highlighting")

# Boolean selection for format changes
input_checkbox <- alt$binding_checkbox()
checkbox_selection <-
  alt$selection_single(bind = input_checkbox, name = "Big Budget Films")

size_checkbox_condition <-
  alt$condition(
    checkbox_selection,
    alt$SizeValue(25),
    alt$Size("Hundred_Million_Production:Q")
  )

budget_sizing <-
  base$
  add_selection(checkbox_selection)$
  encode(
    size = size_checkbox_condition)$
  properties(title = "Checkbox Formatting")

(filter_year | filter_genres) & (highlight_ratings | budget_sizing)

Scatter Plot and Histogram with Interval Selection

Altair example

This example shows how to link a scatter plot and a histogram together such that an interval selection in the histogram will plot the selected values in the scatter plot.

Note that both subplots need to know about the mbin field created by the transform_bin method. In order to achieve this, the data is not passed to the Chart() instances creating the subplots, but directly in the hconcat() function, which joins the two plots together.

Data

Definition

source <- tibble(
  x = rnorm(100),
  y = rnorm(100),
  m = rnorm(100, 15, 1)
)

glimpse(source)

## Rows: 100
## Columns: 3
## $ x <dbl> -0.0046207678, 0.7602421677, 0.0389909129, 0.7350721416, -0.14647262…
## $ y <dbl> 1.33491259, -0.86927176, 0.05548695, 0.04906691, -0.57835573, -0.998…
## $ m <dbl> 16.02914, 15.91477, 14.99754, 15.13601, 14.27985, 14.80188, 13.97079…

Chart

# interval selection in the scatter plot
pts <- alt$selection(type = "interval", encodings = list("x"))

# left panel: scatter plot
points <- alt$Chart()$
  mark_point(filled = TRUE, color = "black")$
  encode(
    x = "x",
    y = "y"
  )$
  transform_filter(pts)$
  properties(width = 300, height = 300)

# right panel: histogram
mag <- alt$Chart()$
  mark_bar()$
  encode(
    x = "mbin:N",
    y = "count()",
    color = alt$condition(pts, alt$value("black"), alt$value("lightgray"))
  )$
  properties(width = 300, height = 300)$
  add_selection(pts)

# build the chart:
alt$hconcat(points, mag, data = source)$
  transform_bin("mbin", field = "m", bin = alt$Bin(maxbins = 20))

Selection Detail Example

Altair example

This example shows a selection that links two views of data: the left panel contains one point per object, and the right panel contains one line per object. Clicking on either the points or lines will select the corresponding objects in both views of the data.

The challenge lies in expressing such hierarchical data in a way that Altair can handle. We do this by merging the data into a “long form” dataframe, and aggregating identical metadata for the final plot.

Data

Definition

n_objects <- 20
n_times <- 50

# Create one (x, y) pair of metadata per object
locations <- 
  tibble(
    id = seq(1, n_objects),
    x = rnorm(n_objects),
    y = rnorm(n_objects)
  )

# Create a 50-element time-series for each object
timeseries <-
  crossing(
    id = seq(1, n_objects),
    time = seq(1, n_times)
  ) %>%
  mutate(value = rnorm(n())) %>%
  group_by(id) %>%
  mutate(value = cumsum(value)) %>%
  ungroup()


# Merge the (x, y) metadata into the long-form view
data <- left_join(timeseries, locations, by = "id")

glimpse(data)

## Rows: 1,000
## Columns: 5
## $ id    <int> 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1…
## $ time  <int> 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 1…
## $ value <dbl> 0.8029327, 0.2294558, -1.6986693, -1.0342785, -2.6368187, -3.991…
## $ x     <dbl> -0.2484829, -0.2484829, -0.2484829, -0.2484829, -0.2484829, -0.2…
## $ y     <dbl> 1.001113, 1.001113, 1.001113, 1.001113, 1.001113, 1.001113, 1.00…

Chart

selector <- alt$selection_single(empty = "all", fields = list("id"))

points <- 
  alt$Chart(data)$
  mark_point(filled = TRUE, size = 200)$
  encode(
    x = "mean(x)",
    y = "mean(y)",
    color = alt$condition(
      selector,
      "id:O",
      alt$value("lightgray"),
      legend = NULL
    )
  )$
  properties(selection = selector, width = 250, height = 250)

timeseries <- 
  alt$Chart(data)$
  mark_line()$
  encode(
    x = "time",
    y = alt$Y("value", scale = alt$Scale(domain = c(-15, 15))),
    color = alt$Color("id:O", legend = NULL)
  )$
  transform_filter(selector)$
  properties(selection = selector, width = 250, height = 250)

points | timeseries

Selection Histogram

Altair example

This chart shows an example of using an interval selection to filter the contents of an attached histogram, allowing the user to see the proportion of items in each category within the selection.

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

cars <- vega_data$cars()

brush <- alt$selection(type="interval")

points <- 
  alt$Chart()$
  mark_point()$
  encode(
    x = "Horsepower:Q",
    y = "Miles_per_Gallon:Q",
    color = alt$condition(brush, "Origin:N", alt$value("lightgray"))
  )$
  properties(selection = brush)

bars <- 
  alt$Chart()$
  mark_bar()$
  encode(
    x = "count(Origin):Q",
    y = "Origin:N",
    color = "Origin:N"
  )$
  transform_filter(brush$ref())

chart <- alt$vconcat(points, bars, data = cars)

chart

Simple Interactive Colored Scatterplot

Altair example

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

chart <- 
  alt$Chart(vega_data$cars())$
  mark_circle()$
  encode(
    x = "Horsepower",
    y = "Miles_per_Gallon",
    color = "Origin"
  )$
  interactive()

chart

Using Selection Interval with mark_area

Altair example

Data

#glimpse(vega_data$unemployment_across_industries())

Chart

source <- vega_data$unemployment_across_industries$url

base <-
  alt$Chart(source)$
  mark_area(color = "goldenrod", opacity = 0.3)$
  encode(
    x = "yearmonth(date):T",
    y = "sum(count):Q"
  )

brush <- alt$selection_interval(encodings = list("x"), empty = "all")

background <- base$add_selection(brush)

selected <- 
  base$
  transform_filter(brush)$
  mark_area(color = "goldenrod")

background + selected

Haley Jeppson

2023-09-04

Interactive Average

Data

Chart

Interactive Chart with Cross-Highlight

Data

Chart

Interactive Crossfilter

Data

Chart

Interactive Rectangular Brush

Data

Chart

Interactive Scatter Plot and Linked Layered Histogram

Data

Chart

Multi-Line Highlight

Data

Chart

Multi-Line Tooltip

Data

Chart

Multi-panel Scatter Plot with Linked Brushing

Data

Chart

Multiple Interactions

Data

Chart

Scatter Plot and Histogram with Interval Selection

Data

Chart

Selection Detail Example

Data

Chart

Selection Histogram

Data

Chart

Simple Interactive Colored Scatterplot

Data

Chart

Using Selection Interval with mark_area

Data

Chart