EfratVil/index.html

## index.html
<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>

## thumbnail.png

      
      Raw
    
  
              thumbnail.png
	<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>