Filtering data using Checkboxes - D3

Question

I am having hard time filtering using the checkboxes in the d3 graph. Here I have five checkboxes and I have to filter the particular data depends upon the checkboxes value.

HTML

<div id="company"
    <ul id='BestBrands'>

    <label class="checkbox">
                                                    <input class="select-all" type="checkbox" id="brandAll"  name="bands" value="M&B"
                                                    onclick="selectMainBrandALL('brandAll');">
                                                    Select All</label>

    <label class="checkbox">
                                                    <input type="checkbox" id="TCS"  name="TCS" 
                                                     >
                                                    TCS</label>

    <label class="checkbox">
                                                    <input id="CTS" type="checkbox" name="CTS" " >
                                                    CTS </label>

     <label class="checkbox">
                                                    <input type="checkbox" id="info"  name="info" >
                                                    Info</label>
    <label 

    </ul>
</div>

Here Is the D3 scatterplot code that generates the chart. I am using Rickshaw framework here..

 v

ar nodes = graph.vis.selectAll("path")
                               .data(series.stack.filter( function(d) { return d.y !== null } ))
                               .enter().append("svg:circle")
                               .attr("cx", function(d) { return graph.x(d.x) })
                               .attr("cy", function(d) { return graph.y(d.y) })
                               .attr("fill-opacity", 1.0)
                              // .attr("render-order", 1)
                               .attr("r", function(d) { return ("r" in d) ? d.r : graph.renderer.dotSize});

If I have to filter the data depends upon the data I can do it like

.filter(function(d) {
    return d.x < 100;
  });

I have done this

   var check  =graph.vis.selectAll(".ck input").on("change", function () {
  console.log(this.name)
  var selected = this.name, 
  display = this.checked ? "inline" : "none";

  graph.vis.selectAll("path")
   series.stack.filter( function(series) { return d.name == selected; } )
    .attr("display", display);
});

But its not working.. please help me out...

score 2 · Answer 1 · edited May 23 '17 at 11:57

See here for a very similar question and answer: d3 map with checkbox filtering

I think you should start by appending the circles in your scatterplot to a "dot" class. Like so:

svg.selectAll(".dot")
  .data(data)
  .enter().append("circle")...

see here for example: http://www.ryansloan.org/d3samples/scatterplot.html

Then, assuming your data has some property "name" that you are trying to filter by, do something like:

d3.selectAll(".input class id").on("change", function () {
  var selected = this.name, 
  display = this.checked ? "inline" : "none";

  svg.selectAll(".dot")
    .filter(function(d) { return d.name == selected; })
    .attr("display", display);
});

I did this method now.. Don`t know whats the issue.. Please check the edited question... — Ash, Jun 11 '13 at 10:17

score 0 · Answer 2 · answered Jun 11 '13 at 06:54

0

You can use the same approach for the name of the series as with a numeric value. For example,

.filter(function(d) {
    return d.series == "name"
})

answered Jun 11 '13 at 06:54

mike

22,931
31
77
100

Filtering data using Checkboxes - D3

2 Answers2