How would I miss to program just a little bit during the holiday season? But I didn’t want to work on something serious, so I decided to checkout some ground work on R-Shiny + JQuery + CSS. The result are some nice holiday greetings inside a shiny app:

I just googled CSS + holidays and what I found was this article on CSS for the holidays. The Pixel Art Christmas Tree I found from dodozhang21 really amazed me. But it was missing some shiny features. So I thought why not make it a custom shiny output? I was already writing about custom shiny inputs but never on custom shiny outputs.

Actually, the tree is kind of easy. I found that 83 rows of the CSS file account for the moving pixels of the tree as CSS keyframes. There are 5 keyframes (0% , 25%, 50%, 75%, 100% of the animation). So I read them as data.frames in R. Then I sampled X colors for the number of balls the user wants to find in the tree and replaced X of the 83 rows in 5 data frames. Then I put everything back into HTML by:

glue("$('head').append(\"<style>{style_css}</style>\");")

where glue is the R package that will replace style_css by the CSS I created from my 5 data frames.

To see the whole code, you can go to github.

You think this is not as easy as I thought? Then just get started with R and find the “Jamie” in your company that knows R.

Happy Holidays!

Very shiny holidays!

Very shiny holidays! was originally published in Towards Data Science on Medium, where people are continuing the conversation by highlighting and responding to this story.