Skip to content

Instantly share code, notes, and snippets.

@EfratVil

EfratVil/README.md

Last active September 16, 2017 07:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save EfratVil/896c21acd3306b50000703e20a6ef79e to your computer and use it in GitHub Desktop.
Save EfratVil/896c21acd3306b50000703e20a6ef79e to your computer and use it in GitHub Desktop.
Download ZIP
Objects ordering
Raw
README.md

Hover on object to bring it to the front, click to take object to the background.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
radius = 100;
var circles = d3.range(40).map(function() {
return {
x: Math.round(Math.random() * (width - radius * 2) + radius),
y: Math.round(Math.random() * (height - radius * 2) + radius)
};
});
var color = d3.scaleOrdinal()
.range([ '#0D6F7F','#E07351', '#169E87', '#5D8222', '#97AF22', '#D2A825', '#DB5A33', '#DC5F5F', '#D86A87', '#CCCAC8']);
var firstChild;
svg.selectAll("circle")
.data(circles)
.enter().append("circle")
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; })
.attr("r", radius)
.style("fill", function (d, i) { return color(i); })
.on("mouseover", function (d) {
this.parentElement.appendChild(this);
})
.on("click", function (d) {
firstChild = this.parentNode.firstChild;
if (firstChild) {
this.parentNode.insertBefore(this, firstChild);
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment