javascriptd3.jsradio-buttonscatter-plotinput-filtering

Filtering in JavaScript with radio button using D3 library


I am trying to use a set of radio buttons to filter between data on a D3 scatter plot diagram. My scatter plot diagram is based on http://bl.ocks.org/mbostock/4063663. I have only modified the code to fit my data needs. The code in the link is very close to what I have.

The code in my CSV file is arranged in the following way.

DataType1,DataType2,DataType3,DataType4,
  1,2,3,4
  1,2,3,4
  1,2,3,4
  1,2,3,4
  1,2,3,4

Solution

  • I solved it, here is my code:

    Open<input type="radio" name="Status" id="radio-open" value="Open" onClick="window.location.reload()" />
        Closed<input type="radio" name="Status" id="radio-closed" value="Closed" onClick="window.location.reload()"/>
        Clear<input type="radio" name="Status" id="radio-clear" value="Clear" onClick="window.location.reload()"/>
    

    And:

      if (!document.getElementById('radio-clear').checked) {
        if (document.getElementById('radio-open').checked) {
          data = data.filter(function(d) { return d["Status"] == "Open"; })
        }
        else if (document.getElementById('radio-closed').checked) {
          data = data.filter(function(d) { return d["Status"] == "Closed"; })
        }
    

    }