This is one of my favorite spots on the map. The mountainrange is dividing a big part of the north from southern region called Westphalia. Only one river breaks through it allowing for an easy way across the mountains. The citys name at that spot is Porta Westfalica which is Latin and means "gate to Westphalia". I think this visualization illustrates the reason behind the name very well.
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).
-- 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.
Earth Primer is a science book for playful people. Discover how Earth works through play—on your iPad. Join a guided tour of how Earth works, with the forces of nature at your fingertips. Visit volcanoes, glaciers, sand dunes. Play with them, look inside, and see how they work.
Earth Primer defies existing genres, combining aspects of science books, toys, simulations, and games. It is a new kind of interactive experience which joins the guided quality of a book with open ended simulation play.
Features:
• Discover how Earth works through play.
• The forces of nature are at your fingertips—
make volcanoes, shape sand dunes, form glaciers, sculpt mountains, push around tectonic plates, paint with wind, heat up magma—and more!
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.
I haven't the faintest[0], monsigneur "I'm pretty sure I've read articles about pie menus being designed by someone with your name during my interaction design master" ;)
Did you know you can enter your first name into Wolfram Alpha and it will guess your age, based on US birth statistics. So it's a shot in the dark with Dutch names.
It's completely off, haha, since I emigrated. But my grandfather did indeed come from Scheveningen, which lies inside that one hotspot. There are basically a handful of last names that up to a few generations ago were as good as unique to that fishing village, and Van der Zwan is one of them. I try not to think too much about the genetic implications of that fact.
(now I wonder how you knew that "Kees" is a Dutch name)
>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]
The R community started out calling these "joy plots" (after the Joy Division album) but then people found out about the association of "joy division" with the Holocaust (https://serialmentor.com/blog/2017/9/15/goodbye-joyplots) and so now they're called ridgeline plots.
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.
No it's not. "Joy" isn't a bad word. Joysticks seem to be fine.
It's specifically that the band "Joy Division" was named intentionally after a regrettable piece of history, and "joy plots" are named because of a Joy Division album cover.
Words aren't bad -- it's the meaning and derivation behind them. Etymology matters.
Do you think the Mac OS System 7.1 user interface designers at Apple should have called that grinning penis-like thing with a rash on the tip the "Control Strip"? It's just such a bad name, on so many levels.
>The Control Strip is a user interface component introduced in the "classic" System 7 Macintosh operating system. It currently exists as part of the Touch Bar interface in macOS.
>In the West, the control strip became known as the "death strip" (Todesstreifen) because of the shoot-to-kill orders given to the border guards. The East Germans preferred to call it by the more euphemistic name of the "action strip" (Handlungsstreifen). It was also nicknamed the Pieck-Allee ("Pieck Avenue") after East Germany's president Wilhelm Pieck (1949–60).
Show your evidence that "Joy Plots" were named after the Freudenabteilung. Yet you support the R community changing the name.
Clearly you're not going to find any evidence that the R community named the plots after the Freudenabteilung.
Instead of it clearly just being an innocent literal reference to the name of the band who produced a famous album cover that inspired the plots.
If your point is that etymology and history matter, then why are you saying that it matters for the R community, but not Apple?
By your inconsistent logic, it's not OK to criticize Apple for naming the Control Strip even through they may not have realized the historical meaning of Kontrollstreifen at the time, but it's OK to criticize the R community for naming Joy Plots after the name of a band instead of Freudenabteilung. Why the Widerspruch und Doppelmoral?
Your own words contradict your point: 'This isn't about "cancelling". It's about something being in bad taste in the first place, even if the originator hadn't been aware of it.' Yet now you're saying that because Apple was not aware of the dark meaning of "Control Strip", it's wrong to criticize that name. Pick a lane, and stick with it.
My point is that IBM declined to name the input device that Ted Selker invented the "Joy Button", even though that's what he originally wanted to call it (if not the "Keyboard Clitoris" or "Control Knob"), so they named it the "Trackpoint" instead. And that was most likely to avoid any sexual connotations, not about Nazi allusions.
Yet IBM has an unabashed well documented history of marketing and selling computing machinery to Nazi Germany that facilitated the Holocaust, which substantially enabled them to identify, round up, and murder many Jews and other persecuted minorities (not to mention their contracts with the US Government to help round up Japanese people into internment camps). So by IBM management's logic, Nazi are fine upstanding customers, but sexual references in product names are a no-no.
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.
You're drawing a moral equivalence between an album cover reference and a racial slur. That's insane. I reject your entire angle.
"Joyplot" harms literally nobody. There are no victims of joyplots. There aren't even victims of Joy Division. It's a reference to an image associated with a band which was grimly ironically named in reference to a historical atrocity. The connection is so tenuous that you can't get your feelings hurt by it unless you're actively trying. It's so obscure that nobody even noticed it until some asshole wanted to make waves, obviously it was entirely about cancelling the word because it wasn't even an issue until then.
So who am I supposed to show empathy for? Descendants of Holocaust victims who are into data visualization but evidently feel too threatened by the community to speak up for themselves? Get a grip. There is nobody hurt by this. There is nobody to have empathy for. You're just abusing "empathy" to insinuate I'm not even a decent human being if I don't go along with your personal taste. That's not empathy, that's bullying. I don't feel sorry for you over a piece of trivia.
I'm saying that once you know what the "joy" in "joy plot" refers to, you can't unsee that. And that every time you see the term "joy plot" you're going to be aware of that.
No, that isn't "literal" harm in the sense of violence. But it's unpleasant. And it's not just my personal taste, but clearly that of others or it would never have been brought up.
So that's the empathy to show: for people who think using a historical reference that shows humanity at a shameful low point is inappropriate for modern technical terminology. For modern people in general, not specific holocaust victims or their descendents.
That it's not an "edgy joke", it's just inappropriate. So let's try to be decent understanding people and call it something better, shall we?
I hate being told what words I have to use. No it's not literal harm. But it's unpleasant. And it's not just my personal taste, but clearly the that of others.
So that's the empathy to show: for people who hate being directed how to think and express themselves by complete strangers. For free society in general.
See how it goes both ways? Empathy is only a mode of thinking. You are demanding compliance. You're not even empathizing yourself, since you can't see past your own notion of how you want people to interact. "Inappropriate", "modern", "decent", "understanding" are all just passive-aggressive weasel words for your subjective norms. True understanding doesn't insist on others to perfect themselves to your comfort.
I get that. That's the root of your discomfort here.
But the thing is, in society, we all have to work together. Getting along is important. Of course you're free to use the words you want. But then the rest of us are free to choose not to work with you and criticize your insensitivity.
I'm arguing that people ought to get along with each other. That involves having empathy for each other. Having human sensitivity.
You're arguing you should be able to do whatever you want, and if other people are bothered that it's their problem. You can call that many things, but you can't call it empathy. It's mainly called being selfish, not trying to get along.
His stated position is that it's ok to criticize the R community's unwitting insensitivity, but not Apple's. Shouldn't an open community of people have at least as much freedom of speech as a giant corporation?
Some people find it offensive and uncomfortable when other people make contradictory statements in the same conversation. Should we cancel hypocrisy and logical inconsistency, then?
I spent some time (but not enough) to add a tilt slider. Ultimately what it did was change the renderRows fY calculation to:
let fY = y - Math.floor(scale * (height - minHeight) / heightRange) - r * tilt * 0.1;
Of course, this creates blank space at the bottom, but I think it makes things a little more interesting without fudging too much with the scale and getting sharp peaks.
When I find more free time, I can flesh it out and make a PR, but I love this idea. Thanks for sharing it!
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.)
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:
/**
* 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 programming -- see especially page 9, section 1.5, Program Design Guidelines, page 72, section 4.6, Optimizing Translator Output, and page 99, chapter 7, The Mechanics of Setting Text:
>There are a few items that may be kept in mind while implementing a driver for a PostScript device. As with most software
development, the most difficult part of writing programs in the
PostScript language is the design of the program. If the design is
good, implementing it is easy. If the design is poor, it may not
even be possible to correctly implement it. Below are some
helpful items to keep in mind when writing your software. All of
them are explained more fully within the text of this book; this
is only an attempt to prime the pump before you start reading:
>• Use the operand stack efficiently. Pay particular attention to the order of the elements on the stack and how
they are used.
(Using the stack efficiently by designing fluent words that chain and dovetail together elegantly in pipelines (and systematically writing line-by-line stack comments) instead of using named variables in dictionaries is good idiomatic PostScript and Forth, aka tacit programming or point-free style, the stack-based equivalent of fluent interfaces.)
>• Avoid unnecessary redundancy. When a program is produced, check for many repetitive steps that perhaps
could be condensed. Keep identifiers short if they are
to be transmitted many times.
(Only create paths once!)
>• Use the PostScript imaging model effectively. When
printing, a document must be translated into the language of the printer. This includes a philosophical
adjustment to the nature of the PostScript imaging
model.
(Use the graphics state stack!)
>• It is better to translate into the PostScript imaging model than to maintain another set of graphics primitives
using the PostScript language for emulation.
(The hardest problem I ever tried (and failed) to solve properly with PostScript was making a printer driver for rendering user interfaces drawn with X11 using a combination of bitmaps and lines. Because of X11 "half open" pixel rounding rules versus PostScript's "stencil paint" model, they just don't line up right when you zoom into them, and there's no fudge or compromise that works in all cases. Here is my commented-out failed attempt:)
>page 100: Note:
There is one principle to keep in mind when deciding
upon an algorithm for setting text. The longer the
string presented to one of the show operators, the
more efficient the system is likely to be. This is because
the PostScript language built-in operators, such as show,
widthshow, and ashow, operate essentially at compiled speed once they have been invoked. Each moveto
or div operation performed must first be interpreted,
which is significantly slower.
Glenn's post in a comp.lang.postscript discussion about PostScript programming style and optimization:
From: Glenn Reid (Abode Systems)
Newsgroup: comp.lang.postscript
Subject: Re: An Idea to Help Make Postscript Easier to Read (and Write)
Date: 10 Sep 88 17:26:24 GMT
You people tend to forget that the PostScript language is interpreted.
It is well and good to use tools to convert to and from PostScript,
but it is not quite as "transparent" as we all might think.
I like to think of a big grandfather clock, with the pendulum swinging.
Each time pendulum swings, the PostScript interpreter gets to do one
operation. The "granularity" of the clock is nowhere near the speed
of a microprocessor instruction set, and any comparison with assembly
languages doesn't make sense.
The difference between:
0 0 moveto
and
0 0 /arg2 exch def /arg1 exch def arg1 arg2 moveto
can sort of be measured in "ticks" of the interpreter's clock. It's
not quite this simple, since simply pushing a literal is faster than
executing a real PostScript operator, but it is a rough rule of thumb.
It will take about three times as long to execute the second of these
in a tight loop, and about five times as long if it is transmitted and
scanned each time. My rule of thumb is that if you have roughly the
same number of tokens in your stack approach as you do with your 'exch
def' approach, the 'exch def' is likely to be much more readable and
better. Otherwise, I usually go with the stack approach.
One other thing of note is that if you have too much stack manipulation
going on, it may well be symptomatic of a problem in the original program
design.
Also, most procedures don't do any stack manipulation at all, they
simply use their arguments directly from the stack. In this situation,
it is especially wasteful (and confusing, I think) to declare
intermediate variables.
Compare:
% sample procedure call:
(Text) 100 100 12 /Times-Roman SETTEXT
% approach 1:
/SETTEXT { %def
findfont exch scalefont setfont moveto show
} def
% approach 2:
/SETTEXT { %def
/arg5 exch def
/arg4 exch def
/arg3 exch def
/arg2 exch def
/arg1 exch def
arg5 findfont arg4 scalefont setfont
arg2 arg3 moveto arg1 show
} def
Which of these is easier for you to understand?
Anyway, I think the discussion is a good one, but let's not forget
that PostScript it is an interpreted language. And I don't think
it is terribly hard to use and understand, if it is written well.
Glenn Reid
Adobe Systems
Wow, bummer -- that's a surprise and disappointment to me that the canvas 2d API isn't more like PostScript in that way. Filling then stroking the same path is a very common operation.
NeWS's dialect of PostScript (but not standard Adobe PostScript) had currentpath / setpath operators to save and restore the current path as a first class object, so you could use it any number of times later in different contexts. I wish the canvas 2d api had that too, plus some set operations on regions.
It'd be fun and worth coding up a WebGL renderer, I think! Then you can pass all the points in one big chunk of memory, and draw it from any direction, with lighting and shadows!
After tweaking a little bit of settings (reducing height settings to low), get a very interesting graphics for Asia+Europe - quite a few majestic mountain ranges there.
Refresh the page, make your chart, close formatting options and wait for 5-10 seconds. The button should appear.
Typing that out made me think I might have made a mistake by hiding print functionality too far. I just didn't want to be too aggressive showing this option
Lovely. Feature request... two sliders for X/Y offset, to solve the issue where path of a river and height data don't match after changing height scale with overlay opacity under 100 (e.g. see https://imgur.com/a/ipm1ixb )
The idea was that you can design products yourself. Once the map is fully rendered and settings window is closed there is a small link appears that allows you to print the results.
I think I did terrible job here by hiding it too far. For me it is a struggle between usefulness of the feature and level of annoyance it could bring to those who are not interested
Not wishing to disrespect the coding that went into this, but I don't see the point? The "standard" map used by the author already shows a visualisation of the area concerned, I'm not exactly sure what this magical plot style brings to the party other than a different way of drawing the same type of thing.
It provides vastly more visual sense of the mountainous texture involved, as well as direct height comparison.
Our eyes are not great at detecting the difference between 80% and 82% grayscale, but they easily see the difference between adjacent shapes 80px and 82px tall.
Similarly, it's incredibly difficult for us to compare the difference between 80% and 82%, against 82% and 86%. Whereas with a line, it's trivial to see that the angle increased dramatically on the second one.
Grayscale and color maps are well-known for only being able to provide a "big-picture" overview because our eyes can only vaguely distinguish subtle differences in color/intensity. This type of plot addresses that partly.
what do you mean by the standard map? The one before you press "draw the height map"? Or is there another one I'm missing.
If it is that map then the point is that it looks way better with the height map as you can actually visualize the height of mountain range relative to others. This isn't really discernible with the original map.
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.
I think that this is more useful at showing height on a massive scale. Contour lines seem more generally useful, I agree, but looking at say the Appalachian mountain range on this zoomed out is much more appealing and intuitive than looking at the same scale using contour lines or another method of showing off height. I can also quickly compare the height of those mountain ranges to the Rockies.
Also it's just cool. I'll talk to my friend who does this type of thing professionally and ask his opinion. He is on vacation though. I was trained to read contour lines in boy scouts and I hike a lot since I live in the mountains, so I am quite comfortable with them too. I think this one is just a cool way to represent the data. I think the only time it is better is showing of height and height on a massive scale that are simply too big for other types of maps to be easily understood at a glimpse.
I'll challenge you to find a good map showing off the height of the Appalachian region, as I can't find one and really want to after seeing this. The one those tool can provide is quite cool in comparison to every one I can find. My friend would probably be a good person to ask in that regard.
This is one of my favorite spots on the map. The mountainrange is dividing a big part of the north from southern region called Westphalia. Only one river breaks through it allowing for an easy way across the mountains. The citys name at that spot is Porta Westfalica which is Latin and means "gate to Westphalia". I think this visualization illustrates the reason behind the name very well.