Tutorial

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.

My First Live Coding Interview

Yesterday I interviewed for a position maintaining and creating ShinyApps. To call that a JOB is crazy to me. I love developing reactive web applications, the fact that you can get paid to do that is still mind blowing. I’m realizing that having fun at work is actually a possibility! That said, the data scientist position usually includes a live coding portion. I went into it trying to treat my first one as practice, but every second I didn’t spend typing spanned an eternity.

JavaScript Statements

Computers are awesome for their ability to execute instructions. I mean, do you want to perform repetitive, error prone, menial tasks? Personally, I don’t want to spend time processing data, I just want to analyze it and eventually make pretty graphs. To do this though, the computer needs instructions, and these instructions come in the form of a list of statements. In this post I want to go over the grammar of JavaScript statements.