D3 Examples - Sunpath using D3 and A-Frame

xxxxxxxxxx
 
<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>
​
<body>
  <a-scene>
    <a-entity id="line" meshline="lineWidth: 4; color: black"></a-entity>
        <a-entity id="analemma" meshline="lineWidth: 1; color: gray"></a-entity>
    <a-sky color="cyan"></a-sky>
    
  </a-scene>
</body>
​
<script>
  
    Date.prototype.stdTimezoneOffset = function() {
        var jan = new Date(this.getFullYear(), 0, 1);
        var jul = new Date(this.getFullYear(), 6, 1);
        return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
    }
​
    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>
    