Comments (11)
Moving the htmlwidgets discussion to here @jhofman @giorgi-ghviniashvili so it doesn't get lost in a conversation about Shiny apps.
I overwrote the bar chart shiny app with one that takes datamations frames, but here is how it works in a static R script (with info on how to install/run the app if you want)
library(dplyr)
library(palmerpenguins)
# Install code from branch (or just check it out)
# devtools::install_github("jhofman/datamations", ref = "vegalite-shiny")
library(datamations)
# Run app with
datamations::run_app()
# Or just see output
mtcars %>%
count(disp, name = "y") %>%
rename(x = disp) %>%
vegaliteBar()
penguins %>%
count(species, name = "y") %>%
rename(x = species) %>%
vegaliteBar()
To explain the htmlwidgets structure....
vegaliteBar()
is an R function defined inR/vegaliteBar.R
that takes the data as an argument and passes it immediately to the htmlwidgets framework to create a widget (named "vegaliteBar")inst/htmlwidgets/vegaliteBar.js
is part of this framework - it takes the data passed fromvegaliteBar()
, converts it to the correct format, calls thebarChart()
js function on that data, and then embeds it in the element. The structure of this file is all predetermined by thehtmlwidgets
framework. It is also named "vegaliteBar" which is how the R and JS functions are connected.inst/htmlwidgets/barChart/barChart.js
contains thebarChart()
function to actually create the vegalite bar chart from the data. This code is short enough that it could just be contained withinvegaliteBar.js
, but it'll probably be nice for us to separate out the code that creates the visualization from the code that creates the widget (above)inst/htmlwidgets/vegaliteBar.yaml
defines all of the dependencies for the widget. They are stores locally ininst/htmlwidgets/
When you call vegaliteBar()
, it renders the visualization in the RStudio viewer (a browser inside RStudio).
The ability to embed in a shiny app is just a given with the htmlwidgets structure - you create the widget with vegaliteBar()
, render it in the server function as a "vegaliteBar" type, then put the output as a vegaliteBar type output in the UI. This idea of "render in the server" and "output in the UI" is the same for all Shiny apps, and automatically provided by the htmlwidgets framework.
Hope that is clear! Let me know if there's any questions.
from datamations.
Sounds good! If you open the datamations.Rproj
file, in RStudio it will set the working directory to be datamations by default when you are in that project, rather than having to set it
from datamations.
It says that play()
function not defined. If you call play() directly after init() datamationSandDance.js it will play it.
from datamations.
thanks for the great explanation of how this works @sharlagelfand!
from datamations.
@sharlagelfand I just saw that you integrated my code into the shiny app in datamations-widget
branch. Could you please help me run that shiny app locally (without devtools::install_github("jhofman/datamations", ref = "datamations-widget"
)?
from datamations.
@giorgi-ghviniashvili I'm still working on it, it's not fully functional yet unfortunately! But good spot 😄
This is just a widget that will be viewable in the RStudio viewer pane, not yet in any shiny app.
You can see where it is at so far though by running:
devtools::load_all() # to load the latest version of the code
datamationSandDance("test") # doesn't matter what the message is since it's not used, but has to have something
You can open it in your browser by clicking the button outlined in red.
The animating doesn't work yet, but in case it's easier for you to inspect in the browser and figure out why than it would be for me, the HTML is defined here (this is what gives the div where the chart actually is a random ID) and the JS is all defined here.
from datamations.
Thanks! I just did not know about devtools::load_all()
, I set working directory to datamations
and then it worked.
Let me try to fix that widget or at least see how it works.
from datamations.
Have figured out getting the play()
button working in this widget! Updated code is in the datamations-widget
branch - note that the JS for the widget is quite small, and it mostly calls external functions that do all the work. I've also updated init()
and play()
to take an ID so that we could have multiple widgets on a page, and the button would operate on the correct widget.
So this code produces a widget which can be played via the button:
datamationSandDance()
Screen.Recording.2021-04-28.at.10.18.32.AM.mov
from datamations.
@sharlagelfand this PR includes the simplified version of js, only play button. Removed slider and dataset name.
from datamations.
This widget is in an app now, you can select which of the specs to animate. This will likely converge with #23 sooner rather than later to use @giorgi-ghviniashvili's generalized animation engine shown here, but just an update on where the "gemini in R" bits are at!
from datamations.
Closing this since I think the new issues cover what comes next.
from datamations.
Related Issues (20)
- Update Javascript documentation HOT 4
- Get python to parity with R updates HOT 1
- JS code as npm package and write unit tests HOT 1
- Clean up final error bars on zoom HOT 1
- Penguins example looks funny HOT 15
- Update package version to resolve dependabot security warning
- Penguins example breaks with 2 or 3 variables in shiny app HOT 2
- Find a spot for the updated shiny app HOT 1
- R-CMD-check workflow failing HOT 1
- This repo is missing important files
- ESLint workflow failing
- Pylint workflow failing HOT 1
- Implementation of Min and Max aggregation functions in JavaScript HOT 1
- Implementation of Sum and Product aggregation functions in JavaScript HOT 1
- Implementation of Count and Count Numbers aggregation functions in JavaScript HOT 1
- Implement Count and Quantile in Python
- Implement Min and Max in Python HOT 1
- Implement Sum and Product in Python HOT 1
- Respect factor orderings HOT 1
- Supported R version
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from datamations.