Friendly geo-area selection

WP style user-friendly selection of geo-coordinates (decimal degrees).

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

.background {
  fill: #C6ECFF;
}

.foreground {
  fill: none;
  stroke: #333;
  stroke-width: 1.5px;
}

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

.graticule :nth-child(2n) {
  stroke-dasharray: 2,2;
}

.brush .extent {
  stroke: #B10000;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

</style>
<body>
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.9/d3.geo.projection.min.js"></script>
	
<script>

var width = 960,
    height = 500;

var projection = d3.geo.equirectangular();

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

var graticule = d3.geo.graticule();

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

brush = d3.svg.brush()
    .x(x)
    .y(y)
    .on("brush", brushed)
    .on("brushend", bounding)
    .extent([[100, 100], [200, 200]]);

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

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

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

svg.append("g")
    .attr("class", "graticule")
  .selectAll("path")
    .data(graticule.lines)
  .enter().append("path")
    .attr("d", path);

svg.append("use")
    .attr("class", "foreground")
    .attr("xlink:href", "#sphere");
    
    svg.append("g")
    .attr("class", "brush")
    .call(brush);
/* ****************************************************** */
/* INJECT GIS ******************************************* */
d3.json("./world-110m-ids.json", function(error, world) {
	var country = svg.selectAll(".country")
		.data(topojson.feature(world, world.objects.countries).features)
	.enter().insert("path", ".graticule")
		.attr("id", function(d){ return d.id } )
		.attr("class", "country")
		.style("fill", "#FDFBEA")
		.attr("d", path);
	var boundaries = svg.insert("path", ".graticule")
        //.datum( topojson.mesh(world, world.objects.countries, function(a,b) { if (a!==b){var ret = b;}return ret;}))
		.datum( topojson.mesh(world, world.objects.countries, function(a,b) { return a!==b; }))
		.attr("class", "boundary")
		.attr("d", path)
		.style({'fill':'none','stroke': '#656565', 'stroke-width': 0.5});

brushed();
function brushed() {

}

function bounding() {
  var extent = brush.extent();
	$("#area").text("WNES=[ [ "+projection.invert([ x(extent[0][0]),y(extent[1][1]) ])+"],["+ projection.invert([x(extent[1][0]),y(extent[0][1])])+" ] ]")
  console.log("top left: " + projection.invert([x(extent[0][0]),y(extent[1][1])]))
  console.log("bottom right: " + projection.invert([x(extent[1][0]),y(extent[0][1])]))
}

</script>
	<div id="area">WNES will appears after you selected an area.</div>
</body>

https://code.jquery.com/jquery-2.1.0.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.9/d3.geo.projection.min.js