LAEA: show coordinates and pixels

Show coordinates (and pixels) under mouse in order to visually determine the rectangular bounding box in projected coordinates for a clipping polygon...

forked from mbostock's block: Lambert Azimuthal Equal-Area

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

.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}

.fill {
  fill: #fff;
}

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

.land {
  fill: #222;
}

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

svg {
	cursor: crosshair;
}

.coordinates, .pixels {
	text-anchor: middle;
	fill: #000;
	text-shadow: -1px  0px 0px #fff, 
                0px  1px 0px #fff,
                1px  0px 0px #fff, 
                0px -1px 0px #fff;
}

.hidden {
	display: none;
}

</style>
<svg width="600" height="600"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

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

var coordinateFormat = d3.format(".2f");

var projection = d3.geoAzimuthalEqualArea()
    .scale(239)
    .translate([width / 2, height / 2 + 150])
    .precision(0.1);

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

var graticule = d3.geoGraticule();

svg.append("defs").append("path")
    .datum({type: "Sphere"})
    .attr("id", "sphere")
    .attr("d", path);

svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");

svg.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");

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

d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-50m.json", function(error, world) {
  if (error) throw error;

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 drag = d3.drag()
    .subject(function(d) { return {x: d[0], y: d[1]}; })
    .on("drag", dragged);

var r = svg.select("rect")
  	.append("rect")
  		.attr("x", width / 2)
  		.attr("y", -height / 2)
  		.attr("height", 200)
  		.attr("width", 300)
  		.attr("fill", "red")
  		.attr("fill-opacity", 0.5)
      .on("mouseup", mouseup)
    .call(drag);

function dragged(d) {
  d[0] = d3.event.x, d[1] = d3.event.y;
  if (this.nextSibling) this.parentNode.appendChild(this);
  d3.select(this).attr("transform", "translate(" + d + ")");
}

function mouseup(d, i) {
//   if (d3.event.defaultPrevented) return; // dragged

d3.select(this).transition()
      .style("fill", "black")
      .attr("r", 64)
    .transition()
      .attr("r", 32)
      .style("fill", color(i));
}
;

var coordinates = svg.append("text")
		.attr("class", "coordinates")
		.attr("dy", "-1.66em")
		.classed("hidden", true);

var pixels = svg.append("text")
		.attr("class", "pixels")
		.attr("dy", "-0.55em")
		.classed("hidden", true);

svg
		.on("mousemove", mousemove)
		.on("mouseleave", mouseleave);

function mousemove() {
		var mouse = d3.mouse(this),
				p = projection.invert(mouse),
				text = "(lon=" + coordinateFormat(p[0]) + "°, lat=" + 
							 coordinateFormat(p[1]) + "°)";

coordinates	
			.classed("hidden", false)
			.attr("x", mouse[0])
			.attr("y", mouse[1])
			.text(text);
    text = "[x="+ mouse[0] +", y="+ mouse[1] +"]";
		pixels	
			.classed("hidden", false)
			.attr("x", mouse[0])
			.attr("y", mouse[1])
			.text(text);

}

function mouseleave() {
		coordinates.classed("hidden", true);
	}
});

</script>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v1.min.js