{"id":14067834,"url":"https://github.com/feddelegrand7/cronologia","last_synced_at":"2025-09-01T16:35:06.249Z","repository":{"id":54791218,"uuid":"333790578","full_name":"feddelegrand7/cronologia","owner":"feddelegrand7","description":"🌱 🌱 🌱 Create an HTML Vertical Timeline Widget in RMarkdown and Shiny","archived":false,"fork":false,"pushed_at":"2021-04-23T00:20:41.000Z","size":2524,"stargazers_count":54,"open_issues_count":1,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-21T22:03:49.052Z","etag":null,"topics":["css","html","htmltools","r","rmarkdown","shiny"],"latest_commit_sha":null,"homepage":"","language":"R","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/feddelegrand7.png","metadata":{"files":{"readme":"README.Rmd","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-28T14:53:34.000Z","updated_at":"2024-03-22T05:29:16.000Z","dependencies_parsed_at":"2022-08-14T03:01:03.293Z","dependency_job_id":null,"html_url":"https://github.com/feddelegrand7/cronologia","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feddelegrand7%2Fcronologia","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feddelegrand7%2Fcronologia/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feddelegrand7%2Fcronologia/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feddelegrand7%2Fcronologia/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/feddelegrand7","download_url":"https://codeload.github.com/feddelegrand7/cronologia/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247470339,"owners_count":20944146,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","html","htmltools","r","rmarkdown","shiny"],"created_at":"2024-08-13T07:05:48.255Z","updated_at":"2025-04-06T10:32:25.833Z","avatar_url":"https://github.com/feddelegrand7.png","language":"R","funding_links":[],"categories":["Visualization","R"],"sub_categories":["Time Series"],"readme":"---\noutput: github_document\n---\n\n\u003c!-- README.md is generated from README.Rmd. Please edit that file --\u003e\n\n```{r, include = FALSE}\nknitr::opts_chunk$set(\n  collapse = TRUE,\n  comment = \"#\u003e\",\n  fig.path = \"man/figures/README-\",\n  out.width = \"100%\"\n)\n```\n\n# cronologia\n\n\u003c!-- badges: start --\u003e\n[![R-CMD-check](https://github.com/feddelegrand7/cronologia/workflows/R-CMD-check/badge.svg)](https://github.com/feddelegrand7/cronologia/actions)\n[![Codecov test coverage](https://codecov.io/gh/feddelegrand7/cronologia/branch/master/graph/badge.svg)](https://codecov.io/gh/feddelegrand7/cronologia?branch=master)\n[![License: AGPL v3](https://img.shields.io/badge/License-AGPL%20v3-blue.svg)](https://www.gnu.org/licenses/agpl-3.0)\n[![CRAN status](https://www.r-pkg.org/badges/version/cronologia)](https://CRAN.R-project.org/package=cronologia)\n[![metacran\ndownloads](https://cranlogs.r-pkg.org/badges/cronologia)](https://cran.r-project.org/package=cronologia)\n[![metacran\ndownloads](https://cranlogs.r-pkg.org/badges/grand-total/cronologia)](https://cran.r-project.org/package=cronologia)\n[![R\nbadge](https://img.shields.io/badge/Build%20with-♥%20and%20R-violet)](https://github.com/feddelegrand7/cronologia)\n\n\u003c!-- badges: end --\u003e\n\nThe goal of `cronologia` is to create an interactive timeline widget in RMarkdown documents and Shiny applications. \n\n## Installation\n\nYou can install the stable version from CRAN with\n\n```{r, eval=FALSE}\n\ninstall.packages(\"cronologia\")\n\n```\n\n# Introduction\n\nThe `cronologia` package has three functions: \n\n- `create_tml()` : used to create simple text-based timelines. \n- `create_tml_img()`: used to create timelines that include images.\n- `create_tml_2()`: works the same way as `create_tml()` except that it adds and additional description component. \n\n# Examples \n\n## `create_tml()`\n\nIn order to showcase the package's features, let's create a simple data frame: \n\n```{r}\n\nbatman_data \u003c- data.frame(\n\n\n  date_release = c(\"May 31, 2005\",\n                   \"July 14, 2008\",\n                   \"July 16, 2012 \"),\n\n  title = c(\"Batman Begins\",\n                  \"The Dark Knight\",\n                  \"The Dark Knight Rises\")\n)\n\nbatman_data\n```\n\n\n\nNow, using `create_tml()`, we can create easily a timeline as follows: \n\n\n```{r, eval=FALSE}\nlibrary(cronologia)\n\n\ncreate_tml(df = batman_data, # the data frame\n           smr = \"title\", # the column that will be used in the summary \n           dsc = \"date_release\" # the column that will be used in the description\n           )\n\n```\n\n![](man/figures/example1.gif)\n\n\nYou can easily customize the appearance of the time line using the parameters provided: \n\n\n\n```{r, eval=FALSE}\n\ncreate_tml(df = batman_data,\n           smr = \"title\", # summary\n           dsc = \"date_release\", # description\n           smr_col = \"blue\", # summary text color\n           smr_bgcol = \"orange\", # summary background color\n           dsc_col = \"white\", # description text color\n           dsc_bgcol = \"black\", # description background color\n           dsc_size = \"30px\" # description size\n           )\n\n```\n\n![](man/figures/example2.gif)\n\n\n### `r paste0(emo::ji(\"exclamation\"), emo::ji(\"exclamation\"), emo::ji(\"exclamation\")) `\n\nIf you want to make all the summary components open by default, you can set the `open` parameter to `TRUE`. The parameter is available in all the functions.  \n\n\n## `create_tml_img()`\n\nIf you want to include images within your timeline, you can use the `create_tml_img()` function. To illustrate this function, we'll use the [radous](https://github.com/feddelegrand7/radous) package that fetch the [randomuser.me](https://randomuser.me/) API and returns a data frame that contains many information (including images' URLs).\n\n\u003e Disclaimer: All the generated images are extracted from the authorized section of UI Faces. \n\n\n```{r, message=FALSE, warning=FALSE}\nlibrary(radous)\n\ndf \u003c- get_data(n = 4, seed = \"123\")\n\ndf[c('name_last', \n     'location_street_name',\n     'picture_large',\n     'name_last')]\n\n```\n\n\nNow we will proceed as previously except that we need to provide two additional arguments: \n\n- `imgsrc`: the column that indicates the source of the images. \n- `imgalt`: the column indicating the `alt` attribute of the images. For accessibility reasons I decided to make this argument mandatory. Use a column that contains `\"\"` if the images do not need the `alt` attribute. \n\n```{r, eval=FALSE}\ndf \u003c- radous::get_data(4, seed = \"123\")\n\ncreate_tml_img(df, \n               smr = \"name_last\", \n               dsc = \"location_street_name\", \n               imgsrc = \"picture_large\", \n               imgalt = \"name_last\", \n               imgwidth = \"150px\", \n               imgheight = \"150px\", \n               dsc_size = \"20px\")\n\n```\n\n\n![](man/figures/example3.gif)\n\n\n## `create_tml_2()`\n\nFollowing the idea of [Tobias](https://twitter.com/toeb18/status/1355104693299634181?s=20) for creating an interactive CV I thought that two (2) description components would be more appropriate. The function is similar to `create_tml()` except that it adds another description paragraph to the Timeline. \n\nLet's go through an example: \n\n\n```{r}\ncv \u003c- data.frame(\n  \n  \n  jobs = c(\"Game tester at Nintendo\", \"Food tester at Ferrero\", \"Movies tester at Netflix\"), \n  \n  period = c(\"2020-2022\", \"2022-2024\", \"2026-2030\"),\n  \n  todos = c(\"Playing Zelda all day\", \"Eating Bueno all day\", \"Watching the Office all day\")\n  \n)\n\n\ncv\n```\n\n```{r, eval=FALSE}\n\ncreate_tml_2(cv, \n             smr = \"jobs\", \n             dsc = \"period\", \n             dsc2 = \"todos\", \n             dsc2_col = \"white\",\n             dsc2_bgcol = \"peru\") # yes, peru is also a color\n\n```\n\n![](man/figures/example4.gif)\n\n\n# TODOS \n\n- [x] Writing unit tests \n- [ ] Creating a hex sticker \n- [x] Sharing with RWeekly\n- [ ] Talk about it at a virtual event\n\n\n\n\n# Code of Conduct\n\nPlease note that the `cronologia` project is released with a [Contributor Code of Conduct](https://contributor-covenant.org/version/2/0/CODE_OF_CONDUCT.html). By contributing to this project, you agree to abide by its terms.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffeddelegrand7%2Fcronologia","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffeddelegrand7%2Fcronologia","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffeddelegrand7%2Fcronologia/lists"}