Built with blockbuilder.org
forked from mostaphaRoudsari's block: 03_workshop_the 3 circles
Last active
October 19, 2017 15:51
-
-
Save Vyrwn/ef339dadb69a5eb45e55f4f3f6678905 to your computer and use it in GitHub Desktop.
03_workshop_the 3 circles
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,"black"),(20,"blue"),(30,"yellow")] | |
| var circles = svg.selectAll('circle') | |
| .data(data) | |
| .enter() | |
| .append('circle') | |
| .attr('r', 10) | |
| .attr('cy', 60) | |
| // .attr('cx', function(d){return 5 * d}) | |
| .attr('cx', function(d , i){ return ((i+1)*40)}); | |
| // let's change the colors to red | |
| // circles.style('fill', 'rgb(255,112,112)'); | |
| // was it so fast? let's create a transition and set the duration time | |
| // circles.transition() | |
| // .duration(3000) | |
| // .style('fill', 'yellow'); | |
| // 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', 'yellow'); | |
| */ | |
| // you can perform several changes in a single transition | |
| circles.transition() | |
| .delay(function(d, i){return i * 1000}) | |
| .duration(2000) | |
| .style('fill', function(d[1]){return d}) | |
| .attr('r', '17') | |
| .attr('cy', '80'); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment