All examples By author By category About

armollica

Full window Github gist

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.

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]);

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 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>

https://d3js.org/d3.v4.min.js