Re-create Diagram with Style using Plotly.

Hello Everyone. In this post I will show you how to re-create diagram with style using Plotly and R programming of course.

Photo by Luke Chesser on Unsplash

Based on the information I got from the official website. is an online media, data and research company in the fields of economics and business. Founded on April 1, 2012 in Jakarta, the company presents in-depth news, information, data and research results for the benefit of business leaders and policy makers. The Katadata team consists of experienced journalists and researchers in the fields of energy, finance, macroeconomics, trade and infrastructure.

The articles in this word are well presented. The data that has been collected is presented interactively (can be hovered) and is interesting so that it is easy to understand.

I tried to make a diaram in the style commonly used in the katadata article. I use the R programming language with the help of library tidyverse, plotly, httr, jsonlite and janitor. Maybe my diagram isn’t 100 percent the same. But the results will be made in such a way as to resemble the style of katadata.

The following is an example of a diagram found on the page.

screenshot from

Here are the results of the diagram I made using plotly.

chart made with Plotly.

Here is the source code that I use or you can download here.

#load data from
base_Url <- ""
df <-
GET(base_Url) %>%
content(., "text") %>%
fromJSON(., flatten = TRUE) %>% %>%
mutate_if(is.integer, as.numeric) %>%
rename_all(., ~str_remove(.x, "attributes\\.")) %>%
clean_names() %>%
rename("confirmed" = "kasus_posi")
#plotly way
p1 <- df %>%
select(provinsi, confirmed) %>%
arrange(-confirmed) %>%
hover <- paste0('<b>10 Provinsi dengan Kasus Covid-19 Terbanyak di Indonesia</b><br>', (format(Sys.time(), "(per %d %b %Y)")))p <- df %>%
select(provinsi, confirmed) %>%
arrange(-confirmed) %>%
head(10) %>%
mutate(provinsi = factor(provinsi, levels = p1$provinsi)) %>%
text = hover,
hoverinfo = 'text',
type = "bar") %>%
layout(title = ,
xaxis = list(title = NA, tickangle = -30),
yaxis = list(title = "Kasus", autotick = F, dtick = 500))
#save plot as html
htmlwidgets::saveWidget(p, "plot.html")

Thank You

Amri Rohman
Sidoarjo, East Java, ID

Love sport science and bussines statistics, Indonesian.