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

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

Magical description aside, Poline is a lightweight, 100% dependency free, and wicked fast JavaScript library by David Aerne. It facilitates the generation of color palettes by sampling from points on a curve/line that is “drawn” between anchors points in a polar coordinate system.

The name of the library is a portmanteau of “polar line”

¹

.

Poline generates 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).

For example:

• 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):

• linearPosition

• exponentialPosition

• quadraticPosition

• cubicPosition

• quarticPosition

• sinusoidalPosition (the default)

• asinusoidalPosition

• arcPosition

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.

Plotteus

Photo by Daniel Schludi on Unsplash

Plotteus [GH] is a “JavaScript library designed for better storytelling”. It is purpose-built to help you create interactive, data-driven visualizations and craft narratives around them. With it, you define one or chart types, choose how to transition between story/visual states, and let the library do all the hard work.

There are scads of story/scrollytelling tools out there. What makes Plotteus special? We'll let them tell you:

Fine-grained control

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.

Smooth transitions

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.

Fun

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

Photo by Daria Kraplak on Unsplash

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.

FIN

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

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