Introducing POLLEN
How the inspiration to visualize DVS’s Slack channels turned into creating a whole Slack application
CHANNELS CHANNELS EVERYWHERE
When I joined the DVS in February of 2019, the amount of activity on DVS’s Slack was thrilling! I met incredible friends, shared various dataviz projects, learned A LOT and fanboyed/fangirled over some of my favourite data visualization practitioners. In fact, I got so inspired by our vibrant Slack community that I joined the board.
The DVS grew to over 17,000+ members in the last two years and with this monumental expansion, the amount of Slack channels also grew. We currently have 70+ channels in our workspace — that’s two pages of scrolling to see them all!
With such an engaged Slack community, it’s difficult for new members to get a sense of our channel landscape and amazing discussions. I kept thinking that it should be easier to see, discover, and join Slack channels, ideally all in one place.
HOW IT STARTED
To help with this, my partner Owen Fernley and I decided to create something interactive that could visualize all our workspace channels. This seemed like a fun little project for our consulting company.
It was about a year ago and the conversation went something like this:
The inspiration to visualize the DVS Slack channels came from discussions on Slack about the current channel naming structure. The DVS channels are organized into different categories and are separated by their channel names with a hyphen. For example, #location-nyc would be the “nyc” channel under the “location” category. That meant we were working with two hierarchies: channels and the various categories they belong to. As a first step, I made a quick visual to see what the channels would look like all grouped together into their categories.
Meanwhile, Owen was reading up on the Slack API and figured out how to read channel data from the DVS workspace. He soon realized it was possible to generate views not just for the Data Visualization Society, but for any workspace, by making this project a Slack App.
This meant that a channel visualizing Slack App would need to accommodate many different workspaces, some with just one or two channels, all the way to a well organized workspace with hundreds of channels across multiple categories (hey, it could happen). Though we didn’t specifically set out to make a Slack App, we were up for the challenge. The first question on our minds was: how were we going to visualize the channels?
FORCE LAYOUT
The first kind of visualization we considered was a force layout in d3.js. Force layouts use hierarchical data, allowing us to split channels into names and categories. In our first visualization (below), each category was represented by a circle, and their corresponding channel names were placed in surrounding circles connected with thin grey lines.
The d3 physics models ensured the circles didn’t overlap, and animated the circles toward a resting state as the visualization was first loaded. This was interesting to watch, however the arrangement felt like dropping coins on a table.
Furthermore, when we tried this force layout on the DVS Slack workspace, the channels stretched far off and away from each other. It became cumbersome to explore these channels, an exercise in panning endlessly across the screen, following long connecting lines.
Changing the physics settings in d3 allowed for other arrangements, and when we tried to bring the channels together, they tended to cluster like atoms in a liquid.
It was difficult to find a happy medium between the two extremes given the large variety of workspaces that would need to be visualized. We wanted more control, and a more consistent experience across multiple visits.
CIRCLE PACKING
We abandoned the force graph and moved onto circle packing, a type of visualization where nested circles are used to display hierarchical data. In our case, each channel category formed a large circle that surrounded a collection of tightly packed channel names. This worked better, because the channels could be grouped together and positioned consistently.
There were some issues, of course. First, we liked how the larger circles helped to position the channel names, but we also wanted the categories to be included with the rest of the channels, so we copied each category into their own list of channels to force them into view. This worked, but the categories showed up somewhat randomly inside the channel clusters, sometimes to one side. We were looking for a structure that would firmly hold the categories in the centre of each channel.
While brainstorming layouts one afternoon, we started to discuss the possibility of replacing the circles with hexagons, and taking advantage of the mathematically-structural characteristics of a hexagonal grid. And so we built a custom algorithm that wrapped hexagonal channels clockwise around each category, spiralling outward in alphabetical order. The categories were prominent, and the channels were in the same position across multiple visits.
But there was one more redundant issue with this new visualization. The positions were still determined by the circle packing algorithm, which haphazardly organized the categories. We found we often had to zoom out to reorient ourselves while testing larger workspaces, like having to zoom out on google maps because you just weren’t sure what river you were looking at anymore.
We considered a way to two dimensionally organize the channels, but oftentimes simpler is better. There was no reason to see the categories on an x and y axis, so we lined them up horizontally, in a simple straight line. The first category related to the team itself, the rest were distributed alphabetically along the line from left to right. For example, if you were interested in Zebras, you could safely proceed to the right.
Finally we had a Slack channel visualization that we couldn’t complain about. We added a row of carousel indicators to help guide navigation, and rounded the sharp corners of the hexagons. Speaking of hexagons, they inspired our app name because they resembled honeycombs. To us, each channel represents potential conversations and knowledge sharing that our community can pollinate with their ideas. Thus it felt fitting to call our app POLLEN.
We are super excited to release POLLEN — a Slack App that visualizes public channels of any workspace. Now DVS Slack members can easily explore and discover our Slack community and view channels of interest all in one place. In addition, it’s a great way for those not on Slack to get a preview of the DVS Slack community.
So what are you waiting for? Start exploring!
Julia Krolik is an information designer, data scientist, artist, entrepreneur, and public speaker. She founded Art the Science to help foster science-art culture in Canada. She also sits on the Data Visualization Society’s board as the Partnerships Director. Through her creative agency Pixels and Plans, Julia fuses scientific integrity with engaging design to empower government and ngo communication strategies.
Owen Fernley builds software, inspired by the process of creative coding and problem solving. He is currently a full stack developer at Pixels and Plans, a consulting firm he founded with his partner after working in research geophysics and exploring experimental music. His projects include interactive data visualizations, immersive worlds, and time-based art.
