##D3 Star Trails
An attempt to recreate this picture of star trails in D3.
##D3 Star Trails
An attempt to recreate this picture of star trails in D3.
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style></style> | |
<!-- https://imgur.com/a/5baGi --> | |
<body></body> | |
<script type="text/javascript"> | |
var width = 960; | |
var height = 500; | |
var data = []; | |
var arcs = 4500; | |
var innerradius, outerradius, startangle, endangle, opacity, arccolor; | |
var color = d3.interpolateRgb("#FFFFFF", "#68DAF9"); | |
//Generate random arc properties within constraints | |
for( i=0; i < arcs; i++ ) | |
{ | |
arccolor = d3.randomUniform(0, 1.0)(); | |
innerradius = d3.randomUniform( 10, width )(); | |
if(arccolor < 0.2) | |
{ | |
outerradius = innerradius + d3.randomUniform(0.8, 1.8)(); | |
opacity = d3.randomNormal(0.6, 0.8)(); | |
} | |
if(arccolor > 0.2) | |
{ | |
outerradius = innerradius + d3.randomUniform(0.5, 1.0)(); | |
opacity = d3.randomNormal(0.3, 0.7)(); | |
} | |
var startangle = d3.randomUniform( 0, 2 * Math.PI )(); | |
var endangle = startangle - (25 * Math.PI / 180); | |
var opacity = d3.randomNormal(0.3, 0.8)(); | |
var arccolor = color(d3.randomUniform(0, 1.0)()); | |
//console.log(color(arccolor)); | |
data.push( { innerradius: innerradius, outerradius: outerradius, start: startangle, end: endangle, opacity: opacity, color: arccolor } ); | |
} | |
//Polaris | |
data.push( {innerradius: 0, outerradius: 1.3, start: 0, end: 2 * Math.PI, opacity: 0.85, color: color(0) }); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
.append("g"); | |
svg.append("rect") | |
.attr("width", "100%") | |
.attr("height", "100%") | |
.attr("fill", "#021F3F"); | |
var arc = d3.arc() | |
.startAngle( function(d) { return d.start; }) | |
.endAngle( function(d) { return d.end; }) | |
.innerRadius( function(d) { return d.innerradius; }) | |
.outerRadius( function(d) { return d.outerradius; }); | |
var chart = function(data) { | |
svg.selectAll("path") | |
.data(data) | |
.enter() | |
.append("path") | |
.attr("class", "arc") | |
.attr("d", arc) | |
.attr("transform", "translate(" + width / 5 + "," + height / 1.7 + ")") | |
.attr("fill", function(d) { return d.color; }) | |
.style("opacity", function(d) { return d.opacity; }); | |
} | |
chart(data); | |
</script> |