Dancing Madness

This was made as an example of how to add elements to a SVG container upon mouse-click. Click in the rectangle and see what happens!

See http://www.puzzlr.org/?p=46 for a more detailed explanation and walkthrough of the code.

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
<script>
// Click and add dancing people!

var padding = 5
var rectx = 5
var recty = 5
var svgWidth = 900
var svgHeight = 500
var svg  = d3.select("body").append("svg")
			.attr("height", svgHeight)
			.attr("width", svgWidth);
			
svg.append("g")
	.attr("id", "back")
	.append("rect")
	.attr("x", rectx)
	.attr("y", recty)
	.attr("width", svgWidth - padding )
	.attr("height", svgHeight - padding)
	.style("fill", "none")
	.style("stroke", "black");
	
	
//array of dancing people
dancers = [
 "https://static.tumblr.com/f20418d4dac3303f5653efc4a178f44a/905zxhy/iQEmjbvys/tumblr_static_tumblr_mjatuzs0lg1rb4km6o1_500.gif",
 "https://www.playcast.ru/uploads/2016/03/21/17930826.gif",
 "https://vomzi.com/wp-content/uploads/2016/02/latest-dancing-gifs-187.gif",
 "https://bestanimations.com/Music/Dancers/3d-animated-girl-dancing-5.gif",
 "https://www.degaston.org/Jeannette/dancing_rocking_woman.gif",
 "https://66.media.tumblr.com/504cb94fe0f41e563f435ee2f833dcb5/tumblr_n47d7f7uFv1rt5pgzo1_400.gif",
 "https://media0.giphy.com/media/3s7nLx9Gxhf32/giphy.gif",
 "https://25.media.tumblr.com/62b196c124113db72bf3203a89db8bfb/tumblr_n02qsfqLSJ1stmohyo1_500.gif",
 "https://media1.giphy.com/media/zVIlIw2PeRAS4/giphy.gif"
 ]

//mouse events
svg.on("click", function()
{
	var coords = d3.mouse(this)
	x = coords[0]
	y = coords[1]
	svg.append("svg:image")
      .attr("xlink:href", dancers[Math.floor(Math.random()*dancers.length)])
      .attr("x",x)
	  .attr("y",y)
	  .attr("width", 40)
      .attr("height", 100);
	});

</script>
</body>
</html>

Modified http://mbostock.github.com/d3/d3.js to a secure url

https://mbostock.github.com/d3/d3.js