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?
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!
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.
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.
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:
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.