animating graph theory david anderson edgecase @eymiha mighty 52
TRANSCRIPT
![Page 1: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/1.jpg)
AnimatingGraph Theory
David AndersonEdgeCase
@eymiha
Mighty 52
![Page 2: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/2.jpg)
*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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/3.jpg)
Math is about Visualization
It all started with comparison
![Page 4: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/4.jpg)
Math is about Visualization
It all started with comparison
amount
![Page 5: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/5.jpg)
Math is about Visualization
It all started with comparison
ç√ç√ ç√ç√
amount proximity
![Page 6: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/6.jpg)
Graph Theory is about Connectivity
Reasoning with Circles and Arrows
![Page 7: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/7.jpg)
Graph Theory is about Connectivity
Reasoning with Circles and Arrows
organization
![Page 8: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/8.jpg)
Graph Theory is about Connectivity
Reasoning with Circles and Arrows
organization flow
![Page 9: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/9.jpg)
Graph Theory is Easy
Circles and Arrows make intuitive sense!
AA BB
![Page 10: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/10.jpg)
Graph Theory is Hard
Reasoning is best left to professionals
![Page 11: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/11.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/12.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/13.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/14.jpg)
The Path of Learning
BeginnerBeginner
NoviceNovice
ExpertExpert
“awesome!”
“hmmm...”
“that make sense.”
![Page 15: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/15.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/16.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/17.jpg)
*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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/18.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/19.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/20.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/21.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/22.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/23.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/24.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/25.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/26.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/27.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/28.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/29.jpg)
Animation on the Web
We’re not talking aboutpre-recorded video...
![Page 30: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/30.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/31.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/32.jpg)
Programming
Software is just Mathematicsexecuted in finite speed
with finite memory.
![Page 33: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/33.jpg)
*a claimer
I guess I am sort of a mathematician...
![Page 34: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/34.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/35.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/36.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/37.jpg)
Let’s see some simple animations...
![Page 38: Animating Graph Theory David Anderson EdgeCase @eymiha Mighty 52](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/38.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7e5503460f94b8259a/html5/thumbnails/39.jpg)
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.