When charts are integrated in the web page

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: 3,090 × 3
   name  name1      value
   <chr> <date>     <dbl>
 1 0.0.1 2024-02-24     0
 2 0.0.1 2024-02-25     7
 3 0.0.1 2024-02-26     0
 4 0.0.1 2024-02-27     0
 5 0.0.1 2024-02-28     0
 6 0.0.1 2024-02-29     0
 7 0.0.1 2024-03-01     0
 8 0.0.1 2024-03-02     0
 9 0.0.1 2024-03-03     6
10 0.0.1 2024-03-04     0
# ℹ 3,080 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 2024-02-24    398186
 2 2024-02-25    473378
 3 2024-02-26    582457
 4 2024-02-27    479109
 5 2024-02-28    478527
 6 2024-02-29    481919
 7 2024-03-01    470637
 8 2024-03-02    406260
 9 2024-03-03    414719
10 2024-03-04    508708
# ℹ 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:

• Change line to area spline.
• Put every axis in the opposite side.
• Clean the axis and use a bigger font size.
• Remove the lables and reduce number of axis ticks.
• A lot of tweaks!
• And the most important step in this chart: use all the space, reducing the margins and move the x-axis labels to the inner side. Using the l-screen option in distill package.

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

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

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.