<p><div><div><div><div data-show-faces="false" data-height="21" data-width="100" data-layout="button_count" data-send="true" data-href="https://www.r-bloggers.com/very-shiny-holidays/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="https://towardsdatascience.com/very-shiny-holidays-5ee316fc7f84?source=rss-dbc9f652035a------2"> Stories by Sebastian Wolf on Medium</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p>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 <a rel="nofollow" href="https://sebastianwolf.shinyapps.io/shinyxmas/" target="_blank">shiny app</a>:</p>
<figure><img alt="" src="https://i1.wp.com/cdn-images-1.medium.com/max/1024/1*fw1Qwh_SZXcj-Mq_a9LAyA.jpeg?w=456&ssl=1" data-recalc-dims="1"><figcaption><a rel="nofollow" href="https://sebastianwolf.shinyapps.io/shinyxmas/" target="_blank">An app to greet your family with shiny</a></figcaption></figure>
<p>I just googled CSS + holidays and what I found was this article on <a rel="nofollow" href="https://bashooka.com/coding/25-cool-css-html5-christmas-animation-effects/" target="_blank">CSS for the holidays</a>. The Pixel Art Christmas Tree I found from <a rel="nofollow" href="https://codepen.io/dodozhang21/pen/imIvg" target="_blank">dodozhang21</a> 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 <a rel="nofollow" href="https://medium.com/@zappingseb/7-steps-that-make-custom-inputs-in-shiny-easy-504b303a2973" target="_blank">custom shiny inputs</a> but never on custom shiny outputs.</p>
<p>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 <strong>X</strong> colors for the number of balls the user wants to find in the tree and replaced <strong>X </strong>of the 83 rows in 5 data frames. Then I put everything back into HTML by:</p>
<pre>glue(&quot;$('head').append(\&quot;\&quot;);&quot;)</pre>
<p>where glue is the R package that will replace style_css by the CSS I created from my 5 data frames.</p>
<p>To see the whole code, you can go to <a rel="nofollow" href="https://github.com/zappingseb/shinyxmas" target="_blank">github</a>.</p>
<p>You think this is not as easy as I thought? <a rel="nofollow" href="https://medium.com/datadriveninvestor/how-to-get-people-r-ready-in-an-hour-thors-hammer-d8c853abaf0b" target="_blank">Then just get started with R</a> and find the “Jamie” in your company that knows R.</p>
<p>Happy Holidays!</p>
<p><a rel="nofollow" href="https://sebastianwolf.shinyapps.io/shinyxmas/" target="_blank">Very shiny holidays!</a></p>
<p><img width="1" src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=5ee316fc7f84" height="1"></p>
<hr>
<p><a rel="nofollow" href="https://towardsdatascience.com/very-shiny-holidays-5ee316fc7f84" target="_blank">Very shiny holidays!</a> was originally published in <a rel="nofollow" href="https://towardsdatascience.com/" target="_blank">Towards Data Science</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>
	<p>
<div>
<div>To <strong>leave a comment</strong> for the author, please follow the link and comment on their blog: <strong><a href="https://towardsdatascience.com/very-shiny-holidays-5ee316fc7f84?source=rss-dbc9f652035a------2"> Stories by Sebastian Wolf on Medium</a></strong>.</div>
<hr>
<a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers.com</a> offers <strong><a rel="nofollow" href="https://feedburner.google.com/fb/a/mailverify?uri=RBloggers">daily e-mail updates</a></strong> about <a rel="nofollow" href="https://www.r-project.org/" title="The R Project for Statistical Computing">R</a> news and <a rel="nofollow" href="https://www.r-bloggers.com/search/tutorial" title="R tutorials">tutorials</a> on topics such as: <a rel="nofollow" href="https://www.r-bloggers.com/search/data%20science" title="Data science">Data science</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Big%20Data" title="Big Data">Big Data, <a rel="nofollow" href="https://www.r-users.com/" title="R jobs">R jobs</a>, visualization (<a rel="nofollow" href="https://www.r-bloggers.com/search/ggplot2" title="ggplot and ggplot2 tutorials">ggplot2</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/boxplot" title="Boxplots using lattice and ggplot2 tutorials">Boxplots</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/map" title="Maps and gis">maps</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/animation" title="Animation in R">animation</a>), programming (<a rel="nofollow" href="https://www.r-bloggers.com/search/RStudio" title="RStudio IDE for R">RStudio</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/sweave" title="Sweave and literate programming">Sweave</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/LaTeX" title="LaTeX in R">LaTeX</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/SQL" title="SQL and databases">SQL</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/eclipse" title="Eclipse IDE for R">Eclipse</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/git" title="git and github, Version Control System">git</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/hadoop" title="Large data in R using Hadoop">hadoop</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Web+Scraping" title="Web Scraping of google, facebook, yahoo, twitter and more using R">Web Scraping</a>) statistics (<a rel="nofollow" href="https://www.r-bloggers.com/search/regression" title="Regressions and ANOVA analysis tutorials">regression</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/PCA" title="principal component analysis tutorial">PCA</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/time+series" title="Time series">time series</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/trading" title="finance trading">trading</a>) and more...
<img width="1" alt="" src="http://feeds.feedburner.com/~r/RBloggers/~4/34e4EoqsDgQ" height="1"></a></div>