Moving DOM Elements in Shiny

As a Shiny web developer it’s really common to leverage existing packages to create your HTML. But what if a package gets you 90% of where you want to go, and you want to customize it a little? In this tutorial I give a default DT table a small makeover by combining the datatable’s dataTables_length element and the datatables `dataTables_info element. How did I find the names of these elements?

Skip Links

I took Jon Kuperman’s amazing accessibility intro course on Frontend Masters and one of the coolest things he demonstrated was how to create a skip link. Skip links allow a keyboard only user to tab directly to the content of a page, rather than first tab through the page’s entire menu. In this post, I wanted to share what I learned as it applies to Shiny!

R Functions I Took for Granted

I’m always trying to sharpen my JavaScript skills and I thought a good way of doing this would be to turn some dataframes I had lying around into JavaScript arrays of objects. What resulted is a love letter to the little R functions that are in actuality powerhouses and make our lives so easy because the best way I’ve seen to write these in JavaScript is, well, cray.

Recursion Again.... and Again.... and Again

I’ve gotten pretty far in the past year and a half or so of my limited JavaScript knowledge, but I still have some glaring gaps that I’d like to address. My familiarity with recursive functions ends after the classic Fibonacci sequence or counter example. I found myself asking okay but when am I actually going to use this? There must be a time were recursion will shine and I can’t just brute force my way through with a for loop….

GSAP & Xaringan

Greensock is a JavaScript library that lets you animate DOM elements. I’ve honestly learned everything I know about GSAP from their 20 minute tutorial video and trial and error. Here I’ll go over the three steps needed to animate an element of your Xaringan slides: Import the Greensock CDN into the head of your slide html Create the elements you want to animate in markdown Create a JavaScript file with the GSAP code to make those elements move.

D3 to R to D3

I can’t tell you how many times I’ve tried to “learn” d3.js. I end up making it maybe a third of the way through a book before giving up and just looking through bl.ocks or Observable Notebooks because I want to make a plot now, not once I’ve read a text book. I’m writing this blog post because I am absolutely in LOVE with Amelia Wattenberger’s Fullstack Data Visualization with D3.

Being Trendy, Learning Svelte

Svelte is a compiler for creating reactive web applications. A reactive webapp reacts to data changes - it uses data when the state changes there is a reflection of that change in the browser. It bundles your JavaScript code into a single file for production without any extra scripts or libraries, resulting in a faster website! I’ve broken down this introduction into 8 pieces: Step 1: Create a template Step 2: Edit the template Step 3: Understanding components Step 4: Understanding main.

Wait... What's a ViewBox?

I’m reading Sarah Drasner’s SVG Animations book and thought that blogging a summary of each chapter will help cement what I learn… but then went down a viewbox rabbit hole trying to understand the anatomy of an SVG. An Example The book starts off with an <svg> element which has x where to start the svg canvass x coordinate y where to start the svg canvass y coordinate width where to end the svg canvass x coordinate height where to end the svg canvass y coordinate viewBox given the same attibutes as x, y, 450, 100 <svg x="0px" y="0px" width="450px" height="100px" viewBox="0 0 450 100"> <rect x="10" y="5" fill="white" stroke="black" width="90" height="90"/> <circle fill="white" stroke="black" cx="170" cy="50" r="45"/> <polygon fill="white" stroke="black" points="279,5 294,35 328,40 303,62 309,94 279,79 248,94 254,62 230,39 263,35"/> <line fill="none" stroke="black" x1="410" y1="95" x2="440" y2="6"/> <line fill="none" stroke="black" x1="360" y1="6" x2="360" y2="95"/> </svg> We see that the elements take up the height and width of our viewBox:

Introduction to Networks

table, caption, tbody, tfoot, thead, tr, th, td { padding: 3px; border: 0; outline: 0; font-size: 6px; background: transparent; color: black; margin-left: auto; margin-right: auto; width: 100%; } .node circle { stroke: black; stroke-width: 2px; color: black; } .node text { font-family: sans-serif; text-anchor: middle; pointer-events: none; user-select: none; -webkit-user-select: none; } .link { stroke-width: 4px; } text { font: 18px sans-serif; pointer-events: none; } #end-arrow { fill: #88A; } #scrolly { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 1rem; } #scrolly* { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } figure { position: -webkit-sticky; position: sticky; width: 100%; margin: 0; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 0; } figure p { text-align: center; padding: 1rem; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 8rem; font-weight: 900; } .

Custom Shiny Input

With a little bit of JQuery, the JavaScript function Shiny.setInputValue lets you take any HTML element and make it a Shiny input which I’ll display here using a div called all_circles which contains three circles. Think of all_circles as a widget like selectInput, the circles themselves would then be the same as setting choices. selectInput("inputID", "Name to Display", choices = c("Red Circle", "Yellow Circle", "Blue Circle")) Because we can envision use cases to be beyond clicking on simple shapes, I wanted to use SVGs, which was my first learning curve.