mpmckenna8/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Working on figuring out how rotating stuff works w/ d3, but w/ the Gnomic projection for a little fun. When I still absolutely didn't know what was going on (I still don't think I get it) this rotates the map on both the axis so you can see the whole world gnomized from different centers if you're willing to stare at your screen long enough.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.graticule {
  fill: none;
  stroke: rgb(243, 255, 107);
  stroke-width: .5px;
  stroke-opacity: .5;
}

.land {
  fill: rgb(229, 110, 255);
}

.boundary {
  fill: none;
  stroke:rgb(229, 110, 255);
  stroke-width: .5px;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 960,

// should try changing the rotate values. think first at 0 stops rolling hemispheres, tho I kind of like that.
        rotate = [10, -10],
    velocity = [.003, -.001],
    time = Date.now();


var projection = d3.geo.gnomonic()
    .clipAngle(90 - 1e-3)
    .scale(150)
    .translate([width/2, height / 2])
    .precision(.1)
    // rotate([yaw, pitch, roll]) or long lat and roll
    .rotate([0,-90 ,25])
  //  .center([-240,20])


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

var graticule = d3.geo.graticule();

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

svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

d3.json("/mpmckenna8/raw/9965876/world-50m.json", function(error, world) {
  svg.insert("path", ".graticule")
      .datum(topojson.feature(world, world.objects.land))
      .attr("class", "land")
      .attr("d", path);

  svg.insert("path", ".graticule")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
      .attr("d", path);

var feature = svg.selectAll("path");


      d3.timer(function(){
  var dt = Date.now() - time;

projection.rotate([rotate[0] + velocity[0] * dt, rotate[1] + velocity[1] * dt]);
          //.style("stroke-width", 4 + "px")
          //.style("stroke", "pink");

          feature.attr("d", path);
})


          d3.selectAll('.land')
            .transition()
            //.delay(699)
            .duration(69999)
            .style("fill","rgb(108, 255, 110)");

});

d3.select('svg')
  .style('background', 'rgb(108, 129, 255)')

d3.select(self.frameElement).style("height", height + "px");


</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.graticule {
	fill: none;
	stroke: rgb(243, 255, 107);
	stroke-width: .5px;
	stroke-opacity: .5;
	}

	.land {
	fill: rgb(229, 110, 255);
	}

	.boundary {
	fill: none;
	stroke:rgb(229, 110, 255);
	stroke-width: .5px;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script>

	var width = 960,
	height = 960,

	// should try changing the rotate values. think first at 0 stops rolling hemispheres, tho I kind of like that.
	rotate = [10, -10],
	velocity = [.003, -.001],
	time = Date.now();



	var projection = d3.geo.gnomonic()
	.clipAngle(90 - 1e-3)
	.scale(150)
	.translate([width/2, height / 2])
	.precision(.1)
	// rotate([yaw, pitch, roll]) or long lat and roll
	.rotate([0,-90 ,25])
	// .center([-240,20])


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

	var graticule = d3.geo.graticule();

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

	svg.append("path")
	.datum(graticule)
	.attr("class", "graticule")
	.attr("d", path);

	d3.json("/mpmckenna8/raw/9965876/world-50m.json", function(error, world) {
	svg.insert("path", ".graticule")
	.datum(topojson.feature(world, world.objects.land))
	.attr("class", "land")
	.attr("d", path);

	svg.insert("path", ".graticule")
	.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
	.attr("class", "boundary")
	.attr("d", path);

	var feature = svg.selectAll("path");


	d3.timer(function(){
	var dt = Date.now() - time;

	projection.rotate([rotate[0] + velocity[0] * dt, rotate[1] + velocity[1] * dt]);
	//.style("stroke-width", 4 + "px")
	//.style("stroke", "pink");

	feature.attr("d", path);
	})



	d3.selectAll('.land')
	.transition()
	//.delay(699)
	.duration(69999)
	.style("fill","rgb(108, 255, 110)");

	});

	d3.select('svg')
	.style('background', 'rgb(108, 129, 255)')

	d3.select(self.frameElement).style("height", height + "px");








	</script>