Rotating Planetary Grid

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    .cool-point {
        fill: none;
        stroke: #33e;
        stroke-width: 1.5;
        stroke-opacity: 0.33;
    }

.hot-point {
        fill: none;
        stroke: #f33;
        stroke-width: 1.5;
        stroke-opacity: 0.33;
    }

.balance-point {
        fill: none;
        stroke: #333;
        stroke-width: 1;
        stroke-opacity: 0.33;
    }

.graticule {
        fill: none;
        stroke: #333;
        stroke-width: 0.125;
        stroke-opacity: 0.66;
    }

.cool-edge {
        fill: none;
        stroke: #33e;
        stroke-width: 1.5;
        stroke-opacity: .25;
    }

.hot-edge {
        fill: none;
        stroke: #f33;
        stroke-width: 1.5;
        stroke-opacity: .25;
    }

.balance-edge {
        fill: none;
        stroke: #333;
        stroke-width: 1;
        stroke-opacity: .25;
    }

.country {
        fill: #ddd;
        stroke-width: 0.5;
        stroke-opacity: .75;
        stroke: #fff;
    }

.place {
        fill: #666;
        fill-opacity: 0.87;
        stroke-width: 0.75;
        stroke-opacity: 0.87;
        stroke: #444;
    }

.place-pyramid {
        fill: #ff0;
        stroke-width: 1;
        stroke: #444;
    }

.place-megalith {
        fill: #88f;
        stroke-width: 1;
        stroke: #444;
    }

.place-temple {
        fill: #f0f;
        stroke-width: 1;
        stroke: #444;
    }

.place-mound {
        fill: #4c4;
        stroke-width: 1;
        stroke: #444;
    }

.place-volcano {
        fill: #f44;
        stroke-width: 1;
        stroke: #444;
    }

</style>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script src="//mapbox.github.io/togeojson/togeojson.js"></script>
<script src="/darosh/raw/2fe464efd794bde5ed68/hexakis-icosahedron.js"></script>
<script>
    var width = 960, height = 500;

var projection = d3.geo
            .orthographic()
            .clipAngle(90)
            .translate([width / 2, height / 2])
            .rotate([-45, 0, 0])
            .scale(245);

var projectionLines = d3.geo
            .orthographic()
            .clipAngle(90)
            .translate([width / 2, height / 2])
            .rotate([33 - 45, 0, 0])
            .scale(245);

var path = d3.geo.path()
            .projection(projection);

var pathLines = d3.geo.path()
            .projection(projectionLines);

var svg = d3.select('body').append('svg').attr('width', width).attr('height', height);

var gr = svg.append('path').datum(d3.geo.graticule()).attr('class', 'graticule').attr('d', path);
    var countries = svg.append('path').attr('class', 'country');
    var h = d3.geo.hexakisIcosahedron;
    var ce = svg.append('path').datum(h.icosahedronEdges).attr('class', 'cool-edge').attr('d', pathLines);
    var he = svg.append('path').datum(h.hexakisCenterEdges).attr('class', 'hot-edge').attr('d', pathLines);
    var be = svg.append('path').datum(h.hexakisSideEdges).attr('class', 'balance-edge').attr('d', pathLines);
    var cp = svg.append('path').datum(h.icosahedronPoints).attr('class', 'cool-point').attr('d', pathLines);
    var hp = svg.append('path').datum(h.hexakisCenterPoints).attr('class', 'hot-point').attr('d', pathLines);
    var bp = svg.append('path').datum(h.hexakisCrossPoints).attr('class', 'balance-point').attr('d', pathLines);
    var p;

d3.json('/darosh/raw/2d12a584a14910032ab8/countries.json', function (topo) {
        p = topojson.feature(topo, topo.objects.countries);
        countries.attr('d', path(p));
    });

d3.xml('/darosh/raw/2d12a584a14910032ab8/places.kml', function (xml) {
        var g = toGeoJSON.kml(xml);

svg.selectAll('a')
                .data(g.features)
                .enter()
                .append('a')
                .attr('xlink:href', function (d) {
                    return 'https://www.google.com/maps/@' +
                            d.geometry.coordinates[1] + ',' + d.geometry.coordinates[0]
                            + ',12z';
                })
                .attr('target', '_blank')
                .append('path')
                .attr('class', function (d) {
                    return 'place place-' + d.properties.description;
                })
                .attr('transform', function (d) {
                    var p = path.centroid(d);
                    return p[0] && p[1] ? 'translate(' + p[0] + ',' + p[1] + ')' : 'translate(1e10,1e10)';
                })
                .attr('d', function (d) {
                    var t = {
                        megalith: 'square',
                        temple: 'cross',
                        mound: 'triangle-up',
                        pyramid: 'triangle-up',
                        place: 'circle',
                        undefined: 'circle'
                    };

var s = t[d.properties.description] === 'circle' ? 24 : 40;

return d3.svg.symbol().size(s).type(t[d.properties.description])();
                })
                .append('title').text(function (d) {
            return d.properties.name;
        });
    });

d3.timer(function (elapsed) {
        elapsed *= 0.02;
        elapsed -= 45;
        projection.rotate([elapsed, 0, 0]);
        projectionLines.rotate([33 + elapsed, 0, 0]);

gr.attr('d', path);
        ce.attr('d', pathLines);
        he.attr('d', pathLines);
        be.attr('d', pathLines);
        cp.attr('d', pathLines);
        hp.attr('d', pathLines);
        bp.attr('d', pathLines);

if (p) {
            countries.attr('d', path(p));
        }

svg.selectAll('.place ')
                .attr('transform', function (d) {
                    var p = path.centroid(d);
                    return p[0] && p[1] ? 'translate(' + p[0] + ',' + p[1] + ')' : 'translate(1e10,1e10)';
                })

});
</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js

https://mapbox.github.io/togeojson/togeojson.js