Built with blockbuilder.org
Created
July 17, 2017 12:58
-
-
Save mostaphaRoudsari/665123a242248dcde1e1451bef4069f5 to your computer and use it in GitHub Desktop.
05_workshop_interactive circles solved
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</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}) | |
| .on("mouseover", function(d){ | |
| // this is the circle itself | |
| var circle = this; | |
| // set duration to make it pretty | |
| d3.select(circle) | |
| .transition() | |
| .duration("2000") | |
| .style('fill', 'black') | |
| .attr('r', '10') | |
| .attr('cy', '60'); | |
| }) | |
| .on("click", function(d){ | |
| // this is the circle itself | |
| var circle = this; | |
| // change circle radius to 0 | |
| d3.select(circle) | |
| .transition() | |
| .duration("2000") | |
| .style('fill', 'grey') | |
| .attr('r', '0'); | |
| }); | |
| // animation after loading the page | |
| circles.transition() | |
| .delay(function(d, i){return i * 1000}) | |
| .duration(2000) | |
| .style('fill', 'red') | |
| .attr('r', '15') | |
| .attr('cy', '80'); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment