# Filter

#### d3_filter.html ● d3.min.js ● data/fruit_2.csv

### Filter

### Example

Let's take the table from the example before again. We now want to filter the data using a slider. This slider is defined quite simply in HTML:

<input type="range" min="0" max="30" value="5" id="sizeSlider" style="width: 300px">

We access the slider quite easily:

let slider = document.getElementById("sizeSlider");

Then we define an event listener that is always called when the slider is changed. This is to change the text under the slider, save the selected value in a variable and update the table:

slider.oninput = function() {
d3.select("#range").text("0 cm - " + this.value + " cm")
sliderValue = this.value
updateTable();
}

The easiest way to update the table is to simply remove the entire body of the table and create a new one. We do this with the help of the ID "bodyt" and in the new created function updateTable():

function updateTable() {
d3.select("#bodyt").remove()
let line = table.append("tbody").attr("id", "bodyt")
...

In the end it is important to filter the passed data by it's size, what we can do in the data-function:

.data(data.filter(d => d.size <= sliderValue))

0 cm - 30 cm

### More about Filter

- JavaScript Filter