var chartDiv = document.getElementById("chart");

var svg = d3.select(chartDiv).append("svg");

var projection = d3.geo.orthographic()
    .clipAngle(90);

var fill = svg.append("circle")
    .style("fill", "#0080c0");

var gradient = svg.append("defs").append("radialGradient")
    .attr("id", "gradient")
    .attr("cx", "75%")
    .attr("cy", "30%")
    .attr("r", "100%");

gradient.append("stop")
    .attr("offset", "35%")
    .attr("stop-opacity", 0)
    .attr("stop-color", "#000");

gradient.append("stop")
    .attr("offset", "45%")
    .attr("stop-opacity", 0.1)
    .attr("stop-color", "#000");

gradient.append("stop")
    .attr("offset", "70%")
    .attr("stop-opacity", 0.7)
    .attr("stop-color", "#000");

gradient.append("stop")
    .attr("offset", "100%")
    .attr("stop-opacity", 1)
    .attr("stop-color", "#000");

var graticule = d3.geo.graticule();

var feature = svg.append("path")
    .datum(graticule);

var shade = svg.append("circle")
    .attr("class", "shade")
    .style("fill", "url(#gradient)");

var x,
    y;
svg.on('mousemove', function () {
    x = d3.mouse(this)[0];
    y = d3.mouse(this)[1];
});

// Math.pow(4, Math.abs(x)) - 1

var draw = function() {

    var width = chartDiv.clientWidth,
        height = chartDiv.clientHeight;

    var rotate = [-71.03, 0], //42.37
        velocity = [.018, 0]; //.006

    projection
        .scale(Math.min(width, height) * 0.3)
        .translate([width / 2, height / 2]);


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

    svg
        .attr("width", width)
        .attr("height", height);

    fill
        .attr("cx", width / 2)
        .attr("cy", height / 2)
        .attr("r", Math.min(width, height) * 0.3);

    shade
        .attr("cx", width / 2)
        .attr("cy", height / 2)
        .attr("r", Math.min(width, height) * 0.3);

    d3.timer(function(elapsed) {
        projection.rotate([rotate[0] + elapsed * velocity[0], Math.sin(elapsed / 500) * 23.5 ]); //50000
        feature.attr("d", path);
    });
}

draw();

window.addEventListener("resize", draw);