Constellations. Metaphors. SPLOT? It’s in the Stars.

I’ve been working on a prototype web site I was asked to do for Tannis Morgan at JIBC. Beyond getting into some new code tricks, the best part of this was how she first approached me on it.

With a metaphor.

Meet a “Constellection” – my portmanteau for a collection of web resources arranged like a constellation.

Just like I rarely start a blog post without an image to lead and set the tone, for the projects, web sites, even classes I teach, I work best when there is a metaphor or concept to tie the whole room together (did you see what I did there?).

For Networked Narratives it was placing alchemy in a digital space. In Connected Courses DML workshops from 2017 and 2016, it was the wild wild west.

In 2016-2017 I worked with Tannis and other colleagues on the project at the University of Guadalajara. At our first meeting with Sandra Cobain at UDG we heard about their interests for the professional development we were asked to bring to several hundred professors.

They had done a great deal of research and thinking behind the project, written as a design document but at some point at the meeting, as the one tasked with making it come alive as a web site, I had to ask them for the metaphor. And it was Coco, one of the UDG faculty who helped shape the project who suggested The Agora, thus framing the whole project at http://udg.theagoraonline.net.

Tannis now firmly buys into my “metaphor” approach. She contacted me again for a new project she and her TIBC team were doing a design development for. This one was with a large government agency needing a flexible way to share and distribute collections of mostly small bits of training resources (documents, videos, interactives, web sites, etc).

And she had this idea that collections of them (which we call “stars”) might be represented as constellations.

I did kind of run wild with the idea, and before rambling too much more, I will remember my own Law of Getting to the Demo Early. Again, this is a prototype! Check out the constellations… (and yes the content is fluff and ipsum lorem style).

The pile of code for this WordPress theme is at https://github.com/cogdog/constellection.Since I was looking at some other WordPress themes for a different portfolio project, I had seen the Rebalance theme which seemed to have the visual elements I would need, as well as the large featured image area to place the visualizations.

Stars and Constellations

The idea is that there are star items:

My thought is these would be contributed via a SPLOT-like front-end submission form, there is a mock up (it does not submit anything, so click away all night).

Constellations would more likely be created inside the WordPress dashboard, but maybe there is a reason some iteration of this concept would want a public form (so another demo that does nothing).

Right now the constellations are built by inputting a comma separated list of the IDs for stars; in a more complete version, there would be some kind of interface for searching and using check boxes to collect them.

The thing about these collections is that sequencing is not a factor. A constellation is a collection of 3-15? 20? resources that Mary might assemble to assign to Todd, and then maybe a slightly different set for the people in Customer Service.

But the whole idea of the thing under the hood is that as a collection of stars, each has parameters that contribute to its relative size (number of views, ratings, how often it is used in constellations), and that an arrangement of stars in a constellation is a function of how similar they are (common categories, tags, overall content length, similar words?).

Banging the D3js pipes

In my scouting I came across this amazing visualizations of celestial and solar system maps all powered by the D3js visualization library. The examples of things people have done with d3js are staggering.

The one that came closest in my mind was the Forced Directed Graph mapping the relationships of characters and their co-occurence in Les Misérables. I started with that example, and making them instead something like blog posts. I had to learn how to add text labels, and hyperlinks, and mess around with the parameters, finally getting that HTML demo version previewed above:

I was flying by the seat of my Google search pants in trying to figure out how all this worked, and it was the first things I have done with dynamic SVG content. The demo version first had the data it read in via a referenced json file. I thought my WordPress instance would be pulling in json files the site would store. I was able to get around that.

Making it work in WordPress called for creating Custom Post Types for the Stars and the constellations, and they each have their own taxonomies too. All of their parameters are kept in custom fields. The way I was able to get the interactive ones done was to generate json arrays of the two data parts (one array for the nodes or stars and another for their links). There’s some duct taped functions that recalculate them when the constellation is saved:

A few custom fields for a constellation

I struggled a bit (or a lot) to get the SVG portion to scale to different window sizes, and also when the window was changed. There’s a draw function which scales everything according to the size of the div that contains the SVG, and a JavaScript listener function to call the function again when the window was resized. The trick here was removing the stars and lines and redrawing them. And a lot of fudging to keep them from going to far afield. And then getting the CSS positioning right to have it sit inside the space the theme’s featured image takes up.

But here is a working version of one to play with:

Now the constellation may be neat to play with, but it’s not essential for getting the materials; so each WordPress template for a constellation also generates on the side and at its footer, links to all the star items within it. It counts and stores views, and collect public ratings (always brilliant WP-Post Ratings plugin).

The code that generates the visualization is stored on a PHP template file, where when needed, the two json data arrays are read from their post meta data and fed into. I had dones this stuff way back in my early PHP work; I found a nice reminder of how to do this with Daggerhart’s Simple PHP Templating function.

Getting the star space into the page itself was my hope, but not quite sure I could pull it off. I was thinking it would maybe pop up in an external window or a lightbox overlay, but I surprised myself when it worked in the page. It took some CSS banging with a pipe wrench action to get it there (absolute positioning + some duct tape).

The front page archive of constellations and any archive of them would not work efficiently or even need interactive d3js representations. I hope in the future to generate these images as needed automatically

For now, they are manually created screenshots (because this is a prototype). Doing this required some more d3js manipulation to add a small button spot (a grey “+/-” in the bottom right):

A little button to toggle the labels on and off.

This enables me to hide the labels to take a screenshot. Wow, eh?

Labels hidden

Next Steps…

From the start of this I was thinking of this as a possible future SPLOT, where site visitors can contribute star items that a site owner (or maybe other visits) can build constellations out of. The formula I used for weighting the stars and determining a “distance” between the two needs to be fleshed out more. I have built in factors to weigh each element; this could be settings entered in an admin screen.

The visualization part too needs some refinement. In some cases labels overlap, and quite possibly might venture out of view.

But you have to stop sometime and call it a prototype. It’s in the stars now.

Let me know if this is of any interest to work you are doing? Give me a good metaphor and I will run wild with it…

Featured Image: Screenshot created with the Constellation Maker site http://areios.herokuapp.com/

 Share this barking on social media

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon