Built with blockbuilder.org
Created
July 17, 2017 12:53
-
-
Save mostaphaRoudsari/4663275cf71af0e30e1fe869af90cb39 to your computer and use it in GitHub Desktop.
03_workshop_the 3 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</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}); | |
| // let's change the colors to red | |
| // circles.style('fill', 'red'); | |
| // was it so fast? let's create a transition and set the duration time | |
| /* | |
| circles.transition() | |
| .duration(2000) | |
| .style('fill', 'red'); | |
| */ | |
| // let's add a delay between each color change | |
| // comment the one above | |
| /* | |
| circles.transition() | |
| .delay(function(d, i){return i * 1000}) | |
| .duration(2000) | |
| .style('fill', 'red'); | |
| */ | |
| // you can perform several changes in a single transition | |
| /* | |
| 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