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.
xxxxxxxxxx
<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