microsoft / datamations

https://microsoft.github.io/datamations/
Other
67 stars 14 forks source link

Investigate vegalite in a Shiny app #29

Closed jhofman closed 3 years ago

jhofman commented 3 years ago

Related to #27, how feasible is it to render a vegalite plot inside of a Shiny app?

To check this out, let's try a simple Shiny app with a dropdown that lets you choose between a bar chart and a colored bar chart.

The JSON can be hard-coded in. If successful hopefully we can port to a working datamation version that mirrors something like this.

sharlagelfand commented 3 years ago

Here's a super basic app that lets you choose between the bar and colored bar charts: https://sharlagelfand.shinyapps.io/vegalite/ (and the code)

Everything is pretty hard coded, but I imagine as we go forward (in general, not just with Shiny) will need to make this into an html widget, which is what r2d3, leaflet, vegawidget, etc all use

jhofman commented 3 years ago

Awesome!

Can you point @giorgi-ghviniashvili to your favorite "intro to Shiny apps" resource(s)?

sharlagelfand commented 3 years ago

Definitely! @giorgi-ghviniashvili, the Mastering Shiny book is really awesome for foundational information, especially on how much (all?) of Shiny is just HTML, CSS, and javascript under the hood :) For tutorial-style, I like RStudio's materials starting here

jhofman commented 3 years ago

@sharlagelfand, just making some notes from our chat.

next up here is to try changing to an html widget so we can see how passing data goes. for instance, making the drop-down be a selection between one of two different datasets, and then doing a simple plot based on the dataset that's selected.

also, you mentioned that the javascript for r book might be useful.

sharlagelfand commented 3 years ago

I have a working prototype! 🎉 Will see if I can figure out deploying easily (a bit complicated with the structure required by htmlwidgets / having an app embedded in the package) but otherwise will demo quickly on our call tomorrow.

jhofman commented 3 years ago

prototype looked great. can you commit and post a link?

next step we discussed was to add a text box that takes tidyverse analysis code as input and produces vegalist specs as json for each step somewhere else on the page. (could simply print them all out for now.) then if we can render those specs in the page after that we'd have a nice working version of what could become the datamation editor as per #27.

also, at some point it would be great to document the "flow" of things going from R to javascript to vega, etc.

sharlagelfand commented 3 years ago

Deployed app is here! Will update that link from now on. The app code is here, with the widget defined here and all the javascript + dependencies here. I'll work on documenting the R -> JS etc flow as well.

Working on modularizing the app too in order to export vegalite specs for each stage, which we can then put into a shiny app!

sharlagelfand commented 3 years ago

Super rough draft, but updated here is a Shiny app that lets you select a data set, as well as variables to group by, summary variable, and summary function. Figured it's a little safer right now to force the selection of groups/summary variables rather than parse free text input.

It ended up easier to render the plots rather than output the actual JSON specs, but I'll continue iterating on this. Also using the existing grouping of colour -> shape, and plots are cramped, etc etc, but for a proof of concept on the stages spec output and Shiny side!

jhofman commented 3 years ago

this is great, very nice!

@giorgi-ghviniashvili, next step would be to incorporate your code to datamate the different frames. we can discuss the next time we chat.

sharlagelfand commented 3 years ago

We indeed have the app working, so I'll close this!