Skip to content

Instantly share code, notes, and snippets.

@cpbotha
Last active September 19, 2023 15:43
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save cpbotha/5200394 to your computer and use it in GitHub Desktop.
Save cpbotha/5200394 to your computer and use it in GitHub Desktop.
d3.js drop shadow example
// 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 + ")"; });
<!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>
@crapthings
Copy link

how to change shadow opacity

@michaelmendoza
Copy link

To change the shadow opacity try adding a feComponentTransfer primative. (I also modified slightly the code so that this idea works)

// 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", 3)

// translate output of Gaussian blur to the right and downwards with 2px
// store result in offsetBlur
filter.append("feOffset")
    .attr("dx", 2)
    .attr("dy", 2)
    .attr("result", "offsetBlur");

// Control opacity of shadow filter
var feTransfer = filter.append("feComponentTransfer");

feTransfer.append("feFuncA")
	.attr("type", "linear")
	.attr("slope", 0.2)

// 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")
feMerge.append("feMergeNode")
    .attr("in", "SourceGraphic");	

@hknowlton
Copy link

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