Filtering networks over time using custom controls

Working with networks over time is hard stuff. Some people prefer to see the development history of the project over time, while others want to see how the network itself evolved.

Even if we could all agree on a data model to use, we’d still disagree on the best way to interact with and edit the data over time. Some would want a simple progress bar that played the network out from start to finish. Others might want to be able to select a single start / end range. And others may want to be able to select a series of time ranges instead of being confined to just one.

Fortunately, Kumu’s flexible data model and customizable ui allow us to solve each use case on its own. We chose to tackle the evolution of the network itself (by year) for starters.

But first... to give you some appreciation for what the trailblazers (like jwnixon) had to go through before: previously you had to tag the elements and connections by year, create a separate view for each time range you wanted to see, and then use the standard nav menu to switch between views. To call the process tedious would be an understatement. It was downright painful!

With the release of custom controls, it’s now easy to unfold changes in a network over time using the tagged-timeline control. Today we want to show you how to use the tagged-timeline control to filter networks over time without pulling your hair out. In this post we'll walk you through:

• how to structure your data
• how to add the tagged-timeline control to your map
• how to use the tagged-timeline control

With these new found powers you’ll be able to easily see how your network has progressed over time and what effect any interventions (gatherings, leadership development, network weaving, project funding, etc) might be having.

Let's dive in...

How to structure your data

We've implemented our initial timeline features by using the tags field. Originally we were going to use begin/end fields but using tags allows us to support disjointed time ranges (where elements/connections have gaps in their existence within the network - eg. an element joins in 2010, leaves in 2013, then rejoins in 2016).

As far as the data goes, simply add the years that a given element or connection was present as a tag ("2009") and you're all set.

Here’s an example of what your element import might look like if you wanted to filter elements over time:

And here’s what your connection import might look like if you wanted to filter connections over time:

How to add the tagged-timeline control to your map

To add the tagged-timeline control, you'll need to add the code below to your view using the advanced editor. In this example we’re assuming you’re only interested in filtering elements over time.

@controls {
  bottom {
    tagged-timeline {
      range: 2010..2016;
      target: element;
    }
  }
}

Use range to set which years are available to filter by, and use target to provide a selector that narrows down which things the filter applies to (e.g. if you're tagging elements and connections with years, use target: element, connection; instead).

How to use the tagged-timeline control

You should now see a list of years at the bottom of your map:

Now that you’ve added the control to your map, there are a number of powerful ways to interact with it:

• click on a year to toggle it on / off
• double click on any year to toggle all years on / off
• click on a year then SHIFT+click a later year to select all years in between

Note: If you’re only tagging items with the year they joined the network (versus all years they were part of the network), make sure to keep the earlier years activated as you unfold the network over time.

That’s it for today! Make sure to read the tagged-timeline guide at docs.kumu.io if you want to learn more.

If you have any suggestions or questions, please email them to support@kumu.io or chat with us on slack.