Annotation with Dash/plotly for R

Dash Python
1

I am trying to add a text annotation to a Dash/plotly plot. Take for example the code below from https://dashr.plot.ly/getting-started-part-2. Could someone please help me add a text annnotation to one of the data points?

library(dash)
library(dashCoreComponents)
library(dashHtmlComponents)

app <- Dash$new()

df <- read.csv(
  file = "https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv",
  stringsAsFactor=FALSE,
  check.names=FALSE
)

continents <- unique(df$continent)
years <- unique(df$year)

# dccSlider starts from 0;
app$layout(
  htmlDiv(
    list(
      dccGraph(id = 'graph-with-slider'),
      dccSlider(
        id = 'year-slider',
        min = 0,
        max = length(years) - 1,
        marks = years,
        value = 0
      )
    )
  )
)

app$callback(
  output = list(id='graph-with-slider', property='figure'),
  params = list(input(id='year-slider', property='value')),

  function(selected_year_index) {

    which_year_is_selected <- which(df$year == years[selected_year_index + 1])

    traces <- lapply(continents,
                     function(cont) {

                       which_continent_is_selected <- which(df$continent == cont)

                       df_sub <- df[intersect(which_year_is_selected, which_continent_is_selected), ]

                       with(
                         df_sub, 
                         list(
                           x = gdpPercap,
                           y = lifeExp,
                           opacity=0.5,
                           text = country,
                           mode = 'markers',
                           marker = list(
                             size = 15,
                             line = list(width = 0.5, color = 'white')
                           ),
                           name = cont
                         )
                       )
                     }
    )

    list(
      data = traces,
      layout= list(
        xaxis = list(type = 'log', title = 'GDP Per Capita'),
        yaxis = list(title = 'Life Expectancy', range = c(20,90)),
        margin = list(l = 40, b = 40, t = 10, r = 10),
        legend = list(x = 0, y = 1),
        hovermode = 'closest'
      )
    )
  }
)

#app$run_server()
2 Likes
2

Hi cbenner,

Here’s an example adapted from https://github.com/plotly/dash-recipes/blob/master/dash-annotations.py:

library(dash)
library(dashHtmlComponents)
library(dashCoreComponents)

app <- Dash$new()

gdp <- list(
  list(x = list(2012, 2013, 2014, 2015, 2016),
       y = list(103.5, 101.3, 100.7, 97.2, 99.8))
)

make_annotation_item <- function(x, y, label, arrow) {
  return(list(
    xref = 'x',
    yref = 'y',
    x = x, 
    y = y,
    font = list(color = 'black'),
    xanchor = 'left',
    yanchor = 'middle',
    text = label,
    showarrow = arrow,
    arrowhead = 7
  ))
}

annotated_point <- list(make_annotation_item(x = 2016, 
                                             y = 99.8, 
                                             label = "Label goes here", 
                                             arrow = TRUE))

app$layout(htmlDiv(children=list(
  dccGraph(
    id='example-graph',
    figure=list(
      data = gdp,
      layout = list(
        'xaxis' = list(range=list(2010, 2018)),
        'annotations' = annotated_point
        )   
      )   
    )   
   )
  )
)

app$run_server()

Hope this helps!

Cheers,
Ryan