40
Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Embed Size (px)

Citation preview

Page 1: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

AnimatingGraph Theory

David AndersonEdgeCase

@eymiha

Mighty 52

Page 2: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

*some disclaimers

I write software for a living.

I like Math.

I am a rank amateur.

Page 3: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Math is about Visualization

It all started with comparison

Page 4: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Math is about Visualization

It all started with comparison

amount

Page 5: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Math is about Visualization

It all started with comparison

ç√ç√ ç√ç√

amount proximity

Page 6: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Graph Theory is about Connectivity

Reasoning with Circles and Arrows

Page 7: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Graph Theory is about Connectivity

Reasoning with Circles and Arrows

organization

Page 8: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Graph Theory is about Connectivity

Reasoning with Circles and Arrows

organization flow

Page 9: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Graph Theory is Easy

Circles and Arrows make intuitive sense!

AA BB

Page 10: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Graph Theory is Hard

Reasoning is best left to professionals

Page 11: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Graph Theory is Hard

Reasoning is best left to professionals

But it seems like it should be easy.

Page 12: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Graph Theory is Hard

Reasoning is best left to professionals

But it seems like it should be easy. Dammit.

Page 13: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Graph Theory is Magic

Any sufficiently advanced technology is indistinguishable from magic.

- Arthur C. Clarke

Page 14: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

The Path of Learning

BeginnerBeginner

NoviceNovice

ExpertExpert

“awesome!”

“hmmm...”

“that make sense.”

Page 15: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

How Do Normal People Become Adept

BeginnerBeginner

NoviceNovice

ExpertExpert

“wtf?!”

“if you say so...”

“that make sense.”

Page 16: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

The Education ProblemHow do we

more effectively getmore beginners to the novice

stage and

more novices to the expert stage?

Page 17: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

*another disclaimer

My actual educational experience is limited to the student side of the room.

Page 18: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

people think with their

EYES

Seeing is believing.

The Mind’s Eye.

Paying attention to what’s behind the curtain.

Page 19: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

people understand

MECHANISMS

Rube Goldberg was a freaking genius.

Step-by-step thinking.

Mechanisms are what’s behind the curtain.

Page 20: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Mathematics is Expressed

MechanicallyThrough Algorithms

Quantify - calculating values

Qualify - classifying results

Transform - rewriting forms

Page 21: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Mathematics is Expressed

MechanicallyThrough Algorithms

Quantify - calculating values

Qualify - classifying results

Transform - rewriting forms

as is Graph Theory

Page 22: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Ubiquitous Information

Today, isn’t it just incredible to be able to get information about

everything you find interesting on your

desktop, laptop, pad or phone?

Page 23: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Ubiquitous Information

Today, isn’t it just incredible to be able to get information about

everything you find interesting on your

desktop, laptop, pad or phone?

No, I’m not talkingabout CAT PICTURES!

Page 24: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Ubiquitous Information

Why can’t I get information on Graph Theory Algorithms on the

Web?

Page 25: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Ubiquitous Information

Why can’t I get information on Graph Theory Algorithms on the

Web?

Well, these days you can.

Page 26: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Ubiquitous Information

Why can’t I get information on Graph Theory Algorithms on the

Web?

Well, these days you can.

Why can’t I run Graph Theory Algorithms on the Web?

Page 27: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Ubiquitous Information

Why can’t I get information on Graph Theory Algorithms on the

Web?

Well, these days you can.

Why can’t I run Graph Theory Algorithms on the Web?

Yeah, that would be so sweet.

Page 28: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Animated AlgorithmsThey show you how things work!

Vision is the highest bandwidth sense for conveying non-sensory information.

You get the feel for how things work by watching them work.

We finally get Math books with moving pictures.

Playback control - step by step, rewind, fast forward, etc.

Page 29: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Animation on the Web

We’re not talking aboutpre-recorded video...

Page 30: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Animation on the Web

We’re not talking aboutpre-recorded video...

We’re talking about programmatically generated

graphics!

Page 31: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Animation on the Web

So, let’s borrow back from programmers...

We’re not talking aboutpre-recorded video...

We’re talking about programmatically generated

graphics!

Page 32: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Programming

Software is just Mathematicsexecuted in finite speed

with finite memory.

Page 33: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

*a claimer

I guess I am sort of a mathematician...

Page 34: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

The Technology Needed To See Graph

Theory Algorithms Run On Web-Enabled

Devices Is Readily Available Today.

Page 35: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Animation on the Web

JavaScript Runs native in every web browser enabling complete ubiquity.

A dynamic object-oriented language based on prototypal inheritance.

A rich base of well-tested code exists that developers have written to do animation.

Page 36: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

d3.js

Efficient manipulation of documents based on data.

Extremely small and fast.

Bind data to the DOM and spply data-driven transformations.

Brainchild of Mike Bostock(@mbostock, http://bost.ocks.org/mike/)

Page 37: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Let’s see some simple animations...

Page 38: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Next Steps

Build a DSL for expressing Graph Theory Algorithms and Animations.

Build a web-based system for creating, storing and Graph Theory animations.

Build it all in open source.

Make it freely available.

Page 39: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Guiding Lights

Graph Theorists can publish their work in a ubiquitous form.

They can review and test each other’s work more quickly and easily.

They can build on the work of others.

They can more quickly understand how new developments in Graph Theory work.

Page 40: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52

Thanks for Listening...

Any Questions?

David Anderson @eymiha [email protected]