Last active
April 18, 2016 11:50
-
-
Save fernandojunior/21f682f2ba7185510ab960bab583e2ed to your computer and use it in GitHub Desktop.
Random 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> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> | |
| </head> | |
| <body> | |
| <main> | |
| <div class="container"></div> | |
| </main> | |
| <hr/> | |
| <header> | |
| <div class="container"> | |
| <h1>Random circles</h1> | |
| </div> | |
| </header> | |
| <hr/> | |
| <footer class="footer"> | |
| <div class="container"></div> | |
| </footer> | |
| <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script src="script.js" charset="utf-8"></script> | |
| </body> | |
| </html> |
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
| var randomInt = function (low, high) { | |
| return Math.floor(Math.random() * (high - low + 1) + low); | |
| } | |
| var sample = function (low, high, length) { | |
| var numbers = new Array(length); | |
| for (var i = 0; i < length; i++) | |
| numbers[i] = randomInt(low, high); | |
| return numbers; | |
| } | |
| var randomColor = function () { | |
| return "hsl(" + Math.random() * 360 + ", 100%, 50%)" | |
| } | |
| var changeCircles = function (duration, maxRadius) { | |
| d3.selectAll("circle") | |
| .transition() | |
| .duration(duration) | |
| .attr("fill", function() { return randomColor(); }) | |
| .delay(function() { return randomInt(1, maxRadius); }) | |
| .attr("r", function() { return randomInt(1, maxRadius); }); | |
| } | |
| var cicleLoop = function (maxRadius) { | |
| var duration = 1000; | |
| var repeat = function() { | |
| changeCircles(duration, maxRadius); | |
| setTimeout(repeat, duration); | |
| }; | |
| repeat(); | |
| } | |
| var radius = randomInt(1, 100); | |
| var data = sample(1, 50, radius); | |
| d3.select("main .container") | |
| .selectAll("svg circle") | |
| .data(data) | |
| .enter() | |
| .append("svg") | |
| .attr({height: radius * 2, width: radius * 2}) | |
| .append("circle") | |
| .attr({cx: radius, cy: radius, fill: "red"}) | |
| .attr('r', function (datum) { return datum; }); | |
| cicleLoop(radius * 2.5); | |
| var footer = d3.selectAll("footer .container") | |
| .append("ul") | |
| .attr("class", "list-inline"); | |
| footer.selectAll("li") | |
| .data(data) | |
| .enter() | |
| .append("li") | |
| .text(function(datum) { return datum }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment