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.
Thanks so much to Dr. Ken Steif at Urban Spatial for sponsoring the first phase of this project and inspiring its inception.
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.
Far from CRAN-worthy but hopefully there eventually,
remotes::install_github() for now.
remotes::install_github("timelyportfolio/dataui")I have prioritized vignettes and articles over proper documentation for now.
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.
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()
)
)
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.
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent