Skip to content

Instantly share code, notes, and snippets.

@jebeck

jebeck/.block

Last active February 6, 2017 01:23
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 jebeck/0b650d4e134527ef9183555f6fc0b3de to your computer and use it in GitHub Desktop.
Save jebeck/0b650d4e134527ef9183555f6fc0b3de to your computer and use it in GitHub Desktop.
Download ZIP
overlay experiment
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
var w = 960, h = 1600;
var container = d3.select("body")
.append("div")
.attr("id", "container");
var svg = container.append("svg")
.attr("width", w)
.attr("height", h);
svg.append("rect")
.attr("y", 0)
.attr("x", 0)
.attr("width", w)
.attr("height", h)
.attr("fill", "#ECECEC");
// teh bar we're interested in
var bar = svg.append("rect")
.attr("y", 200)
.attr("x", 300)
.attr("height", 10)
.attr("width", 100)
.attr("fill", "#0098ff")
.on("mouseover", function() {
var pos = this.getBoundingClientRect();
container.style(
"-webkit-mask-image",
"radial-gradient(ellipse at " + (pos.left + pos.width - (pos.width / 2)) + "px " + (pos.top + pos.height - (pos.height / 2)) + "px, rgba(0,0,0,1) 10%, rgba(0,0,0,0.25) 0)"
)
})
.on("mouseout", function() {
container.style("-webkit-mask-image", "none");
});
// moar bars just becuz
svg.append("rect")
.attr("y", 220)
.attr("x", 300)
.attr("height", 10)
.attr("width", 250)
.attr("fill", "#0098ff");
svg.append("rect")
.attr("y", 240)
.attr("x", 300)
.attr("height", 10)
.attr("width", 180)
.attr("fill", "#0098ff");
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment