All Projects → timelyportfolio → dataui

timelyportfolio / dataui

Licence: Unknown, MIT licenses found Licenses found Unknown LICENSE MIT LICENSE.md
data-ui for R

Programming Languages

r
7636 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to dataui

Sunburstr
R htmlwidget for interactive sunburst plots
Stars: ✭ 177 (+210.53%)
Mutual labels:  interactive, htmlwidgets
React-Native-Interactive-Card
Interactive Card Component for React Native
Stars: ✭ 29 (-49.12%)
Mutual labels:  interactive
augmath
Interactive Computer Algebra System. Augmenting how we *do* mathematics using computers
Stars: ✭ 41 (-28.07%)
Mutual labels:  interactive
ScalaTIKZ
ScalaTIKZ is an open-source library for PGF/TIKZ vector graphics.
Stars: ✭ 18 (-68.42%)
Mutual labels:  plots
idlejs
Execute stuff when user is idle or interactive
Stars: ✭ 35 (-38.6%)
Mutual labels:  interactive
ESPShaker
ESP8266 interactive serial command processor via Arduino core.
Stars: ✭ 24 (-57.89%)
Mutual labels:  interactive
npm-interactive-scripts
⚡️Fast Interactive CLI for npm scripts
Stars: ✭ 17 (-70.18%)
Mutual labels:  interactive
vector
A javascript library for creating interactive graphics.
Stars: ✭ 154 (+170.18%)
Mutual labels:  interactive
microbium-app
Draw new worlds
Stars: ✭ 89 (+56.14%)
Mutual labels:  interactive
lore
WebGL engine for (big) data visualization.
Stars: ✭ 24 (-57.89%)
Mutual labels:  interactive
mathcell
Interactive mathematics in the browser
Stars: ✭ 34 (-40.35%)
Mutual labels:  interactive
lumo
A high performance WebGL tile rendering library
Stars: ✭ 58 (+1.75%)
Mutual labels:  interactive
allolib
Library for interactive multimedia application development
Stars: ✭ 23 (-59.65%)
Mutual labels:  interactive
muxnect
Send input to just about any interactive command-line tool through a local web server
Stars: ✭ 23 (-59.65%)
Mutual labels:  interactive
learn
RECON learn: a free, open platform for training material on epidemics analysis
Stars: ✭ 33 (-42.11%)
Mutual labels:  htmlwidgets
vueR
vue.js for R
Stars: ✭ 131 (+129.82%)
Mutual labels:  htmlwidgets
rspark
▁▂▆▇▁▄█▁ Sparklines for Rust apps
Stars: ✭ 50 (-12.28%)
Mutual labels:  sparklines
kingslayer
A text-based adventure written in Rust
Stars: ✭ 28 (-50.88%)
Mutual labels:  interactive
SwiftCharts
Easy to use and highly customizable charts library for iOS
Stars: ✭ 2,405 (+4119.3%)
Mutual labels:  plots
jsfiddle-github
JSFiddle implementation for interactive JavaScript examples.
Stars: ✭ 16 (-71.93%)
Mutual labels:  interactive

dataui

CRAN status Lifecycle: experimental Travis build status

dataui brings the beautiful interactive visualizations of data-ui based on vx to R. Currently the package nearly fully supports sparkline and histogram, and no you do not need to know React. You will be writing React without even knowing it.

Yes, I know data-ui is in repo freeze, but I could not wait for #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 in R is a little old and tired (but I still very much appreciate the library) and has been frozen/unmaintained for many years.

Credits

Thanks so much to Dr. Ken Steif at Urban Spatial for sponsoring the first phase of this project and inspiring its inception.

Help

I 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.

Installation

Far from CRAN-worthy but hopefully there eventually, remotes::install_github() for now.

remotes::install_github("timelyportfolio/dataui")

Articles and Vignettes

I have prioritized vignettes and articles over proper documentation for now.

Replicate data-ui Examples

dataui and reactable

Tufte in R with dataui

Examples

Sparklines

This is is the shortest code example I could create.

library(dataui)
dui_sparkline(
  data = rnorm(50),
  components = list(dui_sparklineseries())
)

I was able to nearly fully replicate all the data-ui sparkline examples. See the vignette.

Histogram

Currently there are some examples in experiments.R. I should also note that dataui histograms also work very well as sparklines.

Below is a quick example.

library(dataui)

rn <- rnorm(1000)
ri <- runif(1000)

dui_histogram(
  binCount = 25,
  components = list(
    dui_barseries(rawData = rn, fill="#000"),
    dui_densityseries(rawData = rn, stroke = "#000"),
    dui_barseries(rawData = ri),
    dui_densityseries(rawData = ri),
    dui_xaxis(),
    dui_yaxis()
  )
)

reactable

And thanks to the fine work of Greg Lin, dataui just works with 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.

library(dataui)
library(dplyr)
library(reactable)

data <- chickwts %>%
  group_by(feed) %>%
  summarise(weight = list(weight))

binValues = hist(chickwts$weight, breaks=15, plot = FALSE)$breaks

fillColors = scales::brewer_pal(type="qual", palette="Set2")(8)

reactable(
  data,
  columns = list(
    feed = colDef(maxWidth = 100),
    weight = colDef(
      minWidth = 400,
      cell = function(values, index) {
        dui_histogram(
          height = 200,
          width = 400,
          binValues = binValues,
          renderTooltip = htmlwidgets::JS(htmltools::HTML('
function (_ref) {
  var event = _ref.event,
      datum = _ref.datum,
      data = _ref.data,
      color = _ref.color;
  return React.createElement(
    "div",
    null,
    React.createElement(
      "strong",
      { style: { color: color } },
      datum.bin0,
      " to ",
      datum.bin1
    ),
    React.createElement(
      "div",
      null,
      React.createElement(
        "strong",
        null,
        "count "
      ),
      datum.count
    ),
    React.createElement(
      "div",
      null,
      React.createElement(
        "strong",
        null,
        "cumulative "
      ),
      datum.cumulative.toFixed(0)
    ),
    React.createElement(
      "div",
      null,
      React.createElement(
        "strong",
        null,
        "density "
      ),
      datum.density.toFixed(0)
    )
  );
}
          ')),
# reactR::babel_transform equivalent of the above
#            htmlwidgets::JS(reactR::babel_transform("
#{({ event, datum, data, color }) => (
#  <div>
#    <strong style={{ color }}>{datum.bin0} to {datum.bin1}</strong>
#    <div><strong>count </strong>{datum.count}</div>
#    <div><strong>cumulative </strong>{datum.cumulative.toFixed(0)}</div>
#    <div><strong>density </strong>{datum.density.toFixed(0)}</div>
#  </div>
#)}
#          ")),
          components = list(
            dui_barseries(rawData = values, fill = fillColors[index]),
            dui_densityseries(rawData = values, stroke = fillColors[index], fill = fillColors[index]),
            dui_xaxis()
          )
        )
      }
    )
  ),
  width = 600
)

If you use dataui in the wild, let me know and I will save a spot here for you.

Code of Conduct

Please note that the ‘dataui’ project is released with a Contributor Code of Conduct. By contributing to this project, you agree to abide by its terms.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].