Skip to content

Instantly share code, notes, and snippets.

@puzzler10
Last active September 12, 2017 02:30
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save puzzler10/610d05bd26182067ae36ad32a7b63b6a to your computer and use it in GitHub Desktop.
Save puzzler10/610d05bd26182067ae36ad32a7b63b6a to your computer and use it in GitHub Desktop.
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="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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment