D3 Examples - Wells

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<style>
    .land   {
        fill: #ccc;
    }
    .states {
        fill: #ccc;
        stroke: white;
    }
    html, body, #map    {
        width: 100%;
        height: 100%;
    }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script>
​
var width = parseInt($('#map').css('width')),
    height = width * 0.642;
    
var projection = d3.geo.albers().scale(width * 1.357).translate([width / 2, height / 2]);
​
var path = d3.geo.path().projection(projection);
​
var svg = d3.select("#map").append("svg").style("width", width).style("height", height);
​
queue().defer(d3.json, "us.json").defer(d3.json, "wells.json").await(ready);
    
    
    function ready(error, us, wells) {
        
        svg.append("path").datum(topojson.feature(us, us.objects.land)).attr("class", "land").attr("d", path);
        
        svg.append("path").datum(topojson.mesh(us, us.objects.states, function(a, b) {
            return a !== b;
        })).attr("class", "states").attr("d", path);
        
        var wells = topojson.feature(wells, wells.objects.wells);
        
        svg.selectAll(".wells").data(wells.features.sort(function(a,b){ return b.properties.id - a.properties.id;})).enter().append("path").attr("class", "wells").attr("d", path.pointRadius(1)).style("fill", function(d){
            if (d.properties.id % 2 ==0 )   {
                return "steelblue";
            } else  {
                return "black";
            }
        });
           
};
​
$(window).on('resize', resize);
​
function resize()   {
    var width = parseInt($('#map').css('width')),
        height = width * 0.642;
        
    projection.translate([width / 2, height / 2]).scale(width * 1.357);
    
    svg.style('width', width + 'px').style('height', height + 'px');
    
    svg.selectAll('.land').attr('d', path);
    svg.selectAll('.states').attr('d', path);
    svg.selectAll('.wells').attr('d', path);
    
}
​
</script>
​
</body>
</html>
    