Old school D3 from simpler times

All examples By author By category About

EfratVil

Full window Github gist

Filtering Objects

<meta charset="utf-8">
<html>
<style>
   
    h2 {
        text-align:center;
        font-weight: bold;
    }
    
     .card {
        display: inline-block;
        width: 80px;
        min-height: 100px;
        background-color: #fff;
        margin-bottom: 20px;
        margin-right: 20px;
        padding: 0px;
        border-radius: 3px;
        -webkit-box-shadow: 0 1px 0px rgba(0,0,0,0.05);
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        transition: all 0.2s ease-in-out;
    }

</style>

<body>
    <script src="//d3js.org/d3.v4.min.js"></script>
    Filter: <select id='group' style="font-size: 18px;">
        <option selected value='All'>All</option> +
        <option value='A'>A</option>
        <option value='B'>B</option>
        <option value='C'>C</option>
    </select> <br/><br />
    
    <div id="content">
       
    </div>

<script>
        var data = [
          { "name": "A", "score": "#74add1" },
          { "name": "B", "score": "#fdae61" },
          { "name": "C", "score": "#fee090" },
          { "name": "A", "score": "#74add1" },
          { "name": "B", "score": "#fdae61" },
          { "name": "C", "score": "#fee090" },
          { "name": "B", "score": "#fdae61" },
          { "name": "C", "score": "#fee090" },
          { "name": "A", "score": "#74add1" },
          { "name": "C", "score": "#fee090" },
          { "name": "A", "score": "#74add1" },
          { "name": "C", "score": "#fee090" },
          { "name": "A", "score": "#74add1" },
          { "name": "B", "score": "#fdae61" },
          { "name": "C", "score": "#fee090" },
          { "name": "A", "score": "#74add1" },
          { "name": "C", "score": "#fee090" },
          { "name": "B", "score": "#fdae61" },
          { "name": "C", "score": "#fee090" },
          { "name": "A", "score": "#74add1" },
          { "name": "C", "score": "#fee090" },
          { "name": "A", "score": "#74add1" },
          { "name": "C", "score": "#fee090" },
          { "name": "B", "score": "#fdae61" }
        ];

var data1;
       function update(data, filter) {

var t = d3.transition()
                 .duration(750)
                 .ease(d3.easeLinear);

if (filter == "All")
          { data1 = data; }
       else
          { data1 = data.filter(function (d) { return d.name == filter; }); }
    
        var cards = d3.select('#content')
                      .selectAll('div')
                      .data(data1);

// EXIT old elements
        cards.exit()
             //.transition(t)
             .style('background-color', "gray")
             .style("fill-opacity", 1e-6)
             .remove();

// ENTER new elements
        cards.enter()
             .append('div')
             .attr("class", "card")
             .merge(cards)           
             .html(function (d) { return "<h2>" + d.name + "</h2>"; }) 
             .style('background-color', function (d) { return d.score; });
    }

update(data, "All");

d3.select("#group").on("change", change)

function change() {
        update(data, this.options[this.selectedIndex].value);
    }

</script>
</body>
</html>

https://d3js.org/d3.v4.min.js