狠狠撸

carlo zapponi
@littleark
Bioluminescent creatures of the deep sea
GOTO Berlin
Berlin 6th November 2014
@GOTOber #gotober

Give your proposal a simple and straightforward title.

Clever or inappropriate titles make it harder for people to figure out what you’re really talking about.

Bioluminescent creatures of the deep sea.

what are we really talking about today?

hold on! don’t run away because we’ll talk about…

VISUALIZING SORTING ALGORITHMS

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

Walter Hickey / BI
http://www.businessinsider.com/pie-charts-are-the-worst-2013-6

pie charts are the Aquaman of data visualization

pie charts are good at one thing. comparing 2-3 different data points with very different amounts of information

Walter Hickey / BI
http://visual.ly/impact-social-media-pr-industry-infographic // via @WTFViz

I have a 辫谤辞产濒别尘…

1st try I am a data visualization designer.

2nd try I study data and I transform them into some type of visual stuff.

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...

the answer I like generate order before people’s brains try to do it in their own.

but what is data visualization?

a tool for your eyes and brain to perceive what lies beyond their natural reach. Alberto Cairo – the functional art, 2012

FORM FOLLOWS FUNCTION Louis Sullivan, 1896

Feeling good about an artefact makes us better at using it to accomplish a goal. Don Norman, Emotional Design 2003

FUNTIONALITY Experimenting with novel forms is not just an impulse, it’s a necessity. Alberto Cairo – the functional art, 2012

The mind and eye demand stimulation and surprise. Donis Dondis, A Primer of Visual Literacy, 1973

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

SORTING ALGORITHM a computational process used to organize elements of a sequence in a certain order

0 1 2 3 4 5 6 7 8 9
0 3 7 1 4 5 2 6 8 9

it all started 飞丑别苍…

HOW CAN WE SHOW SORTING ALGORITHMS?

visualization + audibilization

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

the beauty of computer science

+
art of coding OR the coding of art

+
+
learning sorting algorithms better

+
+
learning sorting algorithms better
+
exploration with data visualization

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)

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

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

insertion sort O(n^2)
makes space to the current item by moving larger items to the right
shifting all elements is expensive

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

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

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)

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 ].

inversions count
0 3 7 1 4 5 2 6 8 9

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

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

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

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;
})

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);
}
})

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]+")";
}
})

and now
the best interpretation of
sorting algorithms EVER

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

carlo zapponi
@littleark
www.makinguse.com
GOTO Berlin
@GOTOber #gotober

狠狠撸

Biol

Recommended

More Related Content

Similar to Biol (20)

Recently uploaded (20)

Biol