markmarkoh · August 29, 2012 06:06
diff --git a/index.html b/index.html
 <!doctype html>
 <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
 <!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
 <!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title></title>
  <meta name="description" content="">

  <meta name="viewport" content="width=device-width">
 <style>
 .background {
  fill: none;
  pointer-events: all;
 }

 #states {
  fill: #aaa;
  stroke: #fff;
  stroke-width: 1.5px;
 }

 #states .active {
  fill: steelblue;
 }

 </style>
 </head>
 <body>
  <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
  <header>

  </header>
  <div id="body">

  </div>
  <footer>

  </footer>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.5.0"></script>


  <script>
 (function() {
  var width = 1200,
      height = 800,
      centered;

  var projection = projector = d3.geo.equirectangular()
      .scale(width)
      .translate([0, 0]);

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

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

  svg.append("svg:rect")
      .attr("class", "background")
      .attr("width", width)
      .attr("height", height)
      .on("click", click);

  var g = svg.append("svg:g")
      .attr("id", "wrapper")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    .append("svg:g")
      .attr("id", "states");

  d3.json("world-countries.json", function(json) {
    g.selectAll("path")
        .data(json.features)
      .enter().append("svg:path")
        .attr("d", path)
        .on("click", click);
  });

  function click(d, isRealClick) {
    var x = 0,
        y = 0,
        k = 1;

    if (d && centered !== d) {
      var centroid = path.centroid(d);
      x = -centroid[0];
      y = -centroid[1];

      var area = path.area(d);

      if (isRealClick === false) {
        k = width / (50 + Math.ceil(path.area(d))); //zoom to "appropriate" levels
      }
      else {
        k = 4;
      }

      centered = d;
    } else {
      centered = null;
    }

    console.log(x, y, centered, d, path.area(d));
    g.selectAll("path")
        .classed("active", centered && function(d) { return d === centered; });

    g.transition()
        .duration(1000)
        .attr("transform", "scale(" + k + ")translate(" + x + "," + y + ")")
        .style("stroke-width", 1/ k + "px");
  }


  function target(coords, isOrigin) {

    var targetCoords = projector([coords.longitude, coords.latitude]);
    console.log(targetCoords, 'pos');

    var lineColor = (isOrigin ? "rgba(255, 120, 120, 1)" : "rgba(120, 120, 255, 1)");

    d3.select("#states")
      .append("svg:line")
        .attr("stroke", lineColor)
        .attr("x1", (isOrigin === true ? 1 : -1) * (width/2))
        .attr("x2", (isOrigin === true ? 1 : -1) * (width/2))
        .attr("y1", -1000)
        .attr("y2", height)
        .transition()
          .duration(2500)
          //.attr("transform", "translate(" + targetCoords[0] + ")");
          .attr("x1", targetCoords[0])
          .attr("x2", targetCoords[0]);

    d3.select("#states")
      .append("svg:line")
        .attr("stroke", lineColor)
        .attr("x1", -1000)
        .attr("x2", width)
        .attr("y1", -1 * (height / 2))
        .attr("y2", -1 * (height / 2))
        .transition()
          .duration(2500)
          .attr("y1", targetCoords[1])
          .attr("y2", targetCoords[1]);

    if ( isOrigin === true) {
      window.setTimeout(function() {
        focus();
      }, 3000);
    }

  }

  function focus(feature) {
    if (!feature) {

      //create a small box to focus in on.
      feature = {"type":"Feature","geometry":{"type":"Polygon","coordinates":[[]]}};
      feature.geometry.coordinates[0] = [
        [targetCoords.longitude, targetCoords.latitude],
        [targetCoords.longitude + 0.5, targetCoords.latitude + 0.5],
        [hostCoords.longitude, hostCoords.latitude],
        [hostCoords.longitude - 0.5, hostCoords.latitude - 0.5]
      ];

      click(feature, false);
    }
  }

  //key largo
  var hostCoords = {longitude: -80.32, latitude: 25.5};
  //new york
  //hostCoords = {longitude: -74.14, latitude: 41.31};
  //iceland
  //hostCoords = {longitude: -21.14, latitude: 64.56};
  //tokyo
  //hostCoords = {longitude: 139.41, latitude: 35.41};
  //austin
  //hostCoords = {longitude: -97.42, latitude: 30.42};

  if (navigator.geolocation) {
    window.onload = function() {
      navigator.geolocation.getCurrentPosition(function(position) {

        console.log(position);
          target(position.coords);

          //save
          targetCoords = position.coords;

          window.setTimeout(function() {

            target(hostCoords, true);

          },600);

        });
    };
  }
  else {
    console.log('hey');
  }

 })();
 </script>

 </body>
 </html>
diff --git a/world-countries.json b/world-countries.json
	<!doctype html>
	<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
	<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
	<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
	<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title></title>
	<meta name="description" content="">

	<meta name="viewport" content="width=device-width">
	<style>
	.background {
	fill: none;
	pointer-events: all;
	}

	#states {
	fill: #aaa;
	stroke: #fff;
	stroke-width: 1.5px;
	}

	#states .active {
	fill: steelblue;
	}

	</style>
	</head>
	<body>
	<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
	<header>

	</header>
	<div id="body">

	</div>
	<footer>

	</footer>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.5.0"></script>


	<script>
	(function() {
	var width = 1200,
	height = 800,
	centered;

	var projection = projector = d3.geo.equirectangular()
	.scale(width)
	.translate([0, 0]);

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

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

	svg.append("svg:rect")
	.attr("class", "background")
	.attr("width", width)
	.attr("height", height)
	.on("click", click);

	var g = svg.append("svg:g")
	.attr("id", "wrapper")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
	.append("svg:g")
	.attr("id", "states");

	d3.json("world-countries.json", function(json) {
	g.selectAll("path")
	.data(json.features)
	.enter().append("svg:path")
	.attr("d", path)
	.on("click", click);
	});

	function click(d, isRealClick) {
	var x = 0,
	y = 0,
	k = 1;

	if (d && centered !== d) {
	var centroid = path.centroid(d);
	x = -centroid[0];
	y = -centroid[1];

	var area = path.area(d);

	if (isRealClick === false) {
	k = width / (50 + Math.ceil(path.area(d))); //zoom to "appropriate" levels
	}
	else {
	k = 4;
	}

	centered = d;
	} else {
	centered = null;
	}

	console.log(x, y, centered, d, path.area(d));
	g.selectAll("path")
	.classed("active", centered && function(d) { return d === centered; });

	g.transition()
	.duration(1000)
	.attr("transform", "scale(" + k + ")translate(" + x + "," + y + ")")
	.style("stroke-width", 1/ k + "px");
	}


	function target(coords, isOrigin) {

	var targetCoords = projector([coords.longitude, coords.latitude]);
	console.log(targetCoords, 'pos');

	var lineColor = (isOrigin ? "rgba(255, 120, 120, 1)" : "rgba(120, 120, 255, 1)");

	d3.select("#states")
	.append("svg:line")
	.attr("stroke", lineColor)
	.attr("x1", (isOrigin === true ? 1 : -1) * (width/2))
	.attr("x2", (isOrigin === true ? 1 : -1) * (width/2))
	.attr("y1", -1000)
	.attr("y2", height)
	.transition()
	.duration(2500)
	//.attr("transform", "translate(" + targetCoords[0] + ")");
	.attr("x1", targetCoords[0])
	.attr("x2", targetCoords[0]);

	d3.select("#states")
	.append("svg:line")
	.attr("stroke", lineColor)
	.attr("x1", -1000)
	.attr("x2", width)
	.attr("y1", -1 * (height / 2))
	.attr("y2", -1 * (height / 2))
	.transition()
	.duration(2500)
	.attr("y1", targetCoords[1])
	.attr("y2", targetCoords[1]);

	if ( isOrigin === true) {
	window.setTimeout(function() {
	focus();
	}, 3000);
	}

	}

	function focus(feature) {
	if (!feature) {

	//create a small box to focus in on.
	feature = {"type":"Feature","geometry":{"type":"Polygon","coordinates":[[]]}};
	feature.geometry.coordinates[0] = [
	[targetCoords.longitude, targetCoords.latitude],
	[targetCoords.longitude + 0.5, targetCoords.latitude + 0.5],
	[hostCoords.longitude, hostCoords.latitude],
	[hostCoords.longitude - 0.5, hostCoords.latitude - 0.5]
	];

	click(feature, false);
	}
	}

	//key largo
	var hostCoords = {longitude: -80.32, latitude: 25.5};
	//new york
	//hostCoords = {longitude: -74.14, latitude: 41.31};
	//iceland
	//hostCoords = {longitude: -21.14, latitude: 64.56};
	//tokyo
	//hostCoords = {longitude: 139.41, latitude: 35.41};
	//austin
	//hostCoords = {longitude: -97.42, latitude: 30.42};

	if (navigator.geolocation) {
	window.onload = function() {
	navigator.geolocation.getCurrentPosition(function(position) {

	console.log(position);
	target(position.coords);

	//save
	targetCoords = position.coords;

	window.setTimeout(function() {

	target(hostCoords, true);

	},600);

	});
	};
	}
	else {
	console.log('hey');
	}

	})();
	</script>

	</body>
	</html>