SVG circles on mouse position fading away

Basic example showing how to generate SVG cirscles at mouse position that fade out using D3 transitions.

<!doctype html>
<html>
    <head>
        <script src="https://d3js.org/d3.v4.min.js" type="text/Javascript"></script>
        <style>
            #viz {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>    
    <body>
        <div id="viz"></div>
        <script>
            var width = window.innerWidth;
            var height = window.innerHeight;
            var svg = d3.select("#viz").append("svg")
                .attr("width", width)
                .attr("height", height)
                .style("border", "1px solid #ccc");

svg.on("mousemove", d => {
                var div = d3.select("#viz");
                var coordinates = d3.mouse(div.node());
                svg.append("circle")
                    .attr("cx", coordinates[0])
                    .attr("cy", coordinates[1])
                    .attr("r", 5)
                    .style("fill", "none")
                    .style("stroke", "gray")
                    .style("stroke-width", 1)
                    .transition()
                        .duration(2000)
                        .ease(d3.easeLinear)
                        .attr("r", 50)
                        .style("opacity", 0)
                        .remove();
            });
        </script>
    </body>
</html>

https://d3js.org/d3.v4.min.js