When charts are integrated in the web page

I saw a chart yesterday, a chart without frame, without title or captions just a very hidden chart at bottom of the web page. It will be a nice time to get the most interesting visual features of it.

data-visualization
highcharts
Author

Joshua Kunst Fuentes

Published

April 8, 2019

I was searching for a CDN at jsdelivr.com and I noticed a chart showing download per days:

Why I like this chart? Because is a chart integrated with the web site using all space and soft colors to not call the attention. A very special chart.

Now we’ll try to replicate :). That’s why we’re are here. Let’s download the data:

Code
library(tidyverse)
library(jsonlite)
library(lubridate)

data <- jsonlite::read_json("https://data.jsdelivr.com/v1/package/npm/highcharts/stats/month")

# str(data)

data <- data$versions %>%
  map( ~ .x$dates) %>%
  enframe() %>%
  mutate(value = map(value, enframe)) %>%
  unnest() %>%
  mutate(
    value = map_dbl(value, identity),
    name1 = ymd(name1)
    )

data
# A tibble: 2,550 × 3
   name   name1      value
   <chr>  <date>     <dbl>
 1 0.0.11 2022-11-22     0
 2 0.0.11 2022-11-23     0
 3 0.0.11 2022-11-24     0
 4 0.0.11 2022-11-25     0
 5 0.0.11 2022-11-26     0
 6 0.0.11 2022-11-27     0
 7 0.0.11 2022-11-28     0
 8 0.0.11 2022-11-29     0
 9 0.0.11 2022-11-30     0
10 0.0.11 2022-12-01     0
# … with 2,540 more rows

We’ll group the data by day:

Code
datag <- data %>%
  group_by(name1) %>%
  summarise(value = sum(value)) %>% 
  rename(
    date = name1,
    downloads = value
  )

datag
# A tibble: 30 × 2
   date       downloads
   <date>         <dbl>
 1 2022-11-22    477614
 2 2022-11-23    434546
 3 2022-11-24    448489
 4 2022-11-25    440718
 5 2022-11-26    360753
 6 2022-11-27    369302
 7 2022-11-28    482625
 8 2022-11-29    448668
 9 2022-11-30    449497
10 2022-12-01    472186
# … with 20 more rows

And we’re ready to our first try:

Code
hc <- hchart(datag, "line", hcaes(date, downloads))
hc

Just According to Keikaku

Now, there are some changes we need to do:

Code
color_theme <- "#E76235" # extracted with chrome extension

hchart(datag, "areaspline", hcaes(date, downloads), name = "Downloads") %>% 
  hc_xAxis(
    title = list(text = NULL),
    opposite = TRUE,
    gridLineWidth = 1,
    gridLineColor = color_theme, # vertical lines
    tickColor = color_theme,
    lineColor = "transparent",  # horizontal line,
    labels = list(style = list(color = color_theme, fontSize = "16px")),
    tickInterval = 8 * 24 * 3600 * 1000 # interval of 1 day (in your case = 60)
    ) %>%
  hc_yAxis(
    title = list(text = ""),
    opposite = TRUE,
    gridLineColor = "transparent",
    showFirstLabel = FALSE,
    labels = list(
      style = list(color = color_theme, fontSize = "16px"),
      align = "left",
      x = -100
    )
  ) %>%
  hc_plotOptions(
    series = list(
      color = color_theme,
      fillColor = hex_to_rgba(color_theme, 0.20),
      marker = list(enabled = FALSE)
    )
  ) %>%
  hc_chart(
    spacingBottom =  0,
    spacingLeft =  -6,
    spacingRight =  -55 # just plying to get these numbers
  ) %>% 
  hc_size(height = 300)

Reuse

Citation

BibTeX citation:
@online{kunstfuentes2019,
  author = {Joshua Kunst Fuentes},
  title = {When Charts Are Integrated in the Web Page},
  date = {2019-04-08},
  url = {https://jkunst.com/blog/posts/2019-04-08-when-charts-are-integrated-in-the-web-page},
  langid = {en}
}
For attribution, please cite this work as:
Joshua Kunst Fuentes. 2019. “When Charts Are Integrated in the Web Page.” April 8, 2019. https://jkunst.com/blog/posts/2019-04-08-when-charts-are-integrated-in-the-web-page.