D3 Examples - Friendly geo-area selection

xxxxxxxxxx
 
<!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});
​
    var coast = 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", "Coast_border")
        .style({'fill': 'none', 'stroke': '#0978AB', 'stroke-linejoin': 'round'})
        .style({'stroke-width': 1 })
        .attr("d", path);
});
​
​
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>
​
    