Data, Code and Visualization - Using tooltips in unexpected ways

In highcharter R package there is highcharter::tooltip_chart helper function to put charts in the tooltip. Sadly the function is not that easy to use but is not impossible :).

Documentation example

The example in the documentation is:

Code

library(tidyverse)
library(gapminder)
library(highcharter)

data(gapminder, package = "gapminder")

gp <- gapminder |>
  arrange(desc(year)) |>
  distinct(country, .keep_all = TRUE)

gp2 <- gapminder |>
  select(country, year, pop) |> 
  group_nest(country) |>
  mutate(
    data = map(data, mutate, x = year, y = pop, drop = TRUE),
    data = map(data, list_parse)
    ) |>
  rename(ttdata = data)

gptot <- left_join(gp, gp2, by = "country")

gptot

# A tibble: 142 × 7
   country     continent  year lifeExp       pop gdpPercap ttdata     
   <fct>       <fct>     <int>   <dbl>     <int>     <dbl> <list>     
 1 Afghanistan Asia       2007    43.8  31889923      975. <list [12]>
 2 Albania     Europe     2007    76.4   3600523     5937. <list [12]>
 3 Algeria     Africa     2007    72.3  33333216     6223. <list [12]>
 4 Angola      Africa     2007    42.7  12420476     4797. <list [12]>
 5 Argentina   Americas   2007    75.3  40301927    12779. <list [12]>
 6 Australia   Oceania    2007    81.2  20434176    34435. <list [12]>
 7 Austria     Europe     2007    79.8   8199783    36126. <list [12]>
 8 Bahrain     Asia       2007    75.6    708573    29796. <list [12]>
 9 Bangladesh  Asia       2007    64.1 150448339     1391. <list [12]>
10 Belgium     Europe     2007    79.4  10392226    33693. <list [12]>
# ℹ 132 more rows

The data is ready! Now go to chart:

Code

hchart(
  gptot,
  "point",
  hcaes(lifeExp, gdpPercap, name = country, size = pop, group = continent, name = country)
  ) |>
  hc_yAxis(type = "logarithmic") |> 
  # here is the magic (inside the function)
  hc_tooltip(
    useHTML = TRUE,
    headerFormat = "<b>{point.key}</b>",
    pointFormatter = tooltip_chart(accesor = "ttdata")
    )

Donut example

Now we’ll use a donut chart and try to place the tooltip inside to give it importance:

Code

donutdata <- gp |> 
  group_by(continent) |> 
  summarise(pop = sum(pop/1e6)*1e6)

hchart(donutdata, "pie", hcaes(name = continent, y = pop), innerSize = 300)

Just according to keikaku.

The donut is ready. So now we need a detailed data from each continent to show in the tooltip.

Code

donutdata2 <- gp |> 
  select(continent, lifeExp, gdpPercap) |> 
  group_nest(continent) |> 
  mutate(
    data = map(data, mutate, x = lifeExp, y = gdpPercap, drop = TRUE),
    data = map(data, list_parse)
    ) |>
  rename(ttdata = data) |> 
  left_join(donutdata, by = "continent")

donutdata2

# A tibble: 5 × 3
  continent ttdata             pop
  <fct>     <list>           <dbl>
1 Africa    <list [52]>  929539692
2 Americas  <list [25]>  898871184
3 Asia      <list [33]> 3811953827
4 Europe    <list [30]>  586098529
5 Oceania   <list [2]>    24549947

And the chart:

Code

hc <- hchart(
  donutdata2,
  "pie",
  hcaes(name = continent, y = pop),
  innerSize = 375
  )

hc |> 
  hc_tooltip(
    useHTML = TRUE,
    headerFormat = "<b>{point.key}</b>",
    pointFormatter = tooltip_chart(
      accesor = "ttdata",
      hc_opts = list(
        chart = list(type = "scatter"),
        credits = list(enabled = FALSE),
        plotOptions = list(scatter = list(marker = list(radius = 2)))
        ),
      height = 225
      ),
    positioner = JS(
      "function () {
      
        /* one of the most important parts! */
        xp =  this.chart.chartWidth/2 - this.label.width/2
        yp =  this.chart.chartHeight/2 - this.label.height/2
      
        return { x: xp, y: yp };
      
      }"),
    shadow = FALSE,
    borderWidth = 0,
    backgroundColor = "transparent",
    hideDelay = 1000
    )

What do you think? Maybe it’s a kind of overkill, but hey, it’s up to you to (ab)use it or not! Another more subtle alternative can be put text, i.e, the normal tooltip but with a bigger size, like a knob chart.

Reuse

https://creativecommons.org/licenses/by/4.0/

Citation

BibTeX citation:

@online{kunstfuentes2019,
  author = {Joshua Kunst Fuentes},
  title = {Using Tooltips in Unexpected Ways},
  date = {2019-02-04},
  url = {https://jkunst.com/blog/posts/2019-02-04-using-tooltips-in-unexpected-ways},
  langid = {en}
}

For attribution, please cite this work as:

Joshua Kunst Fuentes. 2019. “Using Tooltips in Unexpected Ways.” February 4, 2019. https://jkunst.com/blog/posts/2019-02-04-using-tooltips-in-unexpected-ways.