D3 Star Trails

##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>

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 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>

https://d3js.org/d3.v4.min.js