title: Filtering a D3.js map using jquery?
body: <p>I have a D3.js project where I am plotting restaurants on a map using their latitude and longitude. Currently I have a script that is pulling data and filtering objects in a JSON file. I am trying to filter (show/hide) the restaurants by a star rating of 1-5.</p>
  
  <p>My issue is that some restaurants have a rating of 4.5 or 3.5 and those restaurants are not being shown on the map after a checkbox is clicked. Is it possible to include multiple values in one checkbox? How would I combine a rating of 4 with the 4.5 ratings?</p>
  
  <hr>
  
  <p>Snippet of JSON data I am working with:</p>
  
  <pre><code>"categories": [
    {
      "alias": "korean",
      "title": "Korean"
    },
    {
       "alias": "bbq",
       "title": "Barbeque"
    }
  ],
  "rating": 3.5,
  "coordinates": {
    "latitude": 38.994812,
    "longitude": -76.931832
  },
  "transactions": [
    "pickup"
  ], 
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;h2&gt;Star Rating&lt;/h2&gt;
  &lt;div id="star-filter"&gt;
    &lt;div class="boxes"&gt;
      &lt;input class="star" type="checkbox" value="5" id="s5" name="check" /&gt;
      &lt;label for="s5"&gt;&lt;img src="img/5star.png"&gt;&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="boxes"&gt;
      &lt;input class="star" type="checkbox" value="4" data-valuetwo="4.5" id="s4" name="check" /&gt;
      &lt;label for="s4"&gt;&lt;img src="img/4star.png"&gt;&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="boxes"&gt;
      &lt;input class="star" type="checkbox" value="3" id="s3" name="check" /&gt;
      &lt;label for="s3"&gt;&lt;img src="img/3star.png"&gt;&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="boxes"&gt;
      &lt;input class="star" type="checkbox" value="2" id="s2" name="check" /&gt;
      &lt;label for="s2"&gt;&lt;img src="img/2star.png"&gt;&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="boxes"&gt;
      &lt;input class="star" type="checkbox" value="1" id="s1" name="check" /&gt;
      &lt;label for="s1"&gt;&lt;img src="img/star.png"&gt;&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see I tried using a second value (<code>data-valuetwo="4.5"</code>) on the second checkbox and had no success.</p>
  
  <p>D3.js:</p>
  
  <pre><code>var map = L.map('map').setView([38.9936, -76.9538], 14);
        mapLink = 
            '&lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt;';
        L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&amp;copy; ' + mapLink + ' Contributors',
            maxZoom: 18,
            }).addTo(map);
  
  /* Initialize the SVG layer */
  map._initPathRoot()    
  
  // We simply pick up the SVG from the map object
  var svg = d3.select("#map").select("svg"),
  g = svg.append("g");
  
  var svg = d3.select("body")
    .append("svg")
    .attr("width",300)
    .attr("height",300);
  
  var tooltip = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style('opacity', 0)
    .style('position', 'absolute')
    .style('padding', '0 10px');
  
  
  d3.json("../data/yelp-fusion.json", function(collection) {
    // Add a LatLng object to each item in the dataset 
    collection.businesses.forEach(function(d) {
      d.LatLng = new L.LatLng(d.coordinates.latitude,
                  d.coordinates.longitude)
    })
  
    var feature = g.selectAll("circle")
      .data(collection.businesses)
      .enter().append("circle")
      .style("stroke", "blue")  
      .style("opacity", .6) 
      .style("fill", "blue")
      .attr("r", 10)
  
      // Adding classes directly from the JSON data to the svg circles to hopefully filter later
      .attr("data-id", function(d){return d.id;})
      .attr("data-star", function(d){return d.rating;})
      .attr("data-review", function(d){return d.review_count;})
      .attr("data-cat", function(d){return d.categories[0].title;})
  
      .on("mouseover", function(d) {
        var html  = d.name + "&lt;br&gt;&lt;hr&gt;" + "Star Rating: " + d.rating + "&lt;br&gt;" + "Total Review: " + d.review_count;
        tooltip.html(html)
          .style('background', '#fff')
          .style("left", (d3.event.pageX + 25) + "px")
          .style("top", (d3.event.pageY - 30) + "px")
        .transition()
          .duration(200) // ms
          .style("opacity", .9) // started as 0!
      })
      .on("mouseout",function(d) {
         tooltip.transition()
          .duration(300) // ms
          .style("opacity", 0); // don't care about position!
      })
  
    map.on("viewreset", update);
    update();
  
    function update() {
      feature.attr("transform", 
      function(d) { 
        return "translate("+ 
          map.latLngToLayerPoint(d.LatLng).x +","+ 
          map.latLngToLayerPoint(d.LatLng).y +")";
        }
      )
    }
  })  
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('#star-filter').delegate('input[type=checkbox]', 'change', function() {
    $('input.star').not(this).prop('checked', false);  
    var $list = $('.leaflet-zoom-animated &gt; g &gt; circle'),
    $checked = $('input:checked');  
    if ($checked.length) {              
      var selector = '';
      $($checked).each(function(index, element){                            
        selector += "[data-star~='" + element.value + "']";                            
      });                        
      $list.hide();                        
      $('.leaflet-zoom-animated &gt; g &gt; circle').filter(selector).show();        
    }
    else {
      $list.show();
    }
  });
  </code></pre>
  
  <p>I can try publishing the full project if that will help.</p>
  
  <p>Thanks in advance. Please ask if I can provide any information or if I left anything out that can help.</p>
  
  <p>Example of what the project looks like:
  <a href="https://i.stack.imgur.com/NxBBB.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NxBBB.gif" alt="enter image description here"></a></p>