Resources

Peter Gandenberger | Dashboard-Builder: Building Shiny Apps without writing any code | RStudio

I would like to create (more) Shiny Dashboards, but... • I don't know how • I can't write R code • it's too complex • I don't have enough time (even though I know how to build them) If this sounds familiar, this talk is for you. We present our latest project, the dashboard-builder that allows users to create full Shiny dashboards without writing a single line of code. You can find a demonstration video at https://youtu.be/oOKJLMAkEiw This drag&drop dashboard-builder allows you to interactively create native Shiny dashboards. Lowering the entry barrier for new users starting their data-science journey. They can begin to visualize their datasets without prior knowledge of R. More experienced users can use the dashboard-builder to quickly sketch out their ideas and export them to act as a foundation for more complex dashboards. Session: Pour some glitter on it: Polishing the design of your shiny apps

Oct 24, 2022
12 min

image: thumbnail.jpg

Transcript#

This transcript was generated automatically and may contain errors.

Today I'm going to talk about my latest project, the Dashboard-Builder, or how to build Shiny Apps without writing code. And now, quick disclaimer, this is not the UI-Builder.

So yesterday at the keynote, it was a bit of an emotional rollercoaster for me, because I saw, oh, you guys are doing a UI-Builder, I'm doing a Dashboard-Builder, okay. I'm just going to see myself out, okay, nothing to do here. But I think it's still a bit different.

So if I'm not from RStudio, then who am I? Well, I'm Peter. I just finished my master's in data engineering and analytics from the Technical University in Munich. And in my free time, I like to play chess and do data visualizations, especially Shiny dashboards.

Now, when I talk to people and tell them about my hobbies, well, most call me a nerd, but there are also a few people who say, oh, visualizations, dashboards, I would like to create more dashboards, but I don't know how. I can't write R code. It's too complex. And then there are some people who say I could do it, I know how to do it, but I have so many great ideas, I just don't have enough time.

And I think these are all valid reasons. But I'm here, I want to tell you to create more dashboards. So more dashboards like this one I created about my recent chess games.

Is this the most sophisticated, the most beautiful dashboard you've ever seen? Probably not. I hope not. If it is, go check out the Shiny gallery, go check out some Shiny contests. But I still think that that's a decent dashboard. And everyone in this room can build this dashboard without writing R code, without prior knowledge of Shiny, and you can do it in two minutes and 22 seconds.

I know. But I can prove it to you. I have a video. And you can see the time on the bottom right.

Dashboard-Builder demo

So if you open up the dashboard builder, you're greeted with a blank screen. And if you want to visualize data, well, you need data. So I downloaded some of my chess games, saved it as a CSV file, and then I'm just loading it into the dashboard builder.

And then I can add elements like a table about the date and the results of my game. And then I'm adding a graph about my rating points. So in chess, if you win games, you gain rating points. If you lose, you lose rating points. So I can visualize this. I can add some value boxes about the number of games I've played. The number's too high. And my peak rating.

And then I can add more elements. And if it's too small for you, if you can't see everything that's going on, that's fine. I just wanted you to take away how easy it is. You don't have to write any code. And trust me, it's also a lot of fun.

And while I'm here creating the last couple of graphs, the next part is the interesting part. There's an export button up there. And once you click on export, the dashboard builder generates R code. It generates the R code that is needed to build this dashboard. And then it downloads this. And then you can open it up in RStudio. And then you open up the file. And once you hit run... And now, look, it looks exactly like the one we just created.

What the Dashboard-Builder is not

So now you have a first impression what the dashboard builder can do. So I quickly want to say what it is not. So it's not a standalone tool. It's not Power BI, Tableau, or whatever in R. Why not? I think these tools are great, but there are certain soft locks. I think with every tool, you have the ease of use versus the extendability and power.

Now, this part is highly opinionated. So please don't be angry. I think Power BI is easy to use. But it's not powerful. You can't do machine learning, deep learning, serious data science. If you want to do it, it's very hard.

And then let's look at R. If you combine it with HTML, JavaScript, and CSS, it's super powerful. We all know what R can do. But I would argue it's not that easy to use. So what can we do? We can use R and Shiny, which is a bit easier to use. But I still think there's something up there. And I want to go up there.

What's up there? Well, I think up there is a WYSIWYG dashboard builder. WYSIWYG means what you see is what you get. So if you have R Markdown, that's not WYSIWYG, because you have to build it. So if you want to increase the size of a picture in Markdown, you have to put in width 50%, width 70%, and then you build it, and then you can see, oh, it's too small. So you have to get back to the code. If you compare this to PowerPoint, which is WYSIWYG, if you want to increase the size of an image, you click on the image, and you scale it. And then that's how big it is. That's what you get. What you see is what you get.

But I also want all the power and packages of R. I want the data science. I want the machine learning. I want the visualizations. So that's what I want, a combination of these.

But I also want all the power and packages of R. I want the data science. I want the machine learning. I want the visualizations. So that's what I want, a combination of these.

Who is it for?

So why? What does it add? Who is it for? And I think there are two target groups. The first one, beginners. I don't think that only data scientists should create dashboards. There are other sciences. They have so much data, so much insight that they can use to create dashboards. But it has to be easy to use, because most of them don't know how to write code.

I think the blank screen, when you start a project, that's really frightening. So if we can help them, first step, without them having to know how to program, I think that's going to lower the entry barrier to data visualization.

And then there are the experts. But if you just go to a client, discuss how the dashboard will look like, that's never going to be how it will look like in the end. So you build the dashboard. Then you bring it to the client. It tells you, oh, can we change this? So you have to go back, change it, go to the client. Can we change this? No. I want you to be there in the room with a client or maybe just with your team and build rapid prototyping, build the dashboard. So we're going to streamline the dashboard building process so you have more time for the really interesting stuff.

How it works

So now you're wondering, how does it work? If you open it up, there are three buttons. And these three buttons are the three steps you have to take. You have to import data. Then you're going to build the dashboard. And then you export it. And then there's a fourth open ended step, improve and extend.

So we're going to import data. We have this module up here. We can import data from our environment. We can load external files and Google Sheets. Now, I did not create this. I shamelessly stole it from the guys from Dreamers.

And once you've loaded the data, you can start to build the dashboard. Now there are two steps. First you create the element. Right now we support text boxes, value boxes, data tables, and graphs. So for text boxes, just put in the text you want to be displayed. For value boxes, put in a title, a value, and then an icon. Data table, also very easy. Just select the columns you want to be displayed.

But how are we going to create ggplots, graphs, without writing code? And thankfully, the guys from Dreamers have this awesome SKIS package. I'm sure most of you have seen it. You see up there in the top, those are all your columns from your data. And then you can drag and drop these columns to the X, the Y, maybe the color, whatever. And then it's going to create a graph for you.

And then you have this element. And then you can edit the content. You can scale it. You can move it around. And you can also delete it. And then you're just going to repeat these two steps. So add an element, scale it, add an element, scale it, add more elements, move them around. And then you kind of build your dashboard. And as soon as you're happy with how it looks, export it.

And when you export it, you get three files. You get the R project. You get the data that you loaded in as a .rds file. And you get the app.r file. And in the app, there's always a UI and a server. And now let's look a bit deeper into the UI and the server files.

Let's start with the UI. For these two elements, two value boxes, internally, we use the grid stacker package. So we just add a grid stack item, give it a height, a width, X, Y, give it some ID, some styling. And then in there, please give us a value box output. Now we're going to do the same for the second one. And if this looks a bit complicated, if it was too fast, don't worry. All of this is 100% generated by the dashboard builder.

And we also have the same for the server. We're going to render a value box. Which value box? Well, just this title, Games Played. The value is 200. And then we have an icon and a width. And the same for the second one. And again, 100% generated.

Improve and extend

But now comes the part where I have to admit that I lied to you. You do have to write a tiny bit of code. Because look, the value boxes, the values, are hard-coded. So if the data changes, these values will stay the same. And that brings us to the fourth and final step, to improve and extend.

Now that you have your dashboard, you can do so much with it. And in our case, let's see, okay, Games Played. That's just the number of rows of my data table. And the highest rating, well, the highest rating is just the max of my rating. So you have to write these two tiny lines of code. And I think most of us, most of you, all of you, all of you can do that. And then when you've done that, you get your dashboard.

Now I know what you all want to do. You want to use the dashboard builder. It's still in alpha, but it works. So you can get a demo on Shiny apps. You can go to my GitHub. That will bring you to my GitHub. But you need for both, for the GitHub, if you want to run it locally, and if you want to run the apps that you created, you need the Grid Circle package. And you can download this from GitHub. I'm going to put it on Cron, but right now, you still have to do the DevTools install GitHub.

And then how can we all improve the dashboard builder? Well, I was a bit busy the last two months because I had to finish my master's thesis. But now I have some free time. I'm just job hunting. And I want to improve the dashboard builder. So please, if you have feedback, if you have ideas, if you have questions, write me an email, open up an issue on GitHub, or just ask me right now. Thank you.