Sunpath using D3 and A-Frame

This is an example to use A-Frame and D3 together to create a scene, in this case a sunpath.

Next Steps

Add location drop down.
Add weather data overlay.
Add import epw to generate the sun path from an epw weather file.

<head>
  <title>Sunpath using D3 and A-Frame</title>
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  <script src="https://raw.githack.com/andreasplesch/aframe-meshline-component/master/dist/aframe-meshline-component.min.js"></script>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="suncalc.js"></script>
</head>

Date.prototype.isDaylightSaving = function() {
		return this.getTimezoneOffset() < this.stdTimezoneOffset();
	}
	
  var radius = 10,
	lat = 39.95,
	lon = -75.16;  
  
  // will be used later to color the suns
  var color = d3.scaleLinear()
    .range(["#3182bd", "#f33"]);
  
  // create the base plane
  var scene = d3.select("a-scene");
  
  scene.append('a-circle')
  	.attr("radius", radius)
  	.attr("position", "0 0 0")
  	.attr("rotation", "-90 0 0")
  	.attr("color", "gray");
  
	// draw daily sun curves
	for (var m = 0; m <= 11; m++){
		var points = [];	
		for (var h = 0; h <= 24; h++){
			
			// add a point to curve for every 15 minutes to get a smoother curve
			for (var i=0; i <= 3; i++){
				var dt = new Date(2017, m, 21, h + i / 4);
				var p = getSunPositionXYZ(radius, dt, lat, lon);

points.push(p.join(" "));
			
				// add sun sphere for each hour
				if (i == 0){
					scene.append('a-sphere')
						.attr("position", p.join(" "))
						.attr("radius", radius / 100)
						.attr("color", "yellow");
				}
			}
		}

// append first point once more
		var dt = new Date(2017, 1, 21, 0);
		var p = getSunPositionXYZ(radius, dt, lat, lon);
		points.push(p.join(" "));
		
		// add a curve for each day
		scene.append('a-entity')
			.attr("meshline", "lineWidth: 2; path: " + points.join(","));
	}
		
	// get analemma positions
	for (var h = 0; h <= 24; h++){
		var points = [];	
		var hour = h;
		for (var m = 0; m <= 12; m++){
			
			for (var d = 1; d <= 3; d++){
				
				var dt = new Date(2017, m, d * 7, hour);
						
				if ( dt.isDaylightSaving() ){
					dt = new Date(2017, m, d * 7, hour + 1); 
				}
				
				var p = getSunPositionXYZ(radius, dt, lat, lon);
		
				points.push(p.join(" "));
			}
		}

// add a curve for each hour
		scene.append('a-entity')
			.attr("meshline", "lineWidth: 2; path: " + points.join(","));
	}

function getSunPositionXYZ( radius, time, latitude, longitude ) {
		/* from https://github.com/ladybug-tools/ladybug-web/blob/gh-pages/analemma-3d/analemma-3d-r18.html */
		var sunPosition, x, y, z;
		var d2r = Math.PI / 180;
		var r2d = 180 / Math.PI;
		
		sunPosition = SunCalc.getPosition( time, latitude, longitude);
		
		x = radius * Math.cos( sunPosition.altitude ) * Math.sin( sunPosition.azimuth + Math.PI );
		y = radius * Math.cos( sunPosition.altitude ) * Math.cos( sunPosition.azimuth + Math.PI );
		z = radius * Math.sin( sunPosition.altitude );
		
		return [x, z, y];
	}
</script>

https://aframe.io/releases/1.0.4/aframe.min.js

https://raw.githack.com/andreasplesch/aframe-meshline-component/master/dist/aframe-meshline-component.min.js

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