osoken · May 19, 2016 14:32
diff --git a/README.md b/README.md
diff --git a/data.tsv b/data.tsv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <script src="//d3js.org/d3.v3.min.js"></script>
 <script src="//d3js.org/topojson.v1.min.js"></script>
 <body>
 <div></div>
 <script>
 var width = 960,
    height = 500;

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

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

 var velocity = 0.02;

 var graticule = d3.geo.graticule()();
 var sphere = {type: "Sphere"};

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

 var isVisible = {
  front: function(d) {
    return ((Math.cos((projection.rotate()[0]+d.lng)/360 * Math.PI * 2) > 0)?'visible':'hidden');
  },
  back: function(d) {
    return ((Math.cos((projection.rotate()[0]+d.lng)/360 * Math.PI * 2) < 0)?'visible':'hidden');
  }
 };

 var magScale = d3.scale.pow().exponent(2).range([0,16]);
 var depthScale = d3.scale.linear().range([0, 180]);
 var magValue = function(d) {return magScale(d.mag);}
 var depthValue = function(d) {return d3.hsl(depthScale(d.depth), 1.0, 0.8);}

 d3.json("./ne_110m_land.json", function(error, world) {
  if (error) throw error;

  d3.tsv('data.tsv', function(error, data) {
    data.forEach(function(d) {
      d.lng = +d.longitude;
      d.lat = +d.latitude;
      d.mag = +d.mag;
      d.depth = +d.depth;
      d.coordinate = function() {return projection([d.lng, d.lat]);};
      d.xy = d.coordinate();
    });
    magScale.domain([1, d3.max(data, function(d) {return d.mag;})]);
    depthScale.domain([0, d3.max(data, function(d) {return d.depth;})]);

    projection.clipAngle(180);
    svg.selectAll('circle.back').data(data).enter().append('circle')
      .attr('class', 'data back')
      .attr('cx', function(d){return d.xy[0];})
      .attr('cy', function(d){return d.xy[1];})
      .attr('fill', depthValue)
      .attr('stroke', '#FFF')
      .attr('stroke-width', 1.0)
      .attr('opacity', 0.75)
      .attr('visibility', isVisible.back)
      .attr('r', magValue);
    svg.append('path')
        .datum(topojson.feature(world, world.objects.ne_110m_land))
        .attr("class", "land back")
        .attr('opacity', 0.8)
        .attr('fill', '#dadac4')
        .attr("d", path);
    projection.clipAngle(90);

    svg.append('path')
        .datum(graticule)
        .attr('class', 'grid front')
        .attr('fill', 'none')
        .attr('stroke', '#CCC')
        .attr('d', path);

    svg.append('path')
        .datum(sphere)
        .attr('class', 'grid front')
        .attr('fill', 'rgba(255,255,255,0.4)')
        .attr('stroke', '#000')
        .attr('stroke-width', 1)
        .attr('d', path);
    svg.append("path")
        .datum(topojson.feature(world, world.objects.ne_110m_land))
        .attr("class", "land front")
        .attr('fill', '#737368')
        .attr("d", path);


    svg.selectAll('circle.front').data(data).enter().append('circle')
      .attr('class', 'data front')
      .attr('cx', function(d){return d.xy[0];})
      .attr('cy', function(d){return d.xy[1];})
      .attr('fill', depthValue)
      .attr('stroke', '#FFF')
      .attr('stroke-width', 1.0)
      .attr('opacity', 0.75)
      .attr('visibility', isVisible.front)
      .attr('r', magValue);
    d3.timer(function(elapsed) {
      projection.rotate([velocity * elapsed, 0]).clipAngle(180);

 //      console.log(((data[0].lng < 0)?(data[0].lng+360):data[0].lng) - projection.rotate()[0]);

      svg.selectAll("path.back").attr("d", path);
      projection.clipAngle(90);
      svg.selectAll("path.front").attr("d", path);
      data.forEach(function(d) {
        d.xy = d.coordinate();
      })
      svg.selectAll('circle.front')
        .attr('cx', function(d){return d.xy[0];})
        .attr('cy', function(d){return d.xy[1];})
        .attr('visibility', isVisible.front);
        svg.selectAll('circle.back')
          .attr('cx', function(d){return d.xy[0];})
          .attr('cy', function(d){return d.xy[1];})
          .attr('visibility', isVisible.back);
    });
  });
 });
 </script>
diff --git a/ne_110m_land.json b/ne_110m_land.json
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<body>
	<div></div>
	<script>
	var width = 960,
	height = 500;

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

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

	var velocity = 0.02;

	var graticule = d3.geo.graticule()();
	var sphere = {type: "Sphere"};

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

	var isVisible = {
	front: function(d) {
	return ((Math.cos((projection.rotate()[0]+d.lng)/360 * Math.PI * 2) > 0)?'visible':'hidden');
	},
	back: function(d) {
	return ((Math.cos((projection.rotate()[0]+d.lng)/360 * Math.PI * 2) < 0)?'visible':'hidden');
	}
	};

	var magScale = d3.scale.pow().exponent(2).range([0,16]);
	var depthScale = d3.scale.linear().range([0, 180]);
	var magValue = function(d) {return magScale(d.mag);}
	var depthValue = function(d) {return d3.hsl(depthScale(d.depth), 1.0, 0.8);}

	d3.json("./ne_110m_land.json", function(error, world) {
	if (error) throw error;

	d3.tsv('data.tsv', function(error, data) {
	data.forEach(function(d) {
	d.lng = +d.longitude;
	d.lat = +d.latitude;
	d.mag = +d.mag;
	d.depth = +d.depth;
	d.coordinate = function() {return projection([d.lng, d.lat]);};
	d.xy = d.coordinate();
	});
	magScale.domain([1, d3.max(data, function(d) {return d.mag;})]);
	depthScale.domain([0, d3.max(data, function(d) {return d.depth;})]);

	projection.clipAngle(180);
	svg.selectAll('circle.back').data(data).enter().append('circle')
	.attr('class', 'data back')
	.attr('cx', function(d){return d.xy[0];})
	.attr('cy', function(d){return d.xy[1];})
	.attr('fill', depthValue)
	.attr('stroke', '#FFF')
	.attr('stroke-width', 1.0)
	.attr('opacity', 0.75)
	.attr('visibility', isVisible.back)
	.attr('r', magValue);
	svg.append('path')
	.datum(topojson.feature(world, world.objects.ne_110m_land))
	.attr("class", "land back")
	.attr('opacity', 0.8)
	.attr('fill', '#dadac4')
	.attr("d", path);
	projection.clipAngle(90);

	svg.append('path')
	.datum(graticule)
	.attr('class', 'grid front')
	.attr('fill', 'none')
	.attr('stroke', '#CCC')
	.attr('d', path);

	svg.append('path')
	.datum(sphere)
	.attr('class', 'grid front')
	.attr('fill', 'rgba(255,255,255,0.4)')
	.attr('stroke', '#000')
	.attr('stroke-width', 1)
	.attr('d', path);
	svg.append("path")
	.datum(topojson.feature(world, world.objects.ne_110m_land))
	.attr("class", "land front")
	.attr('fill', '#737368')
	.attr("d", path);


	svg.selectAll('circle.front').data(data).enter().append('circle')
	.attr('class', 'data front')
	.attr('cx', function(d){return d.xy[0];})
	.attr('cy', function(d){return d.xy[1];})
	.attr('fill', depthValue)
	.attr('stroke', '#FFF')
	.attr('stroke-width', 1.0)
	.attr('opacity', 0.75)
	.attr('visibility', isVisible.front)
	.attr('r', magValue);
	d3.timer(function(elapsed) {
	projection.rotate([velocity * elapsed, 0]).clipAngle(180);

	// console.log(((data[0].lng < 0)?(data[0].lng+360):data[0].lng) - projection.rotate()[0]);

	svg.selectAll("path.back").attr("d", path);
	projection.clipAngle(90);
	svg.selectAll("path.front").attr("d", path);
	data.forEach(function(d) {
	d.xy = d.coordinate();
	})
	svg.selectAll('circle.front')
	.attr('cx', function(d){return d.xy[0];})
	.attr('cy', function(d){return d.xy[1];})
	.attr('visibility', isVisible.front);
	svg.selectAll('circle.back')
	.attr('cx', function(d){return d.xy[0];})
	.attr('cy', function(d){return d.xy[1];})
	.attr('visibility', isVisible.back);
	});
	});
	});
	</script>