I am trying to create spinning globe with bars like in this example. You can see my example here. And everything goes fine until bars go over horizon. I have no idea how to cut bars from the bottom when they on other side of planet. Anybody can suggest me how to do it?
/*
* Original code source
* http://codepen.io/teetteet/pen/Dgvfw
*/
var width = 400;
var height = 400;
var scrollSpeed = 50;
var current = 180;
var longitudeScale = d3.scale.linear()
.domain([0, width])
.range([-180, 180]);
var planetProjection = d3.geo.orthographic()
.scale(200)
.rotate([longitudeScale(current), 0])
.translate([width / 2, height / 2])
.clipAngle(90);
var barProjection = d3.geo.orthographic()
.scale(200)
.rotate([longitudeScale(current), 0])
.translate([width / 2, height / 2])
.clipAngle(90);
var path = d3.geo.path()
.projection(planetProjection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("https://dl.dropboxusercontent.com/s/4hp49mvf7pa2cg2/world-110m.json?dl=1", function(error, world) {
if (error) throw error;
var planet = svg.append("path")
.datum(topojson.feature(world, world.objects.land))
.attr("class", "land")
.attr("d", path);
d3.csv("https://dl.dropboxusercontent.com/s/v4kn2hrnjlgx1np/data.csv?dl=1", function(error, data) {
if (error) throw error;
var max = d3.max(data, function(d) {
return parseInt(d.Value);
})
var lengthScale = d3.scale.linear()
.domain([0, max])
.range([200, 250])
var bars = svg.selectAll(".bar")
.data(data)
.enter()
.append("line")
.attr("class", "bar")
.attr("stroke", "red")
.attr("stroke-width", "2");
function bgscroll() {
current += 1;
planetProjection.rotate([longitudeScale(current), 0]);
barProjection.rotate([longitudeScale(current), 0]);
planet.attr("d", path);
bars.attr("x1", function(d) {
return planetProjection([d.Longitude, d.Latitude])[0];
}).attr("y1", function(d) {
return planetProjection([d.Longitude, d.Latitude])[1];
}).attr("x2", function(d) {
barProjection.scale(lengthScale(d.Value));
return barProjection([d.Longitude, d.Latitude])[0];
}).attr("y2", function(d) {
barProjection.scale(lengthScale(d.Value));
return barProjection([d.Longitude, d.Latitude])[1];
});
}
// bgscroll();
setInterval(bgscroll, scrollSpeed);
})
})
