Built with blockbuilder.org
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| svg { width: 100%; height: 100%; } | |
| </style> | |
| </head> | |
| <body> | |
| <svg> | |
| </svg> | |
| <script> | |
| // var width = 960; | |
| //var height = 500; | |
| // var svg = d3.select("body").append("svg") | |
| // .attr("width", width) | |
| // .attr("height", height) | |
| // .append("g"); | |
| height = 500 | |
| width = 800 | |
| var svg = d3.select('svg'); | |
| for (var i = 0; i < 500; i++) { | |
| var data = { | |
| x : Math.random() * width * Math.random(), | |
| y : Math.random() * height * Math.random(), | |
| radius : Math.random() * 10 + 1, | |
| color : Math.random() < 0.42 ? 'orange' : 'black'} | |
| svg.append('circle') | |
| .datum(data)}; | |
| d3.selectAll('circle') | |
| .attr('cx', function(d) { | |
| return d.x; | |
| }) | |
| .attr('cy', function(d) { | |
| return d.y; | |
| }) | |
| .attr('r', function(d){ | |
| return d.radius; | |
| }) | |
| .style('fill', function(d) { | |
| return d.color | |
| }) | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment