D3 Examples - Denali Elevation Profiles

Denali Elevation Profiles
Click the buttons to see different elevation profiles of Denali.
Elevation data are from the Shuttle Radar Topography Mission and were collected using Derek Watkins's SRTM Tile Grabber. The create-profiles.js Node.js script shows how the profiles were created from the elevation data. Data on the peaks came from peakbagger.com. The shaded relief color palette came from here. By the way, a realistic coloring of the mountain would be almost completely white. I wanted to highlight the elevation change so I chose this color ramp.
xxxxxxxxxx
 
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">
<style>
​
html {
    font-family: 'Source Sans Pro', sans-serif;
}
​
.hidden {
    display: none;
}
​
.border {
    fill: none;
    stroke: #000;
}
​
.peak circle {
    fill: tomato;
    stroke: tomato;
    fill-opacity: 0.25;
    stroke-opacity: 0.5;
}
​
.peak text {
    font-size: 12px;
    fill: black;
    text-shadow: -1px 0 1px #fff, 
                0 1px 1px #fff,
                1px 0 1px #fff, 
                0 -1px 1px #fff;
}
​
.overhead-profile {
    stroke: #8A0707;
    stroke-opacity: 0.5;
}
​
.profile .area {
    fill: #ddd;
}
​
.profile .line {
    fill: none;
    stroke: #8A0707;
    stroke-opacity: 0.5;
}
​
.axis--y path {
    stroke: none;
}
​
.axis--y .tick line {
    stroke: white;
    stroke-width: 1.5px;
    stroke-opacity: 0.2;
}
​
.profile-selector > button {
    width: 115px;
    display: block;
    font-size: 10px;
}
​
.south-peak-label > circle {
    fill: tomato;
    stroke: tomato;
    fill-opacity: 0.25;
    stroke-opacity: 0.5;
}
​
.south-peak-label > text {
    font-size: 12px;
}
​
</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="proj4.js"></script>
<script>
​
var wkt = 'PROJCS["Albers Conical Equal Area",GEOGCS["NAD83",DATUM["North_American_Datum_1983",SPHEROID["GRS 1980",6378137,298.2572221010042,AUTHORITY["EPSG","7019"]],AUTHORITY["EPSG","6269"]],PRIMEM["Greenwich",0],UNIT["degree",0.0174532925199433],AUTHORITY["EPSG","4269"]],PROJECTION["Albers_Conic_Equal_Area"],PARAMETER["standard_parallel_1",55],PARAMETER["standard_parallel_2",65],PARAMETER["latitude_of_center",50],PARAMETER["longitude_of_center",-154],PARAMETER["false_easting",0],PARAMETER["false_northing",0],UNIT["metre",1,AUTHORITY["EPSG","9001"]]]';
​
var matrix = customProjection()
    .projection(wkt);
​
var path = d3.geoPath()
    .projection(matrix());
​
var container = d3.select("body").append("div")
    .attr("class", "container")
    .attr("width", 960)
    .attr("height", 500);
​
var profileSelector = container.append("div")
    .attr("class", "profile-selector")
    .style("position", "absolute")
    .style("left", "500px")
    .style("top", "35px");
​
var margin = { top: 30, left: 30, bottom: 30, right: 30 },
        mapWidth = 460 - margin.left - margin.right,
        mapHeight = 460 - margin.bottom - margin.top,
        chartWidth = 460 - margin.left - margin.right,
        chartHeight = 250 - margin.bottom - margin.top;
​
var mapSvg = container.append("svg")
        .attr("width", mapWidth + margin.left + margin.right)
        .attr("height", mapHeight + margin.bottom + margin.top)
    .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
var chartSvg = container.append("svg")
        .attr("width", chartWidth + margin.left + margin.right)
        .attr("height", chartHeight + margin.bottom + margin.top)
    .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
var x = d3.scaleLinear()
    .range([0, chartWidth]);
​
var y = d3.scaleLinear()
    .domain([0, 7000])
    .range([chartHeight, 0]);
​
var area = d3.area()
        .x(function(d) { return x(d.distance); })
        .y0(y(0))
        .y1(function(d) { return y(d.elevation); });
    
var line = d3.line()
    .x(function(d) { return x(d.distance); })
    .y(function(d) { return y(d.elevation); });
​
d3.queue()
    .defer(d3.json, "denali-peaks.json")
    .defer(d3.json, "denali-profiles.json")
    .defer(d3.json, "ring.json")
    .await(ready);
​
function ready(error, peaks, profiles, ring) {
    if (error) throw error;
​
    //____________________________________________________________________________
    // Fit map projection to screen
​
    var b = path.bounds(ring),
      s = .95 / Math.max((b[1][0] - b[0][0]) / mapWidth, (b[1][1] - b[0][1]) / mapHeight),
      t = [(mapWidth - s * (b[1][0] + b[0][0])) / 2, (mapHeight - s * (b[1][1] + b[0][1])) / 2];
    
    path.projection(matrix(s, 0, 0, -s, t[0], t[1]));
​
    var point = matrix.point(s, 0, 0, -s, t[0], t[1]);
    
    // Adjust raster size and translation
    var rWidth = (b[1][0] - b[0][0]) * s,
            rHeight = (b[1][1] - b[0][1]) * s,
            rTranslateX = (mapWidth - rWidth) / 2,
            rTranslateY = (mapHeight - rHeight) / 2;
    
    //____________________________________________________________________________
    // Draw relief map
​
    // From Thomas Thoren's example:
    // https://bl.ocks.org/ThomasThoren/550b2ce8b1e2470e75b2
​
    mapSvg.append("image")
        .attr("xlink:href", "relief.png")
        .attr("class", "raster")
        .attr("width", rWidth)
        .attr("height", rHeight)
        .attr("transform", "translate(" + rTranslateX + "," + rTranslateY + ")");
    
    // ...and the border around it
    mapSvg.append("path").datum(ring)
        .attr("class", "border")
        .attr("d", path);
    
    //____________________________________________________________________________
    // Draw peaks
​
    var gPeaks = mapSvg.append("g").attr("class", "peaks")
            .selectAll(".peak").data([peaks.peak].concat(peaks.subpeaks))
        .enter().append("g")
            .attr("class", "peak")
            .attr("transform", function(peak) {
                var p = point(peak.lat, peak.lon);
                return "translate(" + p[0] + "," + p[1] + ")";
            });
    
    gPeaks.append("circle")
        .attr("r", 3);
    
    gPeaks.append("text")
        .each(function(peak) {
            d3.select(this).call(orientLabel, peak.labelOrientation || "NE");
        })
        .text(function(peak) { return peak.name; });
    
    //____________________________________________________________________________
    // Draw overhead profile lines on map
​
    var profileIndex = 0;
​
    var profileLines = mapSvg.append("g").attr("class", "overhead-profiles")
            .selectAll(".overhead-profile").data(profiles.features)
        .enter().append("path")
            .attr("class", "overhead-profile")
            .attr("d", path)
            .classed("hidden", function(d, i) { return i != profileIndex; });
        
    //____________________________________________________________________________
    // Draw profile as a line chart
​
    var elevations = profiles.features.map(function(feature) {
        return feature.properties.elevations;
    });
​
    var elevation = elevations[profileIndex];
​
    x.domain(d3.extent(elevation, function(d) { return d.distance; }));
​
    var profile = chartSvg.append("g").attr("class", "profiles")
            .selectAll(".profile").data([elevation])
        .enter().append("g")
            .attr("class", "profile");
    
    profile.append("path").attr("class", "area")
        .attr("d", area);
    
    profile.append("path").attr("class", "line")
        .attr("d", line);
    
    chartSvg.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + chartHeight + ")")
        .call(d3.axisBottom(x));
    
    var yAxis = chartSvg.append("g")
        .attr("class", "axis axis--y")
        .call(d3.axisLeft(y).tickFormat(d3.format(".2s")))
    
    yAxis.selectAll(".tick line")
        .attr("x1", chartWidth)
    
    yAxis.selectAll(".tick text")
        .attr("dx", "0.5em");
    
    // Y-axis label
    yAxis.append("text")
        .attr("transform", "rotate(-90)")
        .attr("dx", "0.33em")
        .attr("dy", ".66em")
        .style("fill", "#000")
        .text("meters");
    
    // South Peak Label
    var southPeakLabel = chartSvg.append("g")
        .attr("class", "south-peak-label")
        .attr("transform", "translate(200, 23)");
    
    southPeakLabel.append("circle")
        .attr("r", 4);
    
    southPeakLabel.append("text")
        .attr("dx", "0.33em")
        .attr("dy", "-0.66em")
        .text("South Peak (6190 m)");
​
    //____________________________________________________________________________
    // Add content to profile selector
​
    profileSelector.selectAll("button").data(peaks.subpeaks)
        .enter().append("button")
            .html(function(d) { return d.name; })
            .on("click", function(d, i) { update(i); });
​
    function update(index) {
​
        profileIndex = index;
​
        // Update overhead profile lines
        profileLines
            .classed("hidden", function(d, i) { return i != profileIndex; });
​
        // Update the elevation line chart
        elevation = elevations[profileIndex];
​
        profile.data([elevation]);
​
        profile.select(".line").attr("d", line);
        profile.select(".area").attr("d", area);
    }
}
​
// Orient text label relative to it's current position given a cardinal or
// intermediate direction (i.e., N, S, E, W, NE, SE, SW, NW)
function orientLabel(selection, orientation) {
    var dx, dy, textAnchor;
    
    // Determine `dx` (x-offset) and the `text-anchor` 
    if (orientation === "N" || orientation == "S") {
        dx = 0; 
        textAnchor = "middle";
    }
    if (contains(orientation, "E")) {
        dx = ".33em";
        textAnchor = "start";
    }
    if (contains(orientation, "W")) {
        dx = "-.33em";
        textAnchor = "end";
    }
​
    // Determine `dy` (y-offset)
    dy = contains(orientation, "N") ? "-.33em" :
             contains(orientation, "S") ? "1em" : 0;
    
    return selection
        .attr("dx", dx)
        .attr("dy", dy)
        .style("text-anchor", textAnchor);
​
    function contains(str, x) { return str.indexOf(x) !== -1; }
}
​
​
// Create custom projection using Proj4.js 
function customProjection() {
​
    var projection = function(d) { return d; };
​
    // TODO: Think about moving these matrix parameters into 
    //       setter-functions like projection.translate() and
    //       projection.scale().
​
    function matrix(a, b, c, d, tx, ty) {
        if (!arguments.length) {
            a = 1; b = 0; c = 0; d = -1; tx = 0; ty = 0;
        }
​
        return d3.geoTransform({
            point: function(x, y) {
                var p = projection.forward([x, y]);
                this.stream.point(a * p[0] + b * p[1] + tx, 
                                                    c * p[0] + d * p[1] + ty)
            }
        });
    }
​
    matrix.projection = function(_) {
        if (!arguments.length) return projection;
​
        // Pass a proj or wkt string defining a projection. This will convert from
        // WGS84 to the specified projection.
        if (typeof _ === "string") {
            projection = proj4(_);
        }
​
        // Pass a pair of proj or wkt strings defining the source and destination 
        // projections. First element is the source, second is the destination.
        if (_ instanceof Array) {
            if (_.length !== 2) { 
                throw new Error("Array passed to customProjection.projection() must " +
                                                "be of length 2: [srcProj, dstProj]");
            }
            projection = proj4(_[0], _[1]);
        }
​
        // Pass a Proj4.js function directly
        if (typeof _ === "function") {
            projection = _;
        }
​
        return matrix;
    };
​
    // Point transformation function
    matrix.point = function(a, b, c, d, tx, ty) {
        return function(x, y) {
            var p = projection.forward([x, y]);
            return [a * p[0] + b * p[1] + tx, c * p[0] + d * p[1] + ty];
        };
    };
​
    return matrix;
}
​
</script>
</body>
</html>
    