R for the Rest of Us Podcast Episode 26: Deepali Kank

In this episode of R for the Rest of Us podcast, I chat with Deepali Kank, a talented R user and data visualization expert. Deepali shares her journey from creating static visualizations in ggplot2 to building interactive charts using Observable Plot, a JavaScript-based tool. We dive into her recent projects, explore how Observable makes it easy to add interactivity, and talk about how it compares with tools like Shiny and Quarto dashboards. If you're curious about expanding your data viz toolkit beyond R, make sure to tune in.

Watch the conversation on YouTube:

Important resources mentioned:

• See some of Deepali’s #TidyTuesday work

Connect with Deepali on LinkedIn and Bluesky or visit her website to learn more about her.

Learn More

If you want to receive emails to help you on your R Journey, sign up for the R for the Rest of Us newsletter.

If you're ready to learn R, check out our courses.

Transcript

[00:00:25] David Keyes: In this episode I speak with Deepali Kank. Deepali is a really talented R user who does amazing data viz in R. Recently, she's gotten into making data viz in what's known as Observable Plot, which is a way to make interactive data viz using a JavaScript library called Observable. It's a really interesting conversation and for our users who are thinking about branching out, it's got some really great tips for how you might do that.

Let's dive into my conversation with Deepali.

So I wondered to probably if you could just talk a little bit about the types of clients and projects that you work on now, um, when you do freelance data visualization work.

[00:01:07] Deepali Kank: So for the last year, uh, I worked with labs. It's, uh, India, one of the most first famous, uh, information design agency lab founded Byman. Actually, she saw my on Twitter and then messaged me on LinkedIn. So I must say people share your work. You may not know who will see it and who will, uh, contact you. So she contacted me and, um, she liked my work and she said, uh, if I'm, if I be interested in working on paid project.

So I said yes, and I.

Because sharing my work, so, uh, with three visual labs, uh, I contributed to two projects. Uh, one was the, uh, report, publication report. Uh, it was, uh, India, state of India's, uh, digital economy report for 2024. that, uh, I worked with the designer that for.

I worked with designers. Um, I made charts in Gigi plot, analyzed all the data. Uh, a few of them, uh, were made by the designers, but most of them are made in Gigi plot. So that was the great learning experience for me. And another project, uh, it was a dashboard.

So they conducted, uh, surveys, uh, for the, uh, migrant people and, uh, crossing back surveys. And returning surveys. So, uh, they wanted to know how they can better, their existing dashboard was in Core bi, but uh, it was not so clean. I clean.

uh, I work with a designer, uh, to, I did the charts for that, uh, dashboard and uh, also learned the wealth framework for that project. So it was also great experience and other clients I got contacted through LinkedIn just for.

Table it.

[00:03:52] David Keyes: What's your favorite tool to work in? R. Okay. Um, well, despite that, uh, you have been recently doing more and more with other tools. Um, I know, you know, you mentioned S Felt, um, we talked about or D three a bit before, but the one I wanna focus on is observable plot, which is a framework developed by. The tool called Observable. Um, so before we have you actually show us kind of what that looks like, I, I'm curious why you have wanted to go beyond r, you said R is your favorite, right?

So why explore other tools? What is it that those tools can do that, that r might not be able to do?

[00:04:42] Deepali Kank: So. With observable, of course, through Tanya's work. Tanya Shapiro. She, I love her work. And actually my work is inspired by her work, you can say. So she was making, uh, observable plot, interactive observable plots. So I saw it, uh, through Twitter. And then I gotta know about, uh, Alison hoes. At that time, uh, the observable, uh, community was, they were, uh, hosting, um, uh, courses for the community.

So it introduction to observable Java.

So I, in,

I.

There, this particular guardian chart, uh, it was about the, uh, press freedom index around the world. So, uh, I recreated that chart in observable. It was a static chart for them, so I thought it was static chart. So I thought, uh, if I could see the countries in that, uh, like in upon hovering. So I recreated that in observable and added the interactivity.

So interactivity is the, uh, most you can say, uh, can add it easily in observable, like, uh, interactive charts in it is so easy to make interactive charts in observable. So I.

[00:06:29] David Keyes: Yeah, it seems like that's the main advantage of a tool like observable. I mean, our, you know, I've, I've. Talked with folks about various ways you can kind of make charts interactive. I mean, there's of course shiny if you're doing like a whole dashboard and you wanna have, you know, full interactivity, but that's complex. They're packages like Gigi, IRAF or giraffe or how, however you pronounce it. Um, you know, but those help with like small things, right? Like adver adding like tool tips on a chart. But observable plot seems to go kind of the next level in enabling that interactivity without being too complex. I think. Well, we'll, we'll find out when you, when you demo it. Um, are there any disadvantages to using a tool like Observable Plot? 'cause you've given some advantages. I'm curious if you see any disadvantages.

[00:07:24] Deepali Kank: If you can easily pick plot, it's grammar graphics, but you're user, you need learn a little bit of Java script.

Uh, you can follow the example in

Java.

[00:07:51] David Keyes: And is that true? I mean, you said that that's true if you've, if you are not familiar with Gigi po, but I imagine that's also true even if you know Gigi po. Right? Or is that not right? I.

[00:08:11] Deepali Kank: Likes and marks, you can easily differentiate.

[00:08:18] David Keyes: Yeah. Okay. Interesting. Well, rather than just talking about it in the abstract, let's actually have you, um, show me an example of what this looks like. So we talked before about having you, um, demonstrate, uh, a notebook, um, that you created on, um, the World Happiness Report. Um, do you mind just putting your screen up and kind of walking us through that?

Actually, if I can just ask you a basic question, even before you talk about the code, this is different in that it's online, right? Like it's not, you know, if I'm working in R I'm working in R Studio Desktop for the most part, occasionally positron. Now, this is all online.

Is that accurate?

[00:09:08] Deepali Kank: Yes, it is a web best framework. So yes, it is online. Okay. But you can embed, embed your, uh, your visualization on your website or anything in report, et cetera.

[00:09:20] David Keyes: Okay, perfect. I want to have you show me that later on, but I think it's different, right? I mean, it's not that that is insurmountable or anything, but it's a different way of editing your code.

Um, okay. So talk to me about what, what we're looking at here.

[00:09:35] Deepali Kank: So this is the observable uh, notebook after you created an account, uh, on this, lemme show you. Okay. These are the notebooks. All the notebooks. You can see the plus sign here. You can add new notebook and start coding.

Okay.

[00:09:53] David Keyes: And is a notebook. I mean, when I think notebook as an our user, I think of like an R markdown document or quato. Is it like that? Yes, yes,

[00:10:02] Deepali Kank: yes. It's similar.

[00:10:04] David Keyes: what, what and what's a data app versus a notebook?

[00:10:08] Deepali Kank: So there are, um, here, uh, free plan and paid plan data apps. You can use the observable framework.

You can do the dashboard, which, updates on the real time, et cetera. Hmm. Observable framework. They have launched it, uh, I think last year. Observable framework.

[00:10:28] David Keyes: Okay. So that's like for making, you know, like you said, if you wanna make like a whole dashboard or that kind of thing, that's what that's for.

Versus notebook is more kind of discreet things. Is that accurate?

[00:10:39] Deepali Kank: So, you can make your notebook public or keep it private or analysis, et cetera. So I'm gonna go to the notebook now. Mm-hmm. So this is observable notebook. You can see the plus sign here. If you click on the plus sign, you can add the same, you can attach your data set, you can write equal query, and there are predefined chart and predefined data sets in observable.

So there's just a bar chart. Automatically,

[00:11:18] David Keyes: so that's like a built-in one, just to show you kind of some sample code one. Yeah.

[00:11:23] Deepali Kank: Yes. Predefined one. Yeah. So there is alphabet dataset, and when you click the bar chart, it can build the bar chart, et cetera.

[00:11:34] David Keyes: Got it.

[00:11:35] Deepali Kank: Also, if you have a dataset or if you attach your dataset, like CSV file, I mostly work with CSV file. So if you get here at the bottom and click on chart

and select the data set, let's say it's happiness, you can add your X, X, Y, et from the dataset.

[00:11:57] David Keyes: Huh.

[00:11:58] Deepali Kank: Okay. Make it a scatter. Okay. Then you can convert the JavaScript.

[00:12:07] David Keyes: Huh, so that's like, oh, what was it called? There was a package in R that did something similar to that. It basically launched like a little mini shiny app and allows you to choose, I want this variable on my X axis, this on my y, um, that looks very similar to that. I forget what the package was called though.

[00:12:25] Deepali Kank: And then, uh, you can edit this code JavaScript. Okay, so this is a basic, uh, scatter plot. Okay. But here we have made it interactive. So,

[00:12:42] David Keyes: so what, sorry, what you just did, it was, right now it's just displaying the plot, but when you click the little, Icon, the little chevron, like right arrow and it went down. Then it showed the code. Um, and I'm actually talking about the one that you made it act, then it shows the code as well, right?

[00:13:02] Deepali Kank: Yes.

It's like, um, drag and drop. Like you can add your x Xes size, color, et cetera. You can also add

Java. So you can edit it further according to your needs. Okay.

Okay, so the word happiness support. So there are six factors on which they calculate the scores. So there is a score for social support, healthy life expectancy, freedom to make life choices, et cetera. So if we follow this process of, creating scatter chart, we have to make like, different, different, scatter chart for all of the above.

So for all of the factors, so what we did here is, observable has inputs, so like radio imports, check boxes, et cetera. So if you click on the plus sign again and scroll further. You see button check boxes, color, date range, sliders, et cetera. So through this input,

you can add further interactivity to your chart. this is the scatter plot between ladder score and the social support. So if we get here and want to change the X axis. Frequency and generosity, et cetera.

[00:14:34] David Keyes: Interesting.

[00:14:34] Deepali Kank: So, we define the inputs as the variable. So if we call it in any other cell, that will also display.

Okay. So observable, notebook is not sequential. if you define the variable in any cell and call it in any cell, it's not like R, like R is like, you have to define the function first and then return the function.

[00:15:00] David Keyes: Uh. So can I just ask one thing? The features there, like input, do select features, is that of the name of a variable in your CSV?

Yeah,

[00:15:10] Deepali Kank: yeah. Features. Yeah. I have, uh, define the features here, et cetera.

[00:15:14] David Keyes: Oh, I see. So you manually define that or, yeah. It's not, that's not like a variable name

[00:15:19] Deepali Kank: Uhhuh? No.

[00:15:21] David Keyes: Okay. So where does your data come from? I mean, did, did you attach a CSV like you were talking about before?

[00:15:28] Deepali Kank: Yes. Here is the data at the bottom

here. You can see the attach here. Yeah, you can attach Okay. Data here.

[00:15:35] David Keyes: I see.

And then you can use it. Um. Wait, how do you import it there? Like how does it go from the CSV to something that you can use here? Do you have, you know, like, uh, as an R user, I think, well, you need like a read CSV somewhere in your code. What does it look like there?

[00:15:54] Deepali Kank: No, it's just, you can import the data and it, it's called the happiness CSV and it just shows up.

Ah, yes. It just shows up like this in the table.

[00:16:04] David Keyes: Okay. And so then you can use it above as well?

[00:16:10] Deepali Kank: Yes. Yes, these are the sales observable cells are movable, so you can put it here. Hmm. Et cetera. So I have made the data set at the bottom.

 And you can use SQL queries to analyze your data. So this is a wide data set.

So for, uh, example, I want to make long dataset, so mm-hmm. I have written the equal query here to make it long.

[00:16:38] David Keyes: Can you use AR code and,

[00:16:39] Deepali Kank: In this notebook? No. You can use, the package called AR for this.

[00:16:44] David Keyes: Hmm. I've heard Tanya, Shapiro talk about using that to, to work with, data in JavaScript. So,

[00:16:51] Deepali Kank: so back to the scatter plot. So now, in normal scatter plot like we see here it's like, okay. First we call the plot, plot, plot. And then Mars are like the genomes. Mm. Here is plot. Do. So we are uh, we are doing cata plot. So it is plot. If we want to do the bar, it is plot bar or plot, image or plot, text, anything.

Mm-hmm. Okay. So marks are like the genomes of R. Okay. GG plot.

[00:17:29] David Keyes: Yep, that makes sense.

[00:17:31] Deepali Kank: Okay.

So, uh, So now here the marks are here, but we have to connect our filters. So these are the filters that we want to automatically select xx and then update the chart. So we want to connect it to our data set. Uh, the chart. So instead of, going for x for the variable name, right?

We do these filters and then select X that is the name actually.

[00:18:04] David Keyes: I

[00:18:04] Deepali Kank: see. Like select this. Then it'll select that feature, then select y. It'll select that feature.

[00:18:11] David Keyes: So you're telling it don't, again, like I'm probably just repeating back what you said, but don't use the variable, use the select whatever is selected in that dropdown above.

[00:18:20] Deepali Kank: Yeah. So this is for the label. Uh, it'll change the label here. Also excesses and y access label. So it's like a theme, in Gigi plot. Title subtitle, you can, yeah, yeah. Adjust the width, height or font size, font, weight, et cetera. In this, you can add, uh, add the style to update that also, so, yeah, and it is, uh, plot.dot that we are making the scatter plot using dots.

Mm-hmm. So it's access filters, but select from the filters above that we are going select. Okay. And then filter, select, uh, y So whatever we select here, it'll update accordingly.

[00:19:05] David Keyes: It is very similar to Gigi Pot seeing you, discuss it.

[00:19:12] Deepali Kank: Yes.

So now the Our Effect, you see uhhuh, you can see the country name and the XXI and access values for it.

It's a tool tip, so you can add it using title argument, and then it is a JavaScript. So. It just looks

[00:19:37] David Keyes: like a, like using the glue function.

[00:19:39] Deepali Kank: Yes. Like arrow, uh, it is arrow function in JavaScript. So Uhhuh use that for country name and then X value. Access value.

Then, uh, color, like. So I have added the condition here using JavaScript again, um, uhhuh, it, it's like a if in blo, right? Like if the selected countries India, then use this color. Otherwise use this color.

[00:20:09] David Keyes: Okay?

[00:20:12] Deepali Kank: So India is selected in different color. Here, see, I see yellow,

[00:20:19] David Keyes: uh.

[00:20:21] Deepali Kank: You can normally fill all the dots with the same color light, right?

You have to give the X code, et cetera. And then the stroke, like the border of the dot.

So I made the India black and all other white.

It's like feel and color in GG plot.

[00:20:42] David Keyes: Yeah, yeah. It's very, sounds similar.

[00:20:44] Deepali Kank: Yeah. But, uh, I, I have added the additional condition like defect and then the opacity size of the dot, et cetera. You can add like similar to GG plot,

[00:20:57] David Keyes: right?

[00:21:00] Deepali Kank: So that is the scatter plot.

[00:21:03] David Keyes: And can you show, like, if you change something in that. I don't know what you call it, that code cell, um, I don't know, like change the size of the dots, for example. Will that automatically update in the plot above?

[00:21:17] Deepali Kank: Yes. If you change it to 10, let's make it 10.

[00:21:23] David Keyes: I see the

[00:21:23] Deepali Kank: dot of the dots are bigger and the opacity is slow.

[00:21:27] David Keyes: Yeah.

[00:21:29] Deepali Kank: Or if you just remove this, okay.

[00:21:41] David Keyes: I see. So now we're all red. Red.

[00:21:43] Deepali Kank: Now it's like feel and color, right?

[00:21:46] David Keyes: Yeah.

[00:21:47] Deepali Kank: And you can add the conditions. You can do like make the dots bigger or. Yeah. Yeah. Some s make the dot smaller for another country, et cetera.

[00:21:56] David Keyes: That makes sense. And so I've seen you hitting that play button to, you know, update individual plots.

I know that you have multiple plots here. We don't necessarily need to go through every single one, but I'm curious, like, is there a way similar, I mean, I'm tying this all back to R right? Like if I'm working in a quato notebook, I can hit the render button, which will run all of my kind of code throughout.

Is there something similar with observable notebooks?

[00:22:22] Deepali Kank: Uh, no. You can, select the individual cell and run like that. Or if you want to like embed it, you can embed. Okay. So if you want to embed this entire analysis into your website. You can select the entire notebook. Mm-hmm. And it'll select all the cells and the cells have name.

Okay. I see. So this one plot has this one or the, where I calculated the media and the median. Okay. So this will look like this and it'll update accordingly on your website also. Mm-hmm. Or, or you can just select, like I just wanna add the scatter plot and it filters and these zoom plots it filter.

I see. Okay. You can see the frame here? Yeah. Yeah, yeah.

[00:23:12] David Keyes: Huh. Okay. So it just gives you that I frame that you would then copy and Yeah, you

[00:23:16] Deepali Kank: can embed it anywhere and it'll update and if you have paid plan. This will be gone live. Right, right. Observable, yeah. Their tag and et cetera.

[00:23:27] David Keyes: Yeah.

[00:23:27] Deepali Kank: Okay. Attribution banner.

Yeah.

[00:23:31] David Keyes: Right, right. Okay, that makes sense. Now I also understand you can embed, so, so that would be one way to embed, but you could also embed this directly in a quarto document, um, observable plot code. Is that, is that right or am I misunderstanding?

[00:23:51] Deepali Kank: Yeah, you can embed it in quarter document, like the frame you can embed in that quarter document also.

But, uh, you can create the plots in quarter documents, uh, using the uh, OJS blocks, like in quarter, there are R blocks, python blocks. Then yeah, you can add OJS blocks and run the code there also, so I can show you that also.

[00:24:16] David Keyes: Okay. Yeah.

[00:24:18] Deepali Kank: So this is quarter document. Uh, I've made a new project, quarter project like happiness report. And then you need to first attach the data that is same like data file attachment, happiness, sv. So that's what you

[00:24:37] David Keyes: did. Sorry to interrupt you, but that's what you did on the notebook. You just used the, the little paperclip icon to upload, upload like equivalent.

But here you obviously have to actually write the code that imports it, right? So

[00:24:50] Deepali Kank: if you, see the quarter document, for observable plot. You can see the various states, you can attach the dataset, different dataset like C-S-V-E-S-V and other forms of dataset, et cetera.

[00:25:02] David Keyes: Yeah.

[00:25:04] Deepali Kank: Okay.

[00:25:04] David Keyes: Okay, that makes sense.

[00:25:05] Deepali Kank: Similar to R and Python, here is the OJS observable JavaScript block.

So you have to put the code, in your OJS block. So if you put it, uh, write the code as it is in the quarter document, you can see the same, uh, the notebook, observable notebook. But here I have made the dashboard, so if you see the documentation for quarter dashboard, you can, make sense of this also.

So, uh, using your hitting. Dashboard, uh, we need row columns, et cetera. Mm-hmm. Mm-hmm.

[00:25:46] David Keyes: I see.

[00:25:47] Deepali Kank: Okay. So at first, I have added this APIs little value boxes. For, uh, the average of everything, like average of every factor, like social support, ladder score, freedom, generosity, et cetera. So in quarter, dashboard, there is a component called value box. So if you add this component as value box, it'll appear as this, so you can add the value directly after calculating.

Or you can add the day three code or, or like calculating the mean for each. So I have commented out here, but I have the values directly, like the big band numbers you, uh, set in dashboard. These are

[00:26:36] David Keyes: right, right, right. Yeah, that makes sense.

[00:26:40] Deepali Kank: Now, uh, added another four and you can see. The is similar, but I have, uh, commented out the title, subtitle, et cetera,

but I read the title. Uh, okay. In os like in RN, Python, we do the hashtag and then slash for properties of that block. Right, right. If you wanna hold, hold the code or echo, echo through falls, et cetera. Yeah. Yeah. In OJS block, you need double slash and then a vertical line.

[00:27:14] David Keyes: Okay.

[00:27:15] Deepali Kank: Okay. So the title is Your Word Happiness report.

Explain this. Six factors for the first lot, and then you can see the code is thin.

[00:27:24] David Keyes: And so I can't actually see the plot there, but I'm guessing if you like, that's just 'cause of the, it's small size of the viewer window, is that right?

[00:27:32] Deepali Kank: Yeah. I will open it in another window and share it.

[00:27:35] David Keyes: Okay. Okay.

[00:27:36] Deepali Kank: Okay.

[00:27:38] David Keyes: Hmm. Okay. Yeah, I see it now.

[00:27:41] Deepali Kank: So the first plot is this. So in quarter dashboard you can add the tab, uh, this is the tab set, so, mm-hmm. Filters, or you can see exit, you can add it here so it'll change accordingly to this. Mm, similar for the other you can change which country to highlight and then change the factor

[00:28:09] Deepali Kank: You can add many tabs here, like as you want. So I have added the summary and the report. It is just a text. Text. You can add plots and chart here also.

[00:28:21] David Keyes: Yeah. I mean, it just seems like a nice kind of lighter weight way to get this interactivity because I know, you know, people will come to me and say, oh, I wanna have some interactivity, but I need to build a whole shiny dashboard.

This just seems like a way simpler way to, you know, be able to select like what goes in the x axis, what goes in the Y axis. Yeah, right. Um, which seems like a, a big benefit. Are there other things that you wanna show on this that we didn't talk about yet? Um.

[00:28:52] Deepali Kank: No, it's uh, it's simple, but the main thing is like, uh, you don't need to install the, uh, heavy installations like no JS and other libraries for sure, to run observable plot. You can just open an account on observable. Just get started with the notebook. And there are also like example galleries, plot Galleries 43 and observable plots.

So we can just get started with that.

[00:29:20] David Keyes: Great. And we'll post links to, to those, uh, in the show notes so folks can, can check those out. Yeah. That was great.

Um, great. Well that was really interesting to probably to see kind of what you can do with observable plot, both on the observable website, but then also, you know, embedded within Quarto documents. So I'm curious, you know, now that you are using this, what are your plans, uh, moving forward? Do you plan to continue to do things in r Do you see yourself moving more towards doing things in observable?

Some combination of the two.

[00:29:58] Deepali Kank: I to use more and also, and, uh, I just wanna more of the data art side of it. Like yesterday, the long list has been published and people have shared beautiful works there. Data. So two of my visualizations also have added to the long list.

[00:30:20] David Keyes: Congratulations.

[00:30:21] Deepali Kank: like, I never expected that to happen. So yeah, I wanna explore the, uh, art, uh, generative art side in observable and in also like long

[00:30:34] David Keyes: Hmm.

[00:30:36] Deepali Kank: she does.

[00:30:44] David Keyes: Yeah. That's great. Well, if people wanna connect with you and see more of your work, uh, what are the best places for them to do that? Okay, great. Well, we will post links to your LinkedIn profile to your blue sky as well as, um, to your

[00:31:08] Deepali Kank: If you search for ID Tuesday.

[00:31:13] David Keyes: You'll, you'll show up. Yeah, that's great. Um, super. Well, Depai, thank you so much for joining. This was really interesting to see, um, how folks who you know, maybe are familiar with Gigi PO but haven't yet learned observable plot. I include myself in that group. Uh, it was really interesting to see how that can happen.

So thank you for sharing with us.