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
Last active
March 29, 2017 07:02
-
-
Save espinielli/19f29c456e6a7c3e8af6f59c4b5227f6 to your computer and use it in GitHub Desktop.
LAEA: show coordinates and pixels
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-3.0 | |
| height: 960 | |
| border: no |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment