espinielli/.block

## .block
license: gpl-3.0
height: 960
border: no

## README.md

      
    Raw
  

              README.md
            
          
    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

  
## index.html
<!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>
	<!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>