Untangling the Hairball

John Alexis Guerra Gómez


It's Colombia not Columbia

I had a network

Well, actually

I had a question

OpenVis 2014, 2015

  • Couldn't come
  • so I followed online


  • I need to go!
  • Twitter is OpenVis backchannel
  • Am I getting it all?

Who should I be following to get the best out of OpenVis' Twitter discussions?

Well, you could follow all the people that mentions #OpenvisConf

  • 3000+ Tweets
  • 784 Accounts

What about the interesting people that didn't talk #OpenvisConf during the conference?

mbostockmbostock twitter photo

He didn't tweet during OpenVis 2016

Shame game of thrones

What? were you busy doing d3v4? d3.express?

mbostockmbostock twitter photo

¡Gracias viejo!

Shakira gracias

I should be following him

What about only the people followed the most by the people that talk #OpenVisConf?

Let's find the accounts that you (#openVisConf community) follows the most

Colombia's celebration gif
OpenVisConf most followed

Let's visualize it!

  • D3!
  • Networks!

State of the art netviz

Hairball spewing a cat

Filter 300!

Cat coughing

Only influentials!

Cat eating hair


Puss in boots hairball

Back to my question!

Let's fix axis

Number of followers overall vs followers in #OpenVisConf

Links on demand

Add back more nodes

Number of tweets

How to untangle the hairball?


What are your tasks?

What are your users?

Visualization Analysis and Design


NetViz tasks

Overview style tasks


Query style tasks



IEEEVIS Citation Network

All authors citations 2015

Tip1. Filter

Display only the most important nodes for your task (a core)

Tip2 Select neighborhood

That core can be unconnected, so select also their neighborhood

Tip3 Communities

Use community detection


netClustering.cluster(nodes, links)

Force in a box

simulation = d3.forceSimulation(nodes)
  .force("group", forceInABox()
  .force("link", d3.forceLink().links(links)

Distributes clusters on a treemap


Force in a box

Distributes clusters using forces


Tip4 Navigate into clusters

Tip5 Use different layouts


  • Tip6 Ego centric views
  • Tip7 Expand on demand
  • Tip8 Node pining
Ego centric view demo

Other network visualizations

Jean Daniel Fekete's headshotJean-Daniel Fekete Benjamin Bach's headshotBenjamin Bach Nathalie Riche's headshotNathalie Henry Riche Paola Llerena Valdivia's headshotPaola Llerena Valdivia Emmanouil Giannisakis's headshot Emmanouil Giannisakis

Thank you!

  • Define your tasks
  • Filter
  • Overview or Query?
  • Beyond node-link


Come and work with us on cutting edge photo visual analytics

More info here