We have seen how to concatenate charts, we may now see how to connect them interactively. The steps described here are based on the Interactive Examples article.

  • To get started, we create a static chart using the step 1 of the code below.
  • The second step is to add a selection. Here we add a selection of type interval but a selection can also be single or multi altair.selection reference. In step 2, we also name the selection ‘brush’ and we update the static chart by including the selection function.
  • Finally, in step 3, we update the color encoding of the data, so that every time the chart is brused the data inside the selection are colored, based on the nominal variable Missing, and the rest are colored lightgray.
data_source_modified_subset = subset(data_source_modified, data_source_modified$Entity != "All natural disasters")

# step1
domain_color = c("0", "1")
range_color = c('black', 'red')

chart_static = alt$Chart(data_source_modified_subset)$
  mark_circle(
    opacity = 0.8,
    size = 50
  )$
  encode(
    x = 'Year:O',
    y = 'Deaths:Q',
    color = alt$Color('Missing', scale=alt$Scale(domain = domain_color, range = range_color))
  )$
  properties(
    height = 300,
    width = 600
  )

# step2
brush = alt$selection_interval()
chart_brush = chart_static$add_selection(brush) 

# step3
chart_1 = chart_brush$encode(
    color = alt$condition(brush, "Missing:N", alt$value("lightgray"))
  )


Now that we have created our brushable chart, we may decrease the size of the first chart, so that we can easily display two charts in the screen. If we now make a second chart that inherits all the properties of the first chart but we only change the x position encoding to Entity, we get the two-way brushable and linkable visalisation below.

chart_2a = chart_1$properties(width = 300, height = 300)
chart_2b = chart_2a$encode(x = "Entity:N")

chart_disasters = (chart_2a | chart_2b)


Exercise - Make a one-way brushable and linkable chart of the deaths versus time per entity. The interval selection appears in a barchart below. Hint: Check the altair R gallery of interactive charts