Filtering the Data Solution

[00:00:00]
>> So again, this is just kind of a convention of the way these observable inputs work. But if we are building our plot visualizations, and observable, it's super handy. I hope you agree. So let's take a look here. All right, so what we want the values of the checkboxes to be, are essentially all of the possible status codes one might be able to select from our data, which again, I had already parsed into an array here.

[00:00:25]
Just by going through the data and pulling out all the status codes, so we can replace for the options array, instead of nothing or an empty array. We can just drop in that status codes value. So now we've got some check boxes. Excellent. But the other thing that would be cool, well first of all, let's label this like we saw before.

[00:00:48]
The status or status code or whatever you want. The other thing in the text here that you might have noticed is, it would be useful if instead of starting out with no data selected, we started out with all of the data selected. And in the hints you may have come across this so there is or if you checked out the documentation of the checkbox input, there is another option I can add here which is to put in the value of these.

[00:01:26]
Of the selected check boxes which is essentially going to be an array of the values that we want, similar to how before we got an array of the selected colours out. So if I specify that in the options then those will be essentially the default values for this input.

[00:01:44]
So here, if I want everything to be checked by default, what I can do is just pass in that same status codes array as the value for this input by default. And then we'll see once I reevaluate that, all of the checkboxes, start out checked. And as I unselect things, we'll see them disappear from that selected codes array, which now gives me this reactive reference to whatever the user wants to care about status code wise.

[00:02:22]
Cool. Any questions, feel free to bring them up. But I'm seeing nods. I hopefully folks are following along in the chat. So let us now take these check boxes and make them actually change the visualization shall we. So first of all, another fun thing about receivable mail books is, if you click and drag on it's three dots next to SL, without little mickey mouse hand icon, you can drag SL wow to a totally different work space.

[00:02:58]
Just kidding, you can maybe nope, drag a cell down further in the notebook for some reason this particular setup does not want me to, but hopefully on your own okay, here we go. So you can drag a cell and move it down to, let's say above this next to do, so that we can have a little bit closer relationship.

[00:03:22]
Now in observable notebooks, the order of cells does not matter at all. The reactive runtime just looks at which cells depend on which other cells. So that's all it cares about. So you can put them in whatever order you want. So we are going to go ahead and put this check box right above the cell for our code in the next exercise.

[00:03:50]
Also, you may have also seen a filtered cell there that is extraneous and we don't need to care about it right now.