Attempt to recreate the Accessible line chart example from the Highcharts accessibility module documentation as an htmlwidget using Joshua Kunst’s {highcharter} R package.
# Indiv data series in different styles ------------------------------------
# recreating first example here: https://www.highcharts.com/docs/accessibility/accessibility-module
# using Joshua Kunst's pattern fill examples as a model
# see them here: https://jkunst.com/highcharter/articles/modules.html#pattern-fills-1
suppressPackageStartupMessages(library(tidyverse))
library(highcharter)## Registered S3 method overwritten by 'quantmod':
## method from
## as.zoo.data.frame zoo## Highcharts (www.highcharts.com) is a Highsoft software product which is## not free for commercial and Governmental use# read in exported csv from highcharts example
url <- "https://gist.githubusercontent.com/batpigandme/aeb30566f899cdcdeb6024c0344d1ae1/raw/9cbafbbc99311c04b1a675e0ebb3953692fd51b8/pop-screenreaders.csv"
raw_dat <- read_csv(url)## Rows: 6 Columns: 7## ── Column specification ────────────────────────────────────────────────────────
## Delimiter: ","
## chr (1): Category
## dbl (6): NVDA, JAWS, VoiceOver, Narrator, ZoomText/Fusion, Other
##
## ℹ Use `spec()` to retrieve the full column specification for this data.
## ℹ Specify the column types or set `show_col_types = FALSE` to quiet this message.# turn Category into ordered factor and remove inconsistent period
sr_dat3 <- raw_dat %>%
mutate(Category = str_replace_all(Category, "\\.", "")) %>%
mutate(Category = as_factor(Category))
# OK, this one works — gives legend and double encoding
# But, I can't get the range in the xAxis screen reader description
hc_sr_setup <- highchart() %>%
# add dependencies
hc_add_dependency(name = "modules/series-label.js") %>%
hc_add_dependency(name = "modules/accessibility.js") %>%
hc_add_dependency(name = "modules/exporting.js") %>%
hc_add_dependency(name = "modules/export-data.js") %>%
hc_chart(
type = "spline",
accessibility = list(
enabled = TRUE,
keyboardNavigation = list(enabled = TRUE),
linkedDescription = "Line chart demonstrating some accessibility features of Highcharts. The chart displays the most commonly used screen readers in surveys taken by WebAIM from December 2010 to September 2019. JAWS was the most used screen reader until 2019, when NVDA took over. VoiceOver is the third most used screen reader, followed by Narrator. ZoomText/Fusion had a surge in 2015, but usage is otherwise low. The overall use of other screen readers has declined drastically the past few years."
),
dateTimeLabelFormats = list(
month = list(main = "%b %Y")
)
) %>%
hc_title(text = "Most common desktop screen readers") %>%
hc_subtitle(text = "Source: WebAIM.") %>%
hc_caption(text = "Line chart demonstrating some accessibility features of Highcharts. The chart displays the most commonly used screen readers in surveys taken by WebAIM from December 2010 to September 2019. JAWS was the most used screen reader until 2019, when NVDA took over. VoiceOver is the third most used screen reader, followed by Narrator. ZoomText/Fusion had a surge in 2015, but usage is otherwise low. The overall use of other screen readers has declined drastically the past few years.") %>%
hc_xAxis(categories = sr_dat3$Category,
title = list(text = "Time"),
accesibility = list(
enabled = TRUE,
description = "Time from December 2010 to September 2019",
range = "December 2010 to September 2019"
)
) %>%
hc_yAxis(
title = list(text = "Percentage usage"),
accessibility = list(description = "Percentage usage")
) %>%
hc_legend(symbolWidth = 40) %>%
hc_plotOptions(
spline = list(
accessibility = list(
enabled = TRUE,
keyboardNavigation = list(enabled = TRUE)
)
)
)
# try adding the series
hc_sr_setup %>%
hc_xAxis(categories = sr_dat3$Category,
title = list(text = "Time"),
accesibility = list(
enabled = TRUE,
description = "Time from December 2010 to September 2019",
range = "December 2010 to September 2019"
),
dateTimeLabelFormats = list(
month = list(main = "%b %Y")
)
) %>%
hc_add_series(
data = sr_dat3$NVDA,
name = "NVDA",
color = "#49a65e",
label = list(enabled = TRUE),
marker = list(symbol = "circle")
) %>%
hc_add_series(
data = sr_dat3$JAWS,
name = "JAWS",
color = "#5f98cf",
dashStyle = "ShortDashDot",
label = list(enabled = TRUE),
marker = list(symbol = "diamond")
) %>%
hc_add_series(
data = sr_dat3$VoiceOver,
name = "VoiceOver",
color = "#434348",
dashStyle = "ShortDot",
label = list(enabled = TRUE),
marker = list(symbol = "square")
) %>%
hc_add_series(
data = sr_dat3$Narrator,
name = "Narrator",
color = "#b381b3",
dashStyle = "Dash",
label = list(enabled = TRUE),
marker = list(symbol = "triangle")
) %>%
hc_add_series(
data = sr_dat3$`ZoomText/Fusion`,
name = "ZoomText/Fusion",
color = "#b68c51",
dashStyle = "ShortDot",
label = list(enabled = TRUE),
marker = list(symbol = "triangle-down")
) %>%
hc_add_series(
data = sr_dat3$Other,
name = "Other", color = "#f45b5b",
dashStyle = "ShortDash",
label = list(enabled = TRUE),
marker = list(symbol = "circle")
) %>%
hc_exporting(
enabled = TRUE,
accessibility = list(
enabled = TRUE
)
) %>%
hc_tooltip(valueSuffix = "%")The chart above doesn’t use a particularly R-like (or ggplot2-like, which is what {highcharter} is modelled after) syntax. Each group could be defined in the hcaes() argument, which:
Define[s] aesthetic mappings. Similar in spirit to
ggplot2::aes
This gets us pretty close (the code from my first attempt to recreate this chart is included below), but doesn’t allow you to manually define the dashStyle and/or marker.symbol for each group (or, at least, I couldn’t figure out how to do that). So, in the interest of getting a “dual encoding” (i.e. using both shape/style and colour to distinguish the groups), I added each one as its own series.
You do end up with dual encoding for the marker symbols, you just don’t get to decide which is which (which isn’t much of a problem, really). There are probably other disparities between the two charts, as I made improvements to the “working” version as I went along and got more familiar with the API.
# replace July with proper abbreviation
raw_dat[4,1] <- "Jul 2015"
# turn into "tidy" data format for categories
sr_dat <- raw_dat %>%
separate(Category, into = c("month", "year")) %>%
select(-month) %>%
pivot_longer(!year, names_to = "screen_reader", values_to = "pct_usage") %>%
mutate(year = parse_number(year)) %>%
drop_na()
hchart(
sr_dat,
"spline",
hcaes(x = year, y = pct_usage, group = screen_reader),
accessibility = list(
enabled = TRUE,
keyboardNavigation = list(enabled = TRUE),
linkedDescription = "Line chart demonstrating some accessibility features of Highcharts. The chart displays the most commonly used screen readers in surveys taken by WebAIM from December 2010 to September 2019. JAWS was the most used screen reader until 2019, when NVDA took over. VoiceOver is the third most used screen reader, followed by Narrator. ZoomText/Fusion had a surge in 2015, but usage is otherwise low. The overall use of other screen readers has declined drastically the past few years."
),
exporting = list(
enabled = TRUE,
accessibility = list(enabled = TRUE)
)
) %>%
hc_title(
text = "Most common desktop screen readers"
) %>%
hc_subtitle(
text = "Source: WebAIM."
) %>%
hc_xAxis(
title = list(text = "Time"),
accesibility = list(
enabled = TRUE,
description = list(text = "Time from December 2010 to September 2019"),
rangeDescription = "2010 to 2019"
)
) %>%
hc_yAxis(
title = list(text = "Percentage usage"),
accessibility = list(description = "Percentage usage")
) %>%
hc_exporting(
enabled = TRUE,
accessibility = list(
enabled = TRUE
)
) %>%
hc_colors(c('#49a65e', '#f45b5b', '#b381b3', '#5f98cf', '#434348', '#b68c51')) %>%
hc_add_dependency(name = "modules/accessibility.js") %>%
hc_add_dependency(name = "modules/exporting.js") %>%
hc_add_dependency(name = "modules/export-data.js")