Built with blockbuilder.org
forked from mostaphaRoudsari's block: 05_workshop_interactive circles solved
Created
October 19, 2017 14:14
-
-
Save Vyrwn/f77cd993f0460dd82d69ca3aceeab972 to your computer and use it in GitHub Desktop.
05_workshop_interactive circles solved
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
| license: mit |
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> | |
| <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