D3 Examples - Satellite Projection

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
<title>Topography</title>
<meta charset="utf-8" />
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://colorbrewer2.org/export/colorbrewer.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
</head>
<body>
</body>
<script>
​
var width = 500
var height = 400 
var scale = 1100
​
var svg = d3.select("body")
    .append("div")
    .classed("svg-container", true)
    .append("svg")
    .attr("preserveAspectRatio", "xMinYMin meet")
    .attr("viewBox",`0 0 ${width} ${height}`)
    .classed("svg-content-responsive", true)
​
var g = d3.select("svg").append("g")
​
var PromiseWrapper = (xhr, d) => new
    Promise(resolve => xhr(d, (p) => resolve(p)))
Promise.all([PromiseWrapper(d3.json, "world.geojson")])
.then(resolve => {
    createMap(resolve[0])
})
​
​
function createMap(countries) {
    
    // DATA SPECIFIC VARIABLES //
    
    // https://bl.ocks.org/emeeks/raw/10173187/
    var projection = d3.geoSatellite()
        .scale(scale)
        .translate([width/2,height/2 + 100])
        .rotate([-40,-25,-50])
        .tilt(20)
        .distance(1.2)
        .clipAngle(45)
        
    
    var geoPath = d3.geoPath()
        .projection(projection);
    
    // DRAW PATHS
​
    g.selectAll("path").data(countries.features)
        .enter()
        .append("path")
        .attr("class", "countries")
        .attr("d", geoPath)
    .style("stroke-width",1)
    .style("stroke","white")
    
        var featureData = d3.selectAll("path.countries").data();
    console.log(featureData)
    var realFeatureSize = d3.extent(featureData, d => d3.geoArea(d))
    var colorScale = d3.scaleLinear().domain(realFeatureSize).range(["white","#123123"])
    
    d3.selectAll("path.countries")
        .style("fill", 'lightgrey');    
}
</script>
</html>
    