title: d3.js. Spinning globe with bars
body: <p>I am trying to create spinning globe with bars like in <a href="http://data-arts.appspot.com/globe/" rel="noreferrer">this example</a>. You can see my example <a href="http://jsfiddle.net/zeleniy/jrh5xucs/" rel="noreferrer">here</a>. 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?</p>
  
  <pre><code> /*
   * 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);  
    })
  })
  </code></pre>