{"id":13401328,"url":"https://github.com/dreamRs/billboarder","last_synced_at":"2025-03-14T07:31:34.202Z","repository":{"id":56935147,"uuid":"97649774","full_name":"dreamRs/billboarder","owner":"dreamRs","description":":bar_chart: R Htmlwidget for billboard.js","archived":false,"fork":false,"pushed_at":"2024-09-10T07:46:11.000Z","size":22777,"stargazers_count":173,"open_issues_count":11,"forks_count":21,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-09-10T14:57:05.501Z","etag":null,"topics":["data-visualization","htmlwidgets","r"],"latest_commit_sha":null,"homepage":"https://dreamrs.github.io/billboarder/","language":"R","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dreamRs.png","metadata":{"files":{"readme":"README.md","changelog":"NEWS.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-18T22:36:41.000Z","updated_at":"2024-09-09T12:24:51.000Z","dependencies_parsed_at":"2024-09-09T14:32:06.982Z","dependency_job_id":"e139be59-6953-4679-bf85-153b53db0f96","html_url":"https://github.com/dreamRs/billboarder","commit_stats":{"total_commits":239,"total_committers":4,"mean_commits":59.75,"dds":0.2552301255230126,"last_synced_commit":"26c93896f8b040eeb48891f4f2e70690af71d4ff"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamRs%2Fbillboarder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamRs%2Fbillboarder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamRs%2Fbillboarder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamRs%2Fbillboarder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dreamRs","download_url":"https://codeload.github.com/dreamRs/billboarder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243541937,"owners_count":20307786,"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":["data-visualization","htmlwidgets","r"],"created_at":"2024-07-30T19:01:01.543Z","updated_at":"2025-03-14T07:31:32.847Z","avatar_url":"https://github.com/dreamRs.png","language":"R","funding_links":[],"categories":["R","Tools","Visualization","Interactive plots"],"sub_categories":["Integrations","General-Purpose","Miscellaneous"],"readme":"# billboarder\n\n\u003e Htmlwidget for [billboard.js](https://github.com/naver/billboard.js)\n\n\u003c!-- badges: start --\u003e\n[![CRAN status](https://www.r-pkg.org/badges/version/billboarder)](https://CRAN.R-project.org/package=billboarder)\n[![cranlogs](https://cranlogs.r-pkg.org/badges/billboarder?color=brightgreen)](https://CRAN.R-project.org/package=billboarder)\n[![Codecov test coverage](https://codecov.io/gh/dreamRs/billboarder/branch/master/graph/badge.svg)](https://app.codecov.io/gh/dreamRs/billboarder?branch=master)\n[![R-CMD-check](https://github.com/dreamRs/billboarder/actions/workflows/R-CMD-check.yaml/badge.svg)](https://github.com/dreamRs/billboarder/actions/workflows/R-CMD-check.yaml)\n\u003c!-- badges: end --\u003e\n\n\n## Overview\n\nThis package allow you to use [billboard.js](https://naver.github.io/billboard.js/), a re-usable easy interface JavaScript chart library, based on D3 v4+.\n\nA **proxy** method is implemented to smoothly update charts in shiny applications, see below for details.\n\n\n## Installation :\n\nInstall from [CRAN](https://CRAN.R-project.org/package=billboarder) with:\n```r\ninstall.packages(\"billboarder\")\n```\n\nInstall development version grom [GitHub](https://github.com/dreamRs/billboarder) with:\n```r\n# install.packages(\"remotes\")\nremotes::install_github(\"dreamRs/billboarder\")\n```\n\nFor interactive examples \u0026 documentation, see `pkgdown` site : https://dreamrs.github.io/billboarder/index.html\n\n\n\n## Bar / column charts\n\nSimple bar chart :\n\n```r\nlibrary(\"billboarder\")\n\n# data\ndata(\"prod_par_filiere\")\n\n# a bar chart !\nbillboarder() %\u003e%\n  bb_barchart(data = prod_par_filiere[, c(\"annee\", \"prod_hydraulique\")], color = \"#102246\") %\u003e%\n  bb_y_grid(show = TRUE) %\u003e%\n  bb_y_axis(tick = list(format = suffix(\"TWh\")),\n            label = list(text = \"production (in terawatt-hours)\", position = \"outer-top\")) %\u003e% \n  bb_legend(show = FALSE) %\u003e% \n  bb_labs(title = \"French hydraulic production\",\n          caption = \"Data source: RTE (https://opendata.rte-france.com)\")\n```\n![](man/figures/rte_barchart0.png)\n\nMultiple categories bar chart :\n\n```r\nlibrary(\"billboarder\")\n\n# data\ndata(\"prod_par_filiere\")\n\n# dodge bar chart !\nbillboarder() %\u003e%\n  bb_barchart(\n    data = prod_par_filiere[, c(\"annee\", \"prod_hydraulique\", \"prod_eolien\", \"prod_solaire\")]\n  ) %\u003e%\n  bb_data(\n    names = list(prod_hydraulique = \"Hydraulic\", prod_eolien = \"Wind\", prod_solaire = \"Solar\")\n  ) %\u003e% \n  bb_y_grid(show = TRUE) %\u003e%\n  bb_y_axis(tick = list(format = suffix(\"TWh\")),\n            label = list(text = \"production (in terawatt-hours)\", position = \"outer-top\")) %\u003e% \n  bb_legend(position = \"inset\", inset = list(anchor = \"top-right\")) %\u003e% \n  bb_labs(title = \"Renewable energy production\",\n          caption = \"Data source: RTE (https://opendata.rte-france.com)\")\n```\n![](man/figures/rte_barchart_dodge.png)\n\nStacked bar charts :\n\n```r\nlibrary(\"billboarder\")\n\n# data\ndata(\"prod_par_filiere\")\n\n# stacked bar chart !\nbillboarder() %\u003e%\n  bb_barchart(\n    data = prod_par_filiere[, c(\"annee\", \"prod_hydraulique\", \"prod_eolien\", \"prod_solaire\")], \n    stacked = TRUE\n  ) %\u003e%\n  bb_data(\n    names = list(prod_hydraulique = \"Hydraulic\", prod_eolien = \"Wind\", prod_solaire = \"Solar\"), \n    labels = TRUE\n  ) %\u003e% \n  bb_colors_manual(\n    \"prod_eolien\" = \"#41AB5D\", \"prod_hydraulique\" = \"#4292C6\", \"prod_solaire\" = \"#FEB24C\"\n  ) %\u003e%\n  bb_y_grid(show = TRUE) %\u003e%\n  bb_y_axis(tick = list(format = suffix(\"TWh\")),\n            label = list(text = \"production (in terawatt-hours)\", position = \"outer-top\")) %\u003e% \n  bb_legend(position = \"right\") %\u003e% \n  bb_labs(title = \"Renewable energy production\",\n          caption = \"Data source: RTE (https://opendata.rte-france.com)\")\n```\n\n![](man/figures/rte_barchart_stacked.png)\n\n\n\n## Scatter plot\n\nClassic :\n\n```r\nlibrary(billboarder)\nlibrary(palmerpenguins)\nbillboarder() %\u003e% \n  bb_scatterplot(data = penguins, x = \"bill_length_mm\", y = \"flipper_length_mm\", group = \"species\") %\u003e% \n  bb_axis(x = list(tick = list(fit = FALSE))) %\u003e% \n  bb_point(r = 8)\n\n```\n![](man/figures/scatterchart0.png)\n\n\nYou can make a bubble chart using `size` aes : \n\n```r\nbillboarder() %\u003e% \n  bb_scatterplot(\n    data = penguins, \n    mapping = bbaes(\n      bill_length_mm, flipper_length_mm, group = species,\n      size = scales::rescale(body_mass_g, c(1, 100))\n    )\n  ) %\u003e% \n  bb_bubble(maxR = 25) %\u003e% \n  bb_x_axis(tick = list(fit = FALSE))\n```\n\n![](man/figures/scatter_bubble.png)\n\n\n## Pie / Donut charts\n\n```r\nlibrary(\"billboarder\")\n\n# data\ndata(\"prod_par_filiere\")\nnuclear2016 \u003c- data.frame(\n  sources = c(\"Nuclear\", \"Other\"),\n  production = c(\n    prod_par_filiere$prod_nucleaire[prod_par_filiere$annee == \"2016\"],\n    prod_par_filiere$prod_total[prod_par_filiere$annee == \"2016\"] -\n      prod_par_filiere$prod_nucleaire[prod_par_filiere$annee == \"2016\"]\n  )\n)\n\n# pie chart !\nbillboarder() %\u003e% \n  bb_piechart(data = nuclear2016) %\u003e% \n  bb_labs(title = \"Share of nuclear power in France in 2016\",\n          caption = \"Data source: RTE (https://opendata.rte-france.com)\")\n```\n![](man/figures/rte_piechart.png)\n\n\n## Lines charts\n\n### Time serie with `Date` (and a subchart)\n\n```r\nlibrary(\"billboarder\")\n\n# data\ndata(\"equilibre_mensuel\")\n\n# line chart\nbillboarder() %\u003e% \n  bb_linechart(\n    data = equilibre_mensuel[, c(\"date\", \"consommation\", \"production\")], \n    type = \"spline\"\n  ) %\u003e% \n  bb_x_axis(tick = list(format = \"%Y-%m\", fit = FALSE)) %\u003e% \n  bb_x_grid(show = TRUE) %\u003e% \n  bb_y_grid(show = TRUE) %\u003e% \n  bb_colors_manual(\"consommation\" = \"firebrick\", \"production\" = \"forestgreen\") %\u003e% \n  bb_legend(position = \"right\") %\u003e% \n  bb_subchart(show = TRUE, size = list(height = 30)) %\u003e% \n  bb_labs(title = \"Monthly electricity consumption and production in France (2007 - 2017)\",\n          y = \"In megawatt (MW)\",\n          caption = \"Data source: RTE (https://opendata.rte-france.com)\")\n```\n\n![](man/figures/lines-subchart.gif)\n\n\n### Zoom by dragging\n\n```r\nbillboarder() %\u003e% \n  bb_linechart(\n    data = equilibre_mensuel[, c(\"date\", \"consommation\", \"production\")], \n    type = \"spline\"\n  ) %\u003e% \n  bb_x_axis(tick = list(format = \"%Y-%m\", fit = FALSE)) %\u003e% \n  bb_x_grid(show = TRUE) %\u003e% \n  bb_y_grid(show = TRUE) %\u003e% \n  bb_colors_manual(\"consommation\" = \"firebrick\", \"production\" = \"forestgreen\") %\u003e% \n  bb_legend(position = \"right\") %\u003e% \n  bb_zoom(\n    enabled = TRUE,\n    type = \"drag\",\n    resetButton = list(text = \"Unzoom\")\n  ) %\u003e% \n  bb_labs(title = \"Monthly electricity consumption and production in France (2007 - 2017)\",\n          y = \"In megawatt (MW)\",\n          caption = \"Data source: RTE (https://opendata.rte-france.com)\")\n```\n![](man/figures/lines-zoom-drag.gif)\n\n\n### Time serie with `POSIXct` (and regions)\n\n```r\nlibrary(\"billboarder\")\n\n# data\ndata(\"cdc_prod_filiere\")\n\n# Retrieve sunrise and and sunset data with `suncalc`\nlibrary(\"suncalc\")\nsun \u003c- getSunlightTimes(date = as.Date(\"2017-06-12\"), lat = 48.86, lon = 2.34, tz = \"CET\")\n\n\n# line chart\nbillboarder() %\u003e% \n  bb_linechart(data = cdc_prod_filiere[, c(\"date_heure\", \"prod_solaire\")]) %\u003e% \n  bb_x_axis(tick = list(format = \"%H:%M\", fit = FALSE)) %\u003e% \n  bb_y_axis(min = 0, padding = 0) %\u003e% \n  bb_regions(\n    list(\n      start = as.numeric(cdc_prod_filiere$date_heure[1]) * 1000,\n      end = as.numeric(sun$sunrise)*1000\n    ), \n    list(\n      start = as.numeric(sun$sunset) * 1000, \n      end = as.numeric(cdc_prod_filiere$date_heure[48]) * 1000\n    )\n  ) %\u003e% \n  bb_x_grid(\n    lines = list(\n      list(value = as.numeric(sun$sunrise)*1000, text = \"sunrise\"),\n      list(value = as.numeric(sun$sunset)*1000, text = \"sunset\")\n    )\n  ) %\u003e% \n  bb_labs(title = \"Solar production (2017-06-12)\",\n          y = \"In megawatt (MW)\",\n          caption = \"Data source: RTE (https://opendata.rte-france.com)\")\n```\n\n![](man/figures/rte_linechart_regions.png)\n\n\n### Stacked area chart\n\n```r\nlibrary(\"billboarder\")\n\n# data\ndata(\"cdc_prod_filiere\")\n\n# area chart !\nbillboarder() %\u003e% \n  bb_linechart(\n    data = cdc_prod_filiere[, c(\"date_heure\", \"prod_eolien\", \"prod_hydraulique\", \"prod_solaire\")], \n    type = \"area\"\n  ) %\u003e% \n  bb_data(\n    groups = list(list(\"prod_eolien\", \"prod_hydraulique\", \"prod_solaire\")),\n    names = list(\"prod_eolien\" = \"Wind\", \"prod_hydraulique\" = \"Hydraulic\", \"prod_solaire\" = \"Solar\")\n  ) %\u003e% \n  bb_legend(position = \"inset\", inset = list(anchor = \"top-right\")) %\u003e% \n  bb_colors_manual(\n    \"prod_eolien\" = \"#238443\", \"prod_hydraulique\" = \"#225EA8\", \"prod_solaire\" = \"#FEB24C\", \n    opacity = 0.8\n  ) %\u003e% \n  bb_y_axis(min = 0, padding = 0) %\u003e% \n  bb_labs(title = \"Renewable energy production (2017-06-12)\",\n          y = \"In megawatt (MW)\",\n          caption = \"Data source: RTE (https://opendata.rte-france.com)\")\n```\n\n![](man/figures/rte_linechart_area.png)\n\n\n\n### Line range\n\n```r\n# Generate data\ndat \u003c- data.frame(\n  date = seq.Date(Sys.Date(), length.out = 20, by = \"day\"),\n  y1 = round(rnorm(20, 100, 15)),\n  y2 = round(rnorm(20, 100, 15))\n)\ndat$ymin1 \u003c- dat$y1 - 5\ndat$ymax1 \u003c- dat$y1 + 5\n\ndat$ymin2 \u003c- dat$y2 - sample(3:15, 20, TRUE)\ndat$ymax2 \u003c- dat$y2 + sample(3:15, 20, TRUE)\n\n\n# Make chart : use ymin \u0026 ymax aes for range\nbillboarder(data = dat) %\u003e% \n  bb_linechart(\n    mapping = bbaes(x = date, y = y1, ymin = ymin1, ymax = ymax1),\n    type = \"area-line-range\"\n  ) %\u003e% \n  bb_linechart(\n    mapping = bbaes(x = date, y = y2, ymin = ymin2, ymax = ymax2), \n    type = \"area-spline-range\"\n  ) %\u003e% \n  bb_y_axis(min = 50)\n```\n\n![](man/figures/linechart_range.png)\n\n\n## Histogram \u0026 density\n\n```r\nbillboarder() %\u003e%\n  bb_histogram(data = rnorm(1e5), binwidth = 0.25) %\u003e%\n  bb_colors_manual()\n```\n![](man/figures/histogram.png)\n\nWith a grouping variable :\n\n```r\n# Generate some data\ndat \u003c- data.frame(\n  sample = c(rnorm(n = 1e4, mean = 1), rnorm(n = 1e4, mean = 2)),\n  group = rep(c(\"A\", \"B\"), each = 1e4), stringsAsFactors = FALSE\n)\n# Mean by groups\nsamples_mean \u003c- tapply(dat$sample, dat$group, mean)\n# histogram !\nbillboarder() %\u003e%\n  bb_histogram(data = dat, x = \"sample\", group = \"group\", binwidth = 0.25) %\u003e%\n  bb_x_grid(\n    lines = list(\n      list(value = unname(samples_mean['A']), text = \"mean of sample A\"),\n      list(value = unname(samples_mean['B']), text = \"mean of sample B\")\n    )\n  )\n```\n![](man/figures/histogram2.png)\n\n\nDensity plot with the same data :\n\n```r\nbillboarder() %\u003e%\n  bb_densityplot(data = dat, x = \"sample\", group = \"group\") %\u003e%\n  bb_x_grid(\n    lines = list(\n      list(value = unname(samples_mean['A']), text = \"mean of sample A\"),\n      list(value = unname(samples_mean['B']), text = \"mean of sample B\")\n    )\n  )\n```\n![](man/figures/density.png)\n\n\n\n## Shiny interaction\n\nSome events will trigger Shiny's inputs in application, such as click. Inputs id associated with `billboarder` charts use this pattern :\n\n```r\ninput$CHARTID_EVENT\n```\n\nLook at this example, chart id is `mybbchart` so you retrieve click with `input$mybbchart_click` :\n\n```r\nlibrary(\"shiny\")\nlibrary(\"billboarder\")\n\n# data\ndata(\"prod_par_filiere\")\nprod_par_filiere_l \u003c- reshape2::melt(data = prod_par_filiere)\nprod_par_filiere_l \u003c- prod_par_filiere_l[\n  with(prod_par_filiere_l, annee == \"2016\" \u0026 variable != \"prod_total\"), 2:3\n]\nprod_par_filiere_l \u003c- prod_par_filiere_l[order(prod_par_filiere_l$value), ]\n\n\n# app\nui \u003c- fluidPage(\n  billboarderOutput(outputId = \"mybbchart\"),\n  br(),\n  verbatimTextOutput(outputId = \"click\")\n)\n\nserver \u003c- function(input, output, session) {\n  \n  output$mybbchart \u003c- renderBillboarder({\n    billboarder() %\u003e%\n      bb_barchart(data = prod_par_filiere_l) %\u003e% \n      bb_y_grid(show = TRUE) %\u003e% \n      bb_legend(show = FALSE) %\u003e%\n      bb_x_axis(categories = prod_par_filiere_l$variable, fit = FALSE) %\u003e% \n      bb_labs(title = \"French electricity generation by branch in 2016\",\n              y = \"production (in terawatt-hours)\",\n              caption = \"Data source: RTE (https://opendata.rte-france.com)\")\n  })\n  \n  output$click \u003c- renderPrint({\n    cat(\"# input$mybbchart_click$category\", \"\\n\")\n    input$mybbchart_click$category\n  })\n  \n}\n\nshinyApp(ui = ui, server = server)\n```\n\n![](man/figures/shiny_click.png)\n\n\n## Proxy\n\nYou can modify existing charts with function `billboarderProxy` :\n![](man/figures/billboarder_proxy.gif)\n\nTo see examples, run : \n\n```r\nlibrary(\"billboarder\")\nproxy_example(\"bar\")\nproxy_example(\"line\")\nproxy_example(\"pie\")\nproxy_example(\"gauge\")\n```\n\n\n## Raw API\n\nIf you wish, you can build graphs using a `list` syntax :\n\n```r\ndata(economics, package = \"ggplot2\")\n\n# Construct a list in JSON format\nparams \u003c- list(\n  data = list(\n    x = \"x\",\n    json = list(\n      x = economics$date,\n      y = economics$psavert\n    ),\n    type = \"spline\"\n  ),\n  legend = list(show = FALSE),\n  point = list(show = FALSE),\n  axis = list(\n    x = list(\n      type = \"timeseries\",\n      tick = list(\n        count = 20,\n        fit = TRUE,\n        format = \"%e %b %y\"\n      )\n    ),\n    y = list(\n      label = list(\n        text = \"Personal savings rate\"\n      ),\n      tick = list(\n        format = htmlwidgets::JS(\"function(x) {return x + '%';}\")\n      )\n    )\n  )\n)\n\n# Pass the list as parameter\nbillboarder(params)\n```\n\n![](man/figures/linechart0.png)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FdreamRs%2Fbillboarder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FdreamRs%2Fbillboarder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FdreamRs%2Fbillboarder/lists"}