Skip to content

Instantly share code, notes, and snippets.

@EfratVil

EfratVil/index.html

Last active January 15, 2018 08:11
Show Gist options
  • Save EfratVil/4f41892eedba8fcb27bb705d4dfc3f0b to your computer and use it in GitHub Desktop.
Save EfratVil/4f41892eedba8fcb27bb705d4dfc3f0b to your computer and use it in GitHub Desktop.
Download ZIP
Filtering Objects
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment