Data Visualization First Steps

Search Box Exercise

Anjana Vakil

Anjana Vakil

Software Engineer & Educator
Data Visualization First Steps

Check out a free preview of the full Data Visualization First Steps course

The "Search Box Exercise" Lesson is part of the full, Data Visualization First Steps course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to create a search input to search the apiLogData and manually use the provided cell's Table input to verify that the search returns the expected results. Then, copy the previously completed dot plot (or the reference solution) code into the following cell, and connect it to the search input to allow viewers to search by path names.


Transcript from the "Search Box Exercise" Lesson

>> All right, the next and last thing that we're gonna do in this interactivity project, is to add a search box. To allow our users to search for a particular endpoints path, if they're interested not in a certain status code, but they're interested in all status codes of response from requests to a particular endpoint.

So what we're going to do is, use a convenient little input called the search input, which analogous to inputs.checkbox is going to be Which is essentially going to give us a way to filter down a data set based on whatever text is put into that search box by the user.

So the way that this works is, we're going to pass in some data to this search input. Such that, when I type in something here, for example, if I'm interested in that file/search endpoint or one of the other endpoints that I'm interested in. I am going to get back a subset of the data that corresponds to all rows in the data that matched with a very kind of generous, let's say text search across all the fields, but in this case the relevant one is going to be the path field.

So this search input is gonna search across all the fields of any data points that we pass in to this input array. So what we're going to do is, using our hands we're going to connect this search input called path search to the data that we care about here, our log data.

And then, we are going to again paste our filtered plot from up here, and we can drag our check boxes down too. So that both the check boxes and the search box are connected to filters on our data set to make sure that we are only displaying data that matches all of the inputs that the user has selected.

So that is our next and final exercise and you can take a look at the hint to check out how that search input works, you can also click through to the documentation of the search input for more reference. And then think about, again, how to combine filters for both the search and the checkbox input to make sure that the data that we're ultimately visualizing matches both, so that is our.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now