Bioluminescent creature of the deep sea - GOTO...

118

Transcript of Bioluminescent creature of the deep sea - GOTO...

Page 1: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin
Page 2: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

carlo zapponi

@littleark

Bioluminescent creatures of the deep sea

GOTO Berlin

Berlin 6th November 2014

@GOTOber #gotober

Page 3: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

Give your proposal a simple and

straightforward title.

Page 4: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

Clever or inappropriate titles

make it harder for people to

figure out what you’re really

talking about.

Page 5: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

Bioluminescent creatures

of the deep sea.

Page 6: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

what are we really

talking about today?

Page 7: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

ALGORITHMS

Page 8: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

SORTING ALGORITHMS

Page 9: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

hold on! don’t run away

because we’ll talk about…

Page 10: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

VISUALIZING

SORTING ALGORITHMS

Page 11: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

fun facts

Page 12: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

changing face of America

Page 13: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin
Page 14: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

atlanta falcons

Page 15: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

https://twitter.com/mr_mdjones/status/524874356879790080/photo/1

Page 16: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

aquaman

Page 17: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin
Page 23: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

I have a problem…

Page 24: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

carlo, what do you do?

Page 25: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

1st try

I am a data visualization designer.

Page 26: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin
Page 27: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

2nd try

I study data and I transform them

into some type of visual stuff.

Page 28: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin
Page 29: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

3rd and last try Out there, there is a lot of data generated by

people and the environment. Sometime it is

very scary to be put face to face with this giant

amount of data. My job is to take all the

information, understand it and transform it into

some type of interactive tool that simplify the

understanding of the data. Usually I generate a

web application that can be used by people

who have no knowledge of the data...

Page 30: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin
Page 31: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

the answer I like

generate order before people’s

brains try to do it in their own.

Page 32: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

but what is data visualization?

Page 33: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

a tool for your eyes and brain to

perceive what lies beyond their

natural reach.

Alberto Cairo – the functional art, 2012

Page 34: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

FORM vs BEAUTY

Page 35: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

FORM FOLLOWS FUNCTION

Louis Sullivan, 1896

Page 36: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

Feeling good about an artefact

makes us better at using it to

accomplish a goal.

Don Norman, Emotional Design 2003

Page 37: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

FORM vs BEAUTY vs FUN

Page 38: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

FORM + BEAUTY + FUN

Page 39: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

FUN?

Page 40: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

FUN

+

FUNCTIONALITY

Page 41: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

FUNTIONALITY

Page 42: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

FUNTIONALITY

Experimenting with novel forms

is not just an impulse,

it’s a necessity.

Alberto Cairo – the functional art, 2012

Page 43: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

The mind and eye demand

stimulation and surprise.

Donis Dondis, A Primer of Visual Literacy, 1973

Page 44: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

FUN? GREAT, BUT HOW?

Page 45: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin
Page 46: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

http://bl.ocks.org/mbostock/3231298

Page 47: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

http://bl.ocks.org/mbostock/3231298

Page 48: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

http://bl.ocks.org/mbostock/3014589

Page 49: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

http://bl.ocks.org/mbostock/1345853

Page 50: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

it’s not just D3.js

Page 51: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

peoplemov.in

Page 52: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin
Page 53: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

worldshap.in

Page 54: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin
Page 55: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

bolid.es

Page 56: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin
Page 57: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

VISUALIZING

SORTING ALGORITHMS

Page 58: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

SORTING ALGORITHM

a computational process used

to organize elements of

a sequence in a certain order

Page 59: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

0 1 2 3 4 5 6 7 8 9

0 3 7 1 4 5 2 6 8 9

Page 60: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

it all started when…

Page 61: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

https://flic.kr/p/569Stq

Page 62: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin
Page 63: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin
Page 64: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

HOW CAN WE SHOW

SORTING ALGORITHMS?

Page 65: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

sorting-algorithms.com

Page 66: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

sorting-algorithms.com

Page 67: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

sortvis.com

Page 68: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

sortvis.com - quicksort

Page 69: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

sortvis.com – bubblesort

Page 70: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

Algorithms – 4th edition

Page 71: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

Algorithms – 4th edition

Page 72: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

visualization + audibilization

Page 73: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

sorting objects

Page 74: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

EARLY PROTOTYPES

Page 75: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin
Page 76: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin
Page 77: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin
Page 78: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin
Page 79: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin
Page 80: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin
Page 81: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin
Page 82: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin
Page 83: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

Kunstformen der Natur (1904, Ernst Haeckel, Art forms of nature)

Page 84: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

Kunstformen der Natur (1904, Ernst Haeckel, Art forms of nature)

Page 85: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

Kunstformen der Natur (1904, Ernst Haeckel, Art forms of nature)

Page 86: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

Kunstformen der Natur (1904, Ernst Haeckel, Art forms of nature)

Page 87: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

Art from code

Page 88: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

learning computer science

Page 89: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

the beauty of computer science

Page 90: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

the beauty of computer science

+

art of coding OR the coding of art

Page 91: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

the beauty of computer science

+

art of coding OR the coding of art

+

learning sorting algorithms better

Page 92: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

the beauty of computer science

+

art of coding OR the coding of art

+

learning sorting algorithms better

+

exploration with data visualization

Page 93: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

www.sorting.at

Page 94: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

www.sorting.at

Page 95: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

bubble sort O(n^2)

if the list is already sorted O(n)

always compare elements next to each other

also known as the “sinking sort”, “it has only a catchy name” (Donald Knuth)

Page 96: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

comb sort O(n^2)

improves bubblesort by eliminating turtles and rabbits

gap between compared elements is bigger than 1 and shrinks at every iteration

Page 97: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

selection sort O(n^2)

search for the smallest element and put it in first position

inefficiently looks for element to be positioned at their right position in the list

only n swaps, therefore is useful where swapping is expensive

Page 98: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

insertion sort O(n^2)

makes space to the current item by moving larger items to the right

shifting all elements is expensive

Page 99: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

shell sort O(n log n) – O(n )

variant of insertion sort based on pre-defined gaps

works on shrinking gaps, complexity based on the gaps

2 3/2

Page 100: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

quick sort O(n log n)

divide and conquer algorithm

based on partioning and pivot selection

all elements smaller than the pivot are moved before it, greater after it

Page 101: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

heap sort O(n log n)

improved selection sort by selecting largest element and placing at the end

uses a heap (b-tree) to rearrange the list

finding the next largest element takes O(log n)

Page 102: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

inversions count

An inversion is a pair of positions in a sequence where the

elements there located are out of their natural order.

It indicates the distance of that sequence from being sorted.

A pair of elements (A[ i ] , A[ j ]) of a sequence A is called an

inversion if i<j and A[ i ]>A[ j ].

Page 103: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

inversions count

0 3 7 1 4 5 2 6 8 9

Page 104: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

inversions count

(3,1),(3,2),(7,1),(7,4),(7,5),(7,2),(7,6),(4,2),(5,2)

0 3 7 1 4 5 2 6 8 9

Page 105: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

inversions count

0 1 2 3 4 5 6 7 8 9

0 3 7 1 4 5 2 6 8 9

(3,1),(3,2),(7,1),(7,4),(7,5),(7,2),(7,6),(4,2),(5,2)

0 3 7 1 4 5 2 6 8 9

Page 106: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

www.sorting.at

Page 107: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

based on require.js and D3.js

Page 108: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

asynchronous code loading

{

“name” : “Bubble Sort”,

“complexity“ : “O(n )”,

“wiki” : “http://en.wikipedia.org/wiki/Bubble_sort”,

“code” : function() {

var steps=[];

function bubblesort(array) {

//sorting code

//save each step

}

return function(array) {

bubblesort(array);

return steps;

}

}

}

2

Page 109: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

3 D3 TIPS

Page 110: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

d3.timer

to repeat batch of operations with requestAnimation frame

prevent path rendering from locking up the UI

d3.timer(function(elapsed){

element

.selectAll("path")

.attr("d",function(d,i){

//evaluate path_coordinates

return path_coordinates;

})

//evaluate flag of end of loop

return flag;

})

Page 111: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

attrTween(t) + stroke-dashoffset

to animate the drawing

The attrTween operator is used when you need a custom

interpolator, such as one that understands the semantics of

SVG path data

.transition()

.duration(DURATION)

.attrTween("stroke-dashoffset",function(d,i){

var len = this.getTotalLength();

return function(t) {

return len*(1-t);

}

})

Page 112: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

attrTween(t) + path.getPointAtLength(len*t)

to animate along a path

.transition()

.duration(DURATION)

.attrTween("transform",function(d){

return function(t){

var len = path.getTotalLength();

var p = path.getPointAtLength(len*t);

return "translate("+p.x+","+p.y]+")";

}

})

Page 113: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin
Page 114: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

and now

the best interpretation of

sorting algorithms EVER

Page 115: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

Quick-sort with Hungarian ("Csángó") folk dance

Page 116: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin
Page 117: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin

carlo zapponi

@littleark

www.makinguse.com

GOTO Berlin

@GOTOber #gotober

Page 118: Bioluminescent creature of the deep sea - GOTO Conferencegotocon.com/dl/goto-berlin-2014/slides/CarloZapponi... · 2014-11-08 · Bioluminescent creatures of the deep sea GOTO Berlin