title: How to filter a barchart by a "thrid" value using d3.js
body: <p>I was able to plot a very simple barchart using D3.js version 7 that relates names with points from a dataset. In this same dataset there's a third value that I would like to use to filter the barchart.</p>
  <p>I can filter it by <strong>name</strong> or <strong>points</strong> already simply using:</p>
  <pre><code>.filter((d) =&gt; d.name = &quot;OneA&quot;)
  .filter((d) =&gt; d.points &gt; 100000)
  </code></pre>
  <p>But if I try to filter the barchart data by <strong>status</strong> it doesn't work. Nothing is filtered.</p>
  <p>This is the entire code:</p>
  <pre><code>// set margins, width and height
  const MARGIN = { LEFT: 64, RIGHT: 2, TOP: 32, BOTTOM: 16 }
  const WIDTH = 600 - MARGIN.LEFT - MARGIN.RIGHT
  const HEIGHT = 400 - MARGIN.TOP - MARGIN.BOTTOM
  
  // set svg
  const svg = d3.select(&quot;#chart-area&quot;).append(&quot;svg&quot;)
    .attr(&quot;width&quot;, WIDTH + MARGIN.LEFT + MARGIN.RIGHT)
    .attr(&quot;height&quot;, HEIGHT + MARGIN.TOP + MARGIN.BOTTOM)
  
  // set group
  const g = svg.append(&quot;g&quot;)
    .attr(&quot;transform&quot;, `translate(${MARGIN.LEFT}, ${MARGIN.TOP})`)
  
  // import data
  d3.json(&quot;data/data.json&quot;).then(data =&gt; {
    // prepare data
    data
      .forEach(d =&gt; {
        d.points = Number(d.points)
      })
  
    // set scale, domain and range for x axis
    const x = d3.scaleBand()
      .domain(data.map(d =&gt; d.name))
      .range([0, WIDTH])
      .padding(0.1)
    
    // set scale, domain and range for y axis
    const y = d3.scaleLinear()
      .domain([0, d3.max(data, d =&gt; d.points)])
      .range([HEIGHT, 0])
  
    // call x axis
    const xAxisCall = d3.axisBottom(x)
    g.append(&quot;g&quot;)
      .attr(&quot;class&quot;, &quot;x axis&quot;)
      .attr(&quot;transform&quot;, `translate(0, ${HEIGHT})`)
      .call(xAxisCall)
  
    // call y axis
    const yAxisCall = d3.axisLeft(y)
    g.append(&quot;g&quot;)
      .attr(&quot;class&quot;, &quot;y axis&quot;)
      .call(yAxisCall)
  
    // join data
    const rects = g.selectAll(&quot;rect&quot;)
      .data(data)
  
    // enter elements to plot chart
    rects.enter().append(&quot;rect&quot;)
      .filter((d) =&gt; d.status = &quot;ON&quot;) // THIS IS NOT WORKING. WHY?
      .attr(&quot;x&quot;, (d) =&gt; x(d.name))
      .attr(&quot;y&quot;, d =&gt; y(d.points))
      .attr(&quot;width&quot;, x.bandwidth)
      .attr(&quot;height&quot;, d =&gt; HEIGHT - y(d.points))
      .attr(&quot;fill&quot;, &quot;steelblue&quot;)
  })
  </code></pre>
  <p>And json file with the data is:</p>
  <pre><code>[
      {
          &quot;name&quot;: &quot;OneA&quot;,
          &quot;points&quot;: &quot;492799&quot;,
          &quot;status&quot;: &quot;ON&quot;
      },
      {
          &quot;name&quot;: &quot;TwoB&quot;,
          &quot;points&quot;: &quot;313420&quot;,
          &quot;status&quot;: &quot;ON&quot;
      },
      {
          &quot;name&quot;: &quot;ThreeC&quot;,
          &quot;points&quot;: &quot;133443&quot;,
          &quot;status&quot;: &quot;ON&quot;
      },
      {
          &quot;name&quot;: &quot;FourD&quot;,
          &quot;points&quot;: &quot;50963&quot;,
          &quot;status&quot;: &quot;OFF&quot;
      },
      {
          &quot;name&quot;: &quot;FiveE&quot;,
          &quot;points&quot;: &quot;26797&quot;,
          &quot;status&quot;: &quot;OFF&quot;
      },
      {
          &quot;name&quot;: &quot;SixF&quot;,
          &quot;points&quot;: &quot;13483&quot;,
          &quot;status&quot;: &quot;OFF&quot;
      },
      {
          &quot;name&quot;: &quot;SevenG&quot;,
          &quot;points&quot;: &quot;12889&quot;,
          &quot;status&quot;: &quot;OFF&quot;
      }
  ]
  </code></pre>
  <p>How is it possible to filter the barchart by status in this case?</p>