Bringing Networks to Life:Data visualization for user engagement

About KeyLines• A JavaScript web application SDK• Pure HTML5 network visualization• Graph layouts and analytics• Customizable appearance &

functionality• Full event model• Fast performance• Excellent developer support

What does data look like?

It’s definitely blue, right?

Sometimes green…

What does data look like?

(Answer: It’s invisible)

What is network visualization• Also known as graph visualization• Visualizing connected data• Interactive node-link diagrams

Three rules of data visualization1. Visualization must be efficientOtherwise users misinterpret data, or miss key insights

2. Visualization must be intuitiveOtherwise users won’t know what they’re looking at

3. Visualization must be engagingOtherwise users will be bored, or not use it at all

Visualization must be efficient

Combine Nodes

Utilize Filters

Display Dependencies

• Understand your data model• Limit your variables • Limit volume of data • Aggregate and group where possible • Use intuitive attributes• Offer the ‘right’ layouts

Visualization must be efficient

George Bush looking at Osama Bin Laden's financial network (AP Photo / Doug Mills)

Visualization must be intuitive

Plan Your Interactions

Plan Your Emphasis Methods

• Define your question• Plan your interactions • Plan your emphasis methods • Use a meaningful color scheme• Forget using 3D• Use only functionality that answers

the question

Visualization must be intuitive

Visualization must be engaging

Consistent Interactions

Use Animation (Sparingly)

• Know your users• Seamless integration into existing

tools• Consistent interactions• Easy chart navigation • Explore and expand on demand • Add animation (sparingly)

Visualization must be engaging

Thanks! Any Questions?

Nate@KeyLines.com@Key_Lines