xxxxxxxxxx
##Artifical Sun
<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>
<svg>
</svg>
<body>
<script>
var width = 760;
var height = 500;
var x_center = width/2;
var y_center = height/2;
var svg = d3.select('svg');
for (var i = 0; i < 7000; i++){
var x = Math.random()*width;
var y = Math.random()*height;
// get distance of data point from center
var d = Math.sqrt(Math.pow((x-x_center),2) + Math.pow((y-y_center),2));
var color = "black"
if (d <= 180)
color = "orange";
else if (d > 180 & d <=200)
color = "red";
else
color = 'black';
var data = {x: x,
y: y,
radius: 5,
fill: color,
opacity: 0.5};
svg.append('circle')
.datum(data)
}
svg.selectAll('circle')
.attr('r', function (d){
return d.radius;
})
.attr('cx', function (d){
return d.x;
})
.attr('cy', function (d){
return d.y;
})
.attr('fill', function (d){
return d.fill;
})
.style('opacity', function (d){
return d.opacity;
});
console.log(d3.selectAll('circle'));
</script>
</body>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js