Discover more from hrbrmstr's Daily Drop
Drop #211 (2023-03-02): Let's Get Visual
Poline; Plotteus; Animating Changes in Webpages
I hope you've been keeping up with inertial dampener maintenance, since today we make an abrupt course change from the inner workings of internet email protocols, and head into to some freshly chart-ed territory.
We'll first explore a fancy new way to generate color palettes (that I suspect ~50%+, of readers may know about already); then, we shall seek out a new way to tell visualization-centric stories; and, finally, we boldly go into the mementoverse to discover a new way to showcase changes in website content.
Poline [GH] is an “enigmatic color palette generator, that harnesses the mystical witchcraft of polar coordinates. Its methodology, defying conventional color science, is steeped in the esoteric knowledge of the early 20th century. This magical technology defies explanation, drawing lines between anchors to produce visually striking and otherworldly palettes. It is an indispensable tool for the modern generative sorcerer, and a delight for the eye”.
The name of the library is a portmanteau of “polar line”.
n (you pick the
n) total colors for you. You start the generation process by defining a series of anchor points in HSL polar coordinates. Please don't hesitate to skip the indented block, below, if you are familiar with HSL. I’m including a short explanation of it for those who many not make datavis land their permanent residence (the Wikipedia link has some solid visuals to go with my mediocre blathering):
HSL stands for Hue, Saturation, and Lightness. Hue is the color-color of the object (e.g., "blue"). The saturation value defines the color intensity (i.e., how "pure" the color is), (0% == "gray"; 100% == most vivid version of that color). Lightness refers to how bright or dark the color is (0% == black; 100% == white).
Hue is represented by an angle in polar coordinates, where the circle represents all the possible colors and
red == 0 degrees
green == 120 degrees
blue == 240 degrees
Other colors are located at points in between those angles.
The saturation and lightness values are just the the distance from the center of the circle (0% saturation and lightness == center; 100% == outer edge edge of the circle).
bright (but not the "brightest") red == (0 degrees, 100%, 50%)
desaturated "meh" blue == (240 degrees, 50%, 50%)
The shape of the curve/line is dependent upon how you chose to interpolate steps between points. You have plenty of choices, too (the link in the previous sentence has some great examples of these):
You can select a different position function for each of the X, Y, and Z axes in the polar coordinate system.
There are a bunch more options that you should dive into, either in the exploration tool or the GH repo.
I threw together a small Observable notebook that shows how to use Poline-proper, and also how to use the colors it generates with Observable's Plot library.
NOTE: Poline is likely more well-suited to generative art projects than pure-play data vis, but it is a neat new way to generate some color inspiration in either setting.
If you're curious where David got those color names (waaaay at the bottom of the Poline explorer) from, you might like one of his other repos.
There are scads of story/scrollytelling tools out there. What makes Plotteus special? We'll let them tell you:
One of the strengths of Plotteus is that it gives you complete control over how to present your data stories. Popular approaches to data storytelling focus on using a bunch of charts that remain blended in the text or a sticky chart connected to a set of triggers that start an animation when activated, usually by scrolling.
Plotteus gives you more freedom – it creates a set of interpolators that can be used to render a given part of a story at any progress. This means that you can render your story incrementally as the user scrolls through the page, use a slider to control the progress or replicate the trigger approach to completely render a step over a given duration.
Another behavior that is usually hard to achieve is the smoothness of a story. Since some chart types may be better suited for a specific slice of the data better than others, it would be nice to be able to make a transition between them while keeping the data in context.
For example, you might want to highlight several parts of a treemap and compare them using a bar chart. Normally, you would have to exit the entire treemap and enter a new bar chart with only the data you need (which could make it difficult to keep the track of the parts being compared and their position in the previous treemap). In Plotteus, you can seamlessly animate any chart type into any other chart type.
Plotteus also makes it easy to do other basic things that are also essential for data storytelling – like highlighting, sorting, or adding new data, all nicely animated.
Limitless animations and a powerful mechanism to control them combined with a config-based approach, customizability, and responsiveness, make for a powerful combination that results in more enjoyable and memorable ways to tell your stories.
Seeing is believing, so make sure to check out their live example, then go tell some stories!
Animating Changes in Webpages
Many readers should know, by now, how much I 💙 the ODU WSDL team, and Lesley Frew — a Computer Science Masters Student in their program — put together a great post on how to animate changes in webpages. I'll let her describe what she and her program-mates have been up to:
We have been developing an alternative way to find and view changes on webpages in order to emphasize the fact that a person made these changes. Our approach is to use storytelling and show the changes as an animation. The technique is similar to when a text message is shown letter by letter to imitate the message being typed in real time, such as in the Netflix docuseries The Most Hated Man on the Internet.
Substack and gifs do not play well together. So, I'm going to have to ask you to hit up the site to see the animation they recorded to get an idea of why this is a creative — and potentially powerful — way to communicate change to readers.
Besides, Lesly's post is very accessible and thorough, and you're likely just at the tolerance threshold of poring over my blatherings, today.
Make sure to check out these resources Lesly linked to:
web-monitoring-diff: a suite of functions that diff (find the differences between) types of content commonly found on the web, such as HTML, text files, etc. in a variety of ways. It also includes an optional web server that generates diffs as an HTTP service.
Hypercane: a framework for building algorithms for sampling mementos from a web archive collection.
as they may help you capture important information for research and other datavis projects.
Since today's drop had visuals and polar coordinates, you may want to check out Alaska Public Media's aurora post, which has a gallery of images from this week's amazing light show at our northern pole. ☮
Until I got to that note about why it’s called “poline” I was hearing it as
poh-leen in my head, and I’m, now, curious as to how readers first thought it was pronounced.