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.
Last active
September 12, 2017 02:30
-
-
Save puzzler10/610d05bd26182067ae36ad32a7b63b6a to your computer and use it in GitHub Desktop.
Dancing Madness
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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