API Response Log Data Setup

[00:00:00]
>> So we are about to dig into our third and final project notebook, how fast are API responses? Once again, you can access this from the other materials that we've been looking at by clicking that Data Visualization First Steps at the top by the square icon, and then navigating to it in the sidebar.

[00:00:19]
And I've also dropped the link. So we are going to pour through another data set. For this exercise, we're going to be looking at the type of data that we might find in our API logs, or we might be able, better said, to wrangle out of our API logs.

[00:00:39]
So what we're gonna be looking at in this exercise is some data about different responses served by a fictional API at different endpoints for different paths requested. And what the code was, what the status code was for that response, and how long each of those took, so what the response time was.

[00:01:05]
And so again, we're gonna kind of pretend that we've already done whatever wrangling we need to do on our raw API logs to get the information that we care about out of them. Because this is a course in data visualization and not data wrangling for data visualization. So we're just gonna assume that we've already done that step.

[00:01:26]
But in your own life, you might find yourself needing to pour through your log data and doing some filtering and maybe doing some mapping or, again, reshaping that data as we saw in the last example. But in this case, we get the jumpstart with this apiLogData.json file. So once again, we're going back to the JSON format.

[00:01:49]
And here, we have parsed out this file attachment as JSON. And in just one additional step here as a little wrangling step, we have some string timestamps in our original data. And so what we're doing is we're taking those timestamps, which were in the file, they were strings.

[00:02:08]
And we are just converting them to actual date objects so that we can plot them on a date scale instead of as just different strings. In any case, this is all done for you. So we've got this apiLogData array with all of our data that we care about in it.

[00:02:28]
And, again, we're throwing that into a little table here just to have a browse through. So we can see that we've got a duration here in milliseconds. And then we've got the status code of the response, unfortunately, not always 200. And we have the path of the, again, fictional API endpoint that was requested, and then the timestamp that that request came in.

[00:02:56]
So that is what we're dealing with here. And what we're gonna be focusing on in this project is actually adding some interactivities, adding some controls to our charts. We've already done a little bit of that with our title tooltips. But in this one, we're going to actually look at some more input controls that we could add to our charts to add more interactivity.

[00:03:21]
So first of all, let's create a chart that we can then add interactivity to. So we're going to create another dot plot, which we just got some experience with. So this time, not so many training wheels on [LAUGH] this exercise. We're gonna try to stretch again our plotting muscles that we've been working out today and create a dot plot showing the response to each different request.

[00:03:55]
Where we're gonna have time on the x-axis, so those timestamp values across the x-axis. And then duration, and again, those values are milliseconds on the y-axis. And we're not particularly caring about the actual, when exactly each of these requests happened. But they give us a way of sequencing the data in order so that we can see over time whatever trends we might have.

[00:04:22]
So if you don't like seeing those date labels along the bottom, you could suppress them, but you can also leave them. And so there's some suggestions here. We might, for example, also distinguish different paths in the requests because we do have a lot of different endpoints, but we also have a lot of the same endpoint being hit over and over again.

[00:04:42]
So we could use the color of the dots to encode that property, and we can then see what patterns emerge there. Like for example, you'll find that some of those endpoints account for a lot of traffic. And then you also might want to mess with the opacity there if you're having a hard time distinguishing different data points.

[00:05:05]
So at this point, we have all the tools under our belt that we need to create this dot plot. So I will let you get creative with it. Have fun with the different channels. And there are some hints, but not really that many, so you can also refer back to the previous exercise dot plot to get started or just to copy over the basic syntax.