forked from cpbotha's block: d3.js drop shadow example
Last active
November 29, 2018 19:36
-
-
Save denisemauldin/45e164830c9664fb57d5519f20dc4cd9 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
| license: mit |
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"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <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 type="text/javascript" src="dropshadow.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment