damiankao/gist:10324781

## gistfile1.js
<htmk>
  <head>
<style>

.graticule {
  fill: none;
  stroke: #777;
  stroke-opacity: .5;
  stroke-width: .5px;
}

.land {
  fill: #999;
}

.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}

svg .path {
  fill: none;
  stroke-opacity: .8;
  stroke-dasharray: 3,2;
  stroke: #f44;
}

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

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

var width = window.innerWidth,
    height = window.innerHeight;

var projection = d3.geo.mercator()
    .scale(150)
    .translate([width / 2, height / 2])
    .precision(.1);

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("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 pathLine = d3.svg.line()
        .interpolate("cardinal")
        .x(function(d) { return projection([d.lon, d.lat])[0]; })
        .y(function(d) { return projection([d.lon, d.lat])[1]; });

    var d = [{lon:-74,lat:50,name:'ny'}]

    var coord = projection([-74.001532, 40.720662]);
    svg
      .selectAll('circle')
      .data(d)
      .enter()
      .append('circle')
      .each(function(d,i) {
        var coord = projection([d.lon,d.lat]);
        d3.select(this)
          .attr('cx', coord[0])
          .attr('cy', coord[1])
          .attr('r',4)
          .attr('fill','black')
      })

    svg
      .append('circle')
      .attr('cx',coord[0])
      .attr('cy',coord[1])
      .attr('r',3)
      .attr('fill','black')

});


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

</script>
</body>
</html>
	<htmk>
	<head>
	<style>

	.graticule {
	fill: none;
	stroke: #777;
	stroke-opacity: .5;
	stroke-width: .5px;
	}

	.land {
	fill: #999;
	}

	.boundary {
	fill: none;
	stroke: #fff;
	stroke-width: .5px;
	}

	svg .path {
	fill: none;
	stroke-opacity: .8;
	stroke-dasharray: 3,2;
	stroke: #f44;
	}

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

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

	var width = window.innerWidth,
	height = window.innerHeight;

	var projection = d3.geo.mercator()
	.scale(150)
	.translate([width / 2, height / 2])
	.precision(.1);

	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("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 pathLine = d3.svg.line()
	.interpolate("cardinal")
	.x(function(d) { return projection([d.lon, d.lat])[0]; })
	.y(function(d) { return projection([d.lon, d.lat])[1]; });

	var d = [{lon:-74,lat:50,name:'ny'}]

	var coord = projection([-74.001532, 40.720662]);
	svg
	.selectAll('circle')
	.data(d)
	.enter()
	.append('circle')
	.each(function(d,i) {
	var coord = projection([d.lon,d.lat]);
	d3.select(this)
	.attr('cx', coord[0])
	.attr('cy', coord[1])
	.attr('r',4)
	.attr('fill','black')
	})

	svg
	.append('circle')
	.attr('cx',coord[0])
	.attr('cy',coord[1])
	.attr('r',3)
	.attr('fill','black')

	});


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

	</script>
	</body>
	</html>