Peak map: Visualize the elevation of any area using a ridgeline chart (github.com)

What I'd like to see is comparison and motivation relative to contour line maps, which are what I would consider the conventional way to show topography. I find these plots somewhat bizarre in comparison.

Are these joy plots more accessible to novice viewers somehow? To me, contour lines provide a very clear understanding of terrain but I admit I am pretty fluent in reading them. They bunch up to show steep slopes and cliffs, but give a much clearer sense of slope direction and more subtle topography like bowls, saddles, and stream beds.

I cannot really recall how I first experienced them as a novice. I was a child looking at USGS quadrant maps of the Sierra Nevada.

If memory serves me right, the mountains are a result of the last big ice age. Everything north was completely covered in a glacier. So the river beeing older does not seem unlikely.

This is a water gap, a feature which is commonly formed from a river older than the mountain range. In combination with that older river, in this case, the specific location was caused by "subrosion (a general expression applied to karst processes influencing the course of a river) and..meltwater channels at low altitudes" (Rohde 1994, Martini et al 2002-page 285).

-- https://en.wikipedia.org/wiki/Water_gap

-- https://onlinelibrary.wiley.com/doi/book/10.1002/97814443042...

-- Rohde P, 1994. Weser und Leine am Berglandrand zur Ober- und Mittelterrassen-Zeit E&G Quaternary Science Journal 44(1): 106–133, DOI 10.3285/eg.44.1.10.

Now why would you mention that, Meneer van der Zwan? ;)

Bummer! I didn't know that association.

Ugh. That really is something you can't forget after learning about it.

I never knew the name of the band was that dark. For a dark band, there's a certain logic, but yeah... will definitely be using 'ridgeline' from now on.

Thanks for the info. Genuinely appreciated.

Oh dear, that's also bad news for joysticks and the red "Joy Button" on the Thinkpad keyboard.

https://news.ycombinator.com/item?id=21757484

(But then again, since when did IBM ever shy away from selling their products to Nazis?)

https://en.wikipedia.org/wiki/IBM_and_the_Holocaust

That's really, really stupid. I wish the endless quest for moral purification of language would just die already but it's only getting worse. Prudes used to get upset over words for their meanings, then because the wrongs kinds of people used them. Now the etymology can be mined for cancellation reasons even if present usage is conceptually removed twice over. I wonder how the author copes with the ones that derive from slavery and brutal execution methods.

It's exhausting catering to these people who fixate on dredging up and removing any hint of bitterness from words. We need to start treating picky speakers like picky eaters instead of continually acquiescing to the tyranny of the minority. No more fucking chicken nuggets, we are adults here.

It's a thing, though it seems to have an successor in "ridge plot": https://blog.revolutionanalytics.com/2017/07/joyplots.html

>the image is a reinterpretation of the image of radio waves from the first discovered pulsar. The original was illustrated by Cornell grad student Harold Craft in his 1970 PhD thesis and subsequently published in the Cambridge Encyclopeadia of Astronomy. [0]

[0] https://www.esri.com/arcgis-blog/products/arcgis-pro/mapping...

Pretty cool that the album was inspired by the visual representation of the first discovered pulsar!

Apologizes if your link already says that. I cannot open it due to work filters I think :/

I also thank you for sharing! In reading your code to learn from your work, I noticed a little optimization you could use, that applies to other 2d canvas code in general:

CanvasRenderingContext2D has save() and restore() methods you can call to re-use partial paths. So instead of making the path and closing it to fill, then making it again without closing it to stroke, you can make it once without closing, save the graphics state, close the path, then fill, restore the graphics state, then stroke! That is a classic idiom from PostScript (draw, gsave, fill, grestore, stroke).

That should save a bunch of JavaScript looping and spooning points through the 2d context api. (It's the individual lineTo calls that are expensive, because of all the overhead of JavaScript<=>C bindings, not stroking or filling the actual lines. And there's no way to provide an array of points all at once, like with WebGL.

(At least SVG made the right decision, inspired by VML, to put all the points of a path in one attribute string, instead of using individual XML elements for each point.)

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pat...

Once you get into native code, it's fast even if there's a lot to do (i.e. calling ctx.stroke once), but jumping in and out of native code a lot (i.e. calling ctx.lineTo a thousand times) is slow.)

Thanks for sharing the code, it's inspired me! (I'm trying to figure out how to rotate and otherwise generally transform the direction that the lines scan across the depth map and screen, to get a Max Headroom effect! Maybe somebody with deep shader-fu could suggest an out-of-the-box way to render it in hardware with WebGL, to apply to live video!)

Come to think of it, you could just draw the ridges directly as polygons with WebGL, and that would be quite flexible and performant!

I haven't tested it yet, but here's the new drawPolyLine from createHeightMapRenderer.js:

Original:

https://github.com/anvaka/peak-map/blob/master/src/lib/creat...

Optimized:

    /**
     * Draws filled polyline.
     */
    function drawPolyLine(points) {
      if (points.length < 3) return;

      let smoothRange = getSmoothRange(points, smoothSteps);
      points = smoothRange.points;

      // Create the unclosed path.
      ctx.beginPath();
      ctx.moveTo(points[0], points[1]);
      for (let i = 2; i < points.length; i += 2) {
        ctx.lineTo(points[i], points[i + 1]);
      }

      // If line's height is greater than 2 pixels, let's save
      // the graphics state, finish and close the path, fill it, 
      // then restore the graphics state:
      if (smoothRange.max - smoothRange.min > 2) {
        ctx.save();
        ctx.lineTo(points[points.length - 2], smoothRange.max);
        ctx.lineTo(points[0], smoothRange.max);
        ctx.closePath();
        ctx.fillStyle = lineFill;
        ctx.fill();
        ctx.restore();
      }

      // Now finally stroke the unclosed path.
      ctx.strokeStyle = lineStroke;
      ctx.stroke();
    }

There was a classic "Grandfather Clock" posting from Glenn Reid at Adobe (author of the "Green Book" on PostScript language program design) to comp.lang.postscript that really opened my eyes about writing code in interpreted languages like PostScript (and JavaScript, while JIT'ed at runtime, still makes calling native code expensive), and balancing optimization with readability:

Here's Glenn's "Green Book", which was like a bible to me, and still is quite relevant to canvas 2d context programmi...