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.
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="http://mbostock.github.com/d3/d3.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 = [ | |
"http://static.tumblr.com/f20418d4dac3303f5653efc4a178f44a/905zxhy/iQEmjbvys/tumblr_static_tumblr_mjatuzs0lg1rb4km6o1_500.gif", | |
"http://www.playcast.ru/uploads/2016/03/21/17930826.gif", | |
"http://vomzi.com/wp-content/uploads/2016/02/latest-dancing-gifs-187.gif", | |
"http://bestanimations.com/Music/Dancers/3d-animated-girl-dancing-5.gif", | |
"http://www.degaston.org/Jeannette/dancing_rocking_woman.gif", | |
"https://66.media.tumblr.com/504cb94fe0f41e563f435ee2f833dcb5/tumblr_n47d7f7uFv1rt5pgzo1_400.gif", | |
"http://media0.giphy.com/media/3s7nLx9Gxhf32/giphy.gif", | |
"http://25.media.tumblr.com/62b196c124113db72bf3203a89db8bfb/tumblr_n02qsfqLSJ1stmohyo1_500.gif", | |
"http://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> |