{"id":13735856,"url":"https://github.com/timelyportfolio/dataui","last_synced_at":"2025-04-09T21:21:57.767Z","repository":{"id":42779444,"uuid":"275285035","full_name":"timelyportfolio/dataui","owner":"timelyportfolio","description":"data-ui for R","archived":false,"fork":false,"pushed_at":"2024-11-20T17:56:27.000Z","size":1672,"stargazers_count":76,"open_issues_count":8,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-02T19:08:13.781Z","etag":null,"topics":["data-ui","htmlwidgets","interactive","plots","r","react","reactjs","sparklines","svg","visualization","vx"],"latest_commit_sha":null,"homepage":"https://timelyportfolio.github.io/dataui/","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/timelyportfolio.png","metadata":{"files":{"readme":"README.Rmd","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2020-06-27T02:26:36.000Z","updated_at":"2024-12-11T06:25:12.000Z","dependencies_parsed_at":"2024-10-27T11:16:17.379Z","dependency_job_id":"0351f012-e249-4e12-a367-9de4813e4279","html_url":"https://github.com/timelyportfolio/dataui","commit_stats":{"total_commits":54,"total_committers":1,"mean_commits":54.0,"dds":0.0,"last_synced_commit":"39583c661edddb44214a269aed5393ba91b2789d"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timelyportfolio%2Fdataui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timelyportfolio%2Fdataui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timelyportfolio%2Fdataui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timelyportfolio%2Fdataui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/timelyportfolio","download_url":"https://codeload.github.com/timelyportfolio/dataui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248112587,"owners_count":21049675,"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-ui","htmlwidgets","interactive","plots","r","react","reactjs","sparklines","svg","visualization","vx"],"created_at":"2024-08-03T03:01:12.145Z","updated_at":"2025-04-09T21:21:57.740Z","avatar_url":"https://github.com/timelyportfolio.png","language":"R","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# dataui\n\n\u003c!-- badges: start --\u003e\n[![CRAN status](https://www.r-pkg.org/badges/version/dataui)](https://CRAN.R-project.org/package=dataui)\n[![Lifecycle: experimental](https://img.shields.io/badge/lifecycle-experimental-orange.svg)](https://www.tidyverse.org/lifecycle/#experimental)\n[![Travis build status](https://travis-ci.org/timelyportfolio/dataui.svg?branch=master)](https://travis-ci.org/timelyportfolio/dataui)\n\u003c!-- badges: end --\u003e\n\n`dataui` brings the beautiful interactive visualizations of [`data-ui`](https://williaster.github.io/data-ui) based on [`vx`](https://vx-demo.now.sh/) to **R**.  Currently the package nearly fully supports [`sparkline`](https://williaster.github.io/data-ui/?selectedKind=sparkline\u0026selectedStory=Kitchen%20sink\u0026full=0\u0026addons=0\u0026stories=1\u0026panelRight=0) and [`histogram`](https://williaster.github.io/data-ui/?selectedKind=histogram\u0026selectedStory=Playground\u0026full=0\u0026addons=0\u0026stories=1\u0026panelRight=0), and no you do **not** need to know `React`.  You will be writing `React` without even knowing it.\n\nYes, I know `data-ui` is in [repo freeze](https://github.com/williaster/data-ui#repo-freeze-), but I could not wait for [#201](https://github.com/williaster/data-ui/issues/201).  The author, now also on the `vx` team, has done an incredible job, so I am willing (slightly crazy) to invest the time to write this package.  Plus, I sort of \"need\" it for a live project.  Our other  [sparkline](https://omnipotent.net/jquery.sparkline/#s-about) in R is a little old and tired (but I still very much appreciate the library) and has been frozen/unmaintained for many years.\n\n## Credits\n\nThanks so much to Dr. Ken Steif at [Urban Spatial](http://urbanspatialanalysis.com/about/) for sponsoring the first phase of this project and inspiring its inception.\n\n## Help\n\nI would love for you to join me on the journey, and I will make sure that this is a friendly and welcoming place.  If money is more abundant than time for you, then let me know as well.  \n\n## Installation\n\nFar from CRAN-worthy but hopefully there eventually, `remotes::install_github()` for now.\n\n``` r\nremotes::install_github(\"timelyportfolio/dataui\")\n```\n\n## Articles and Vignettes\n\nI have prioritized vignettes and articles over proper documentation for now.\n\n[Replicate data-ui Examples](https://timelyportfolio.github.io/dataui/articles/dataui_replicate_examples.html)\n\n[dataui and reactable](https://timelyportfolio.github.io/dataui/articles/dataui_reactable.html)\n\n[Tufte in R with dataui](https://timelyportfolio.github.io/dataui/articles/replicate_tufte_example.html)\n\n## Examples\n\n\n#### Sparklines \n\nThis is is the shortest code example I could create.\n\n```\nlibrary(dataui)\ndui_sparkline(\n  data = rnorm(50),\n  components = list(dui_sparklineseries())\n)\n```\n\nI was able to nearly fully replicate all the `data-ui` sparkline examples.  See the [vignette](https://timelyportfolio.github.io/dataui/articles/dataui_replicate_examples.html).\n\n#### Histogram\n\nCurrently there are some examples in [experiments.R](https://github.com/timelyportfolio/dataui/blob/master/inst/examples/experiments.R).  I should also note that `dataui` histograms also work very well as sparklines.\n\nBelow is a quick example.\n\n```\nlibrary(dataui)\n\nrn \u003c- rnorm(1000)\nri \u003c- runif(1000)\n\ndui_histogram(\n  binCount = 25,\n  components = list(\n    dui_barseries(rawData = rn, fill=\"#000\"),\n    dui_densityseries(rawData = rn, stroke = \"#000\"),\n    dui_barseries(rawData = ri),\n    dui_densityseries(rawData = ri),\n    dui_xaxis(),\n    dui_yaxis()\n  )\n)\n```\n\n#### reactable\n\nAnd thanks to the fine work of Greg Lin, `dataui` just works with [`reactable`](https://glin.github.io/reactable/).  I would still like to tighten up the integration though, since the data gets duplicated in multiple spots.  Here is a quick example to prove it.  `dataui` should also work relatively well with other `R` table libraries.\n\n```\nlibrary(dataui)\nlibrary(dplyr)\nlibrary(reactable)\n\ndata \u003c- chickwts %\u003e%\n  group_by(feed) %\u003e%\n  summarise(weight = list(weight))\n\nbinValues = hist(chickwts$weight, breaks=15, plot = FALSE)$breaks\n\nfillColors = scales::brewer_pal(type=\"qual\", palette=\"Set2\")(8)\n\nreactable(\n  data,\n  columns = list(\n    feed = colDef(maxWidth = 100),\n    weight = colDef(\n      minWidth = 400,\n      cell = function(values, index) {\n        dui_histogram(\n          height = 200,\n          width = 400,\n          binValues = binValues,\n          renderTooltip = htmlwidgets::JS(htmltools::HTML('\nfunction (_ref) {\n  var event = _ref.event,\n      datum = _ref.datum,\n      data = _ref.data,\n      color = _ref.color;\n  return React.createElement(\n    \"div\",\n    null,\n    React.createElement(\n      \"strong\",\n      { style: { color: color } },\n      datum.bin0,\n      \" to \",\n      datum.bin1\n    ),\n    React.createElement(\n      \"div\",\n      null,\n      React.createElement(\n        \"strong\",\n        null,\n        \"count \"\n      ),\n      datum.count\n    ),\n    React.createElement(\n      \"div\",\n      null,\n      React.createElement(\n        \"strong\",\n        null,\n        \"cumulative \"\n      ),\n      datum.cumulative.toFixed(0)\n    ),\n    React.createElement(\n      \"div\",\n      null,\n      React.createElement(\n        \"strong\",\n        null,\n        \"density \"\n      ),\n      datum.density.toFixed(0)\n    )\n  );\n}\n          ')),\n# reactR::babel_transform equivalent of the above\n#            htmlwidgets::JS(reactR::babel_transform(\"\n#{({ event, datum, data, color }) =\u003e (\n#  \u003cdiv\u003e\n#    \u003cstrong style={{ color }}\u003e{datum.bin0} to {datum.bin1}\u003c/strong\u003e\n#    \u003cdiv\u003e\u003cstrong\u003ecount \u003c/strong\u003e{datum.count}\u003c/div\u003e\n#    \u003cdiv\u003e\u003cstrong\u003ecumulative \u003c/strong\u003e{datum.cumulative.toFixed(0)}\u003c/div\u003e\n#    \u003cdiv\u003e\u003cstrong\u003edensity \u003c/strong\u003e{datum.density.toFixed(0)}\u003c/div\u003e\n#  \u003c/div\u003e\n#)}\n#          \")),\n          components = list(\n            dui_barseries(rawData = values, fill = fillColors[index]),\n            dui_densityseries(rawData = values, stroke = fillColors[index], fill = fillColors[index]),\n            dui_xaxis()\n          )\n        )\n      }\n    )\n  ),\n  width = 600\n)\n\n```\n\nIf you use `dataui` in the wild, let me know and I will save a spot here for you.\n\n## Code of Conduct\n\nPlease note that the 'dataui' project is released with a\n[Contributor Code of Conduct](https://github.com/timelyportfolio/dataui/blob/master/CODE_OF_CONDUCT.md).\nBy contributing to this project, you agree to abide by its terms.\n","funding_links":[],"categories":["R","Visualization"],"sub_categories":["Sparkline"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimelyportfolio%2Fdataui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimelyportfolio%2Fdataui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimelyportfolio%2Fdataui/lists"}