Last active
September 19, 2023 15:43
-
-
Save cpbotha/5200394 to your computer and use it in GitHub Desktop.
d3.js drop shadow example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// d3.js drop shadow example | |
// put together by http://charlbotha.com/ | |
var items = [ | |
{x : 50, y : 10}, | |
{x : 100, y: 170}, | |
{x : 320, y: 70} | |
]; | |
// we can increase this, everything will scale up with us | |
var w=960,h=500, | |
svg=d3.select("#chart") | |
.append("svg") | |
.attr("width",w) | |
.attr("height",h); | |
// filter chain comes from: | |
// https://github.com/wbzyl/d3-notes/blob/master/hello-drop-shadow.html | |
// cpbotha added explanatory comments | |
// read more about SVG filter effects here: http://www.w3.org/TR/SVG/filters.html | |
// filters go in defs element | |
var defs = svg.append("defs"); | |
// create filter with id #drop-shadow | |
// height=130% so that the shadow is not clipped | |
var filter = defs.append("filter") | |
.attr("id", "drop-shadow") | |
.attr("height", "130%"); | |
// SourceAlpha refers to opacity of graphic that this filter will be applied to | |
// convolve that with a Gaussian with standard deviation 3 and store result | |
// in blur | |
filter.append("feGaussianBlur") | |
.attr("in", "SourceAlpha") | |
.attr("stdDeviation", 5) | |
.attr("result", "blur"); | |
// translate output of Gaussian blur to the right and downwards with 2px | |
// store result in offsetBlur | |
filter.append("feOffset") | |
.attr("in", "blur") | |
.attr("dx", 5) | |
.attr("dy", 5) | |
.attr("result", "offsetBlur"); | |
// overlay original SourceGraphic over translated blurred opacity by using | |
// feMerge filter. Order of specifying inputs is important! | |
var feMerge = filter.append("feMerge"); | |
feMerge.append("feMergeNode") | |
.attr("in", "offsetBlur") | |
feMerge.append("feMergeNode") | |
.attr("in", "SourceGraphic"); | |
// for each rendered node, apply #drop-shadow filter | |
var item = svg.selectAll("rect") | |
.data(items) | |
.enter().append("rect") | |
.attr("width", 170) | |
.attr("height", 100) | |
.attr("fill", "steelblue") | |
.attr("stroke-width", 2) | |
.style("filter", "url(#drop-shadow)") | |
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> | |
<title>d3 drop shadow example</title> | |
</head> | |
<style> | |
body { | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
width: 960px; | |
height: 500px; | |
position: relative; | |
} | |
</style> | |
<body> | |
<h4>Look ma, drop shadows!</h4> | |
<p>Zoom in to see how pretty they are.</p> | |
<div id="chart"> | |
</div> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script type="text/javascript" src="dropshadow.js"></script> | |
</body> | |
</html> |
This is exactly what I needed! Thanks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
To change the shadow opacity try adding a feComponentTransfer primative. (I also modified slightly the code so that this idea works)