Built with blockbuilder.org
Created
July 17, 2017 12:55
-
-
Save mostaphaRoudsari/294888109e025d770c8a680a730ef04e to your computer and use it in GitHub Desktop.
04_workshop_interactive circles
This file contains 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
| license: mit |
This file contains 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> | |
| <head> | |
| <title>d3js workshop - circles 2</title> | |
| <script src="http://d3js.org/d3.v3.js"></script> <!-- import D3 library --> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| // this is a modified version of Mike's example here: http://bost.ocks.org/mike/circles/ | |
| // first let's draw 3 circles | |
| // this is how a circle looks like | |
| // <circle cx="40" cy="60" r="10"></circle> | |
| // and this is what we want to create to get started | |
| /* | |
| <svg width="720" height="120"> | |
| <circle cx="40" cy="60" r="10"></circle> | |
| <circle cx="80" cy="60" r="10"></circle> | |
| <circle cx="120" cy="60" r="10"></circle> | |
| </svg> | |
| */ | |
| // first we need to add an svg element to body | |
| svg = d3.select('body') | |
| .append('svg') | |
| .attr('width', '720px') | |
| .attr('height', '120px'); | |
| // now let's append 3 circles to svg | |
| // I will use a data list with length of 3 | |
| var data = [10, 20, 30]; | |
| var circles = svg.selectAll('circle') | |
| .data(data) | |
| .enter() | |
| .append('circle') | |
| .attr('r', 10) | |
| .attr('cy', 60) | |
| .attr('cx', function(d){ return 4 * d}); | |
| // This is from example 03 | |
| circles.transition() | |
| .delay(function(d, i){return i * 1000}) | |
| .duration(2000) | |
| .style('fill', 'red') | |
| .attr('r', '15') | |
| .attr('cy', '80'); | |
| // let's make the circles to go back to where they came from | |
| // aka let's learn how to assign events in d3 | |
| circles.on("mouseover", function(d){ | |
| // say hi to the confusing 'this' in javascript | |
| var circle = this; | |
| // set duration to make it pretty | |
| d3.select(circle) | |
| .style('fill', 'black') | |
| .attr('r', '10') | |
| .attr('cy', '60'); | |
| }) | |
| // also add click event to disappear the circles | |
| // tip use on('click', function(d){'write the function here!'}) | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment