d3 map with checkbox filtering

Question

I have a made a d3 symbolic map and would like the user to be able to filter points by an attribute called 'type'. There are three types: a, b, c, each of which has an associated html checkbox, that when checked should display points of type a, and when un-checked should remove those points. I was wondering what the best way to pass the check/uncheck event into d3? I am thinking if there was a way to pass the checked types into a select.filter(), that would be the best way to go. Here is the code:

HTML

<div class="filter_options">
<input class="filter_button" id="a_button" type="checkbox">a</input><br>
<input class="filter_button" id="b_button" type="checkbox">b</input><br>
<input class="filter_button" id="c_button" type="checkbox">c</input><br>
</div>

js

queue()
.defer(d3.json, "basemap.json")
.defer(d3.json, "points.json")
.await(ready);

function ready(error, base, points) {

var button = 

svg.append("path")
  .attr("class", "polys")
  .datum(topojson.object(us, base.objects.polys))
  .attr("d", path);

svg.selectAll(".symbol")
  .data(points.features)
.enter().append("path")
  .filter(function(d) { return d.properties.type != null ? this : null; })
  .attr("class", "symbol")
  .attr("d", path.pointRadius(function(d) { return radius(d.properties.frequency * 50000); }))
  .style("fill", function(d) { return color(d.properties.type); });;

Currently, the filter is set to catch all points:

.filter(function(d) { return d.properties.type != null ? this : null; })

I would like the user to be able to change this.

Cheers

Andrew Kirkegaard · Accepted Answer · 2013-02-24T03:44:00.230

5

Something like this should work. Add a value attribute for your checkboxes so you know what they're referring to.

d3.selectAll(".filter_button").on("change", function() {
  var type = this.value, 
  // I *think* "inline" is the default.
  display = this.checked ? "inline" : "none";

  svg.selectAll(".symbol")
    .filter(function(d) { return d.properties.type === type; })
    .attr("display", display);
});

edited Feb 24 '13 at 03:44

answered Feb 23 '13 at 19:59

Andrew Kirkegaard

1,676
11
13

amazing. thanks. works like a charm when boxes are checked, but unchecking doesn't remove the points. any thoughts on why that would be? – rysloan Feb 23 '13 at 20:16
I have a similar question : (http://stackoverflow.com/questions/24710672/parallel-coordinates-with-check-box). I tried to solve my problem using the code provided here, but I could not. I am confused and I don't know where should I add the provided solution in my code. I will be thankful if you can help me. – sara_123 Jul 12 '14 at 23:25
@Andrew Kirkegaard What if you want to change attributes, such as colour, instead of removing point completely? I was strugging with the same issue and the answer above saved me! But I would like to change attributes for unchecked options remaining rather than removing them. – Brian Sep 30 '18 at 16:39
Instead of changing the "display" attribute with the .attr function, you would change another attribute. If it's a css attribute, use the style function instead: https://github.com/d3/d3-selection/blob/master/README.md#selection_style – Andrew Kirkegaard Oct 01 '18 at 19:51

d3 map with checkbox filtering

1 Answers1

Linked