title: How to code checkbox checked/unchecked behavior in d3.js
body: <p>I am making a scatterplot using D3. I have the following function that allows the user to filter out certain points using a checkbox:</p>
  
  <pre><code>    //un-optimized code, works fine
      d3.selectAll("[name=v]").on("change", function() {
          var selected = this.value;
          display = this.checked ? "inline" : "none";
  
      svg.selectAll(".dot")
          .filter(function(d) {return selected == d.holidays;}) //returns 1 or 0
          .attr("display", display);
          }); 
  </code></pre>
  
  <p>This function uses the <code>"display"</code> attribute to display the points. However I have a good number of points on the chart, and displaying the points again after un-checking and re-checking takes time on slower machines.</p>
  
  <p>I am attempting to optimize it by changing the opacity to 0 when un-checked and vice versa. However I am relatively new to D3 and cannot figure out how to make this work.</p>
  
  <p>Here is what I have currently. This code works partially - the checkbox is checked by default, and when the user un-checks it, the selected datapoints becomes transparent. However, any subsequent checks/unchecks do not do anything - the code simply instructs the browser to keep changing the opacity to 0. </p>
  
  <pre><code>    d3.selectAll("[name=v]").on("change", function() {
          var selected = this.value;
          display = this.checked ? "inline" : "none";
  
      svg.selectAll(".dot")
          .filter(function(d) {return selected == d.holWkend;})
          .style("opacity", 0);
          }); 
  </code></pre>
  
  <p>So the above code makes the selected points invisible when the checkbox is unchecked. <strong>What am I missing in order to change the opacity of the selected points to 1 again when the checkbox is re-checked?</strong></p>
  
  <p>Here is the corresponding checkbox HTML code for reference (includes some custom CSS checkbox styling)</p>
  
  <pre><code>   &lt;input type="checkbox" id="switch-id" name="v" value="0" checked&gt;
     &lt;label for="switch-id"&gt;Holiday&lt;/label&gt;
     &lt;span class="fh-switch-knob"&gt;&lt;/span&gt;
  
     &lt;input type="checkbox" id="switch-id" name="v" value="0" checked&gt;
     &lt;label for="switch-id"&gt;Non-holiday&lt;/label&gt;
     &lt;span class="fh-switch-knob"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>Thanks!</p>