DATAVIZ

    Sandra Becker MAD 09/2019

INTRO DATAVIZ

SESSION01

 

WHY DO WE NEED DATAVIZ?

SESSION01

 

"THE PURPOSE OF DATA VISUALIZATION ARE INSIGHTS NOT PICTURES."

BEN SCHNEIDERMAN

SESSION01

 

"LET MY DATASET CHANGE YOUR MINDSET."

HANS ROSLING

SESSION01

 

"IT'S NOT WHAT YOU LOOK AT THAT MATTERS, IT'S WHAT YOU SEE."

HENRY DAVID THOREAU

SESSION01

 

"ABOVE ALL ELSE SHOW THE DATA."

EDWARD R. TUFTE

SESSION01

 

WHAT IS DATA VIZ?

SESSION01

 

SESSION01

 

A WORLD OF OPPORTUNITIES ...

SESSION01

 

SESSION01

 

SMALL MULTIPLE LINE

SESSION01

 

RIDGELINE

SESSION01

 

SMALL MULTIPLE AREA

SESSION01

 

MULTI- AREA

SESSION01

 

SMALL MULTIPLE AREA & LINE

SESSION01

 

ANIMATED

SESSION01

 

HIGHLIGHTED

BIG

DATAVIZ

 

SESSION01

 

REALTIME

DATAVIZ

 

SESSION01

 

DYNAMIC

DATAVIZ

 

SESSION01

 

SMART

DATAVIZ

 

SESSION01

 

ALGO

DATAVIZ

 

SESSION01

 

ART

DATAVIZ

 

SESSION01

 

STORY

DATAVIZ

 

SESSION01

 

WHAT ARE YOU GOING TO LEARN...

SESSION01

 

DATAVIZ

CREATION

INTERPRETATION

EVALUATION

SESSION01

 

SESSION02

 

EXPLORE R/GGPLOT2

PART 01

WHAT IS GGPLOT2?

SESSION02

 

"A GRAMMAR OF GRAPHICS IS A TOOL THAT ENABLES US TO CONCISELY DESCRIBE THE COMPONENTS OF A GRAPHIC."

Hadley Wickman

SESSION02

 

SESSION02

 

HOW TO LEARN GGPLOT2?

SESSION02

 

 

SEARCH

 

TRY OUT

SESSION02

 

"EXCELLENCE IN STATISTIC GRAPHS CONSISTS OF COMPLEX IDEAS COMMUNICATED WITH CLARITY, PRECISION AND EFFICIENCY."

EDWARD R. TUFTE

SESSION02

 

INSTALLATIONS

SESSION02

 

THEMES

SESSION02

 

SESSION02

 

DEFAULT

SESSION02

 

BW

SESSION02

 

PERSONALISED

SESSION02

 

DARK

EXPLORATIVE ANALYSIS

SESSION02

 

SESSION02

 

FREQUENCY PLOT

SESSION02

 

SHOWING DETAILS IN DISTRIBUTION

SESSION02

 

ADDING A VISUAL ENCODING + ZOOMING

SESSION02

 

HISTOGRAM

SESSION02

 

USING BARS INSTEAD OF LINES

SESSION02

 

ADDING A VISUAL ENCODING: COLOR

SESSION02

 

CONCEPT OF GRAMMAR OF GRAPHICS - OVERLAPPING

SESSION02

 

SMALL MULTIPLE - HISTOGRAM

SESSION02

 

SMALL MULTIPLE USING A COLOR COE  - HISTOGRAM

DENSITY PLOT

SESSION02

 

SESSION02

 

Kernel density estimate

SESSION02

 

ADDING A VISUAL ENCODING: COLOR

SESSION02

 

USING TRANSPARENCY INSTEAD

SESSION02

 

RIDGELINE PLOT

SESSION02

 

SESSION02

 

CHANGING SCALING/OVERLAP FACTOR

SESSION02

 

SCATTER PLOT

SESSION02

 

DEFAULT

SESSION02

 

REDUCE SIZE & ADD TRANSPARENCY

SESSION02

 

SHOWING QUANTILE

SESSION02

 

SUB-SAMPLE

SESSION02

 

LOG- SCALING

SESSION02

 

ADDING A TREND

SESSION02

 

ADDING CONTEXT: SMALL MULTIPLE

SESSION02

 

MORE CONTEXT

SESSION02

 

HEXAGONAL BINNING

SESSION02

 

AGGREGATION ENCODED IN COLOR

SESSION02

 

LOG SCALE

SESSION02

 

DENSITY: 2D

SCALE & AXIS

SESSION02

 

SESSION03

 

EXPLORE R/GGPLOT2

PART 02

TUFTE IN R

SESSION03

 

SESSION03

 

TUFTE THEME

theme_tufte(base_size = 11, base_family = "serif", ticks = TRUE)

SESSION03

 

SESSION03

 

TUFTE BOX PLOT

SESSION03

 

SESSION03

 

SESSION03

 

SESSION03

 

ADDING DIMENSIONS

SESSION03

 

SESSION03

 

DOT-DASH SCATTER PLOT

SESSION03

 

MARGINAL - BOX-PLOT SCATTER PLOT

SESSION03

 

MARGINAL - HISTOGRAM SCATTER PLOT

SESSION03

 

MARGINAL - DENSITY SCATTER PLOT

TIME SERIES ANALYSIS

SESSION03

 

SESSION03

 

LINE CHART - FILLED OR DOTTED

SESSION03

 

ADDING COLOR AS VISUAL ENCODING

SESSION03

 

SMALL MULTIPLE TO DECLUTTER

SESSION03

 

ADDING A TREND ESTIMATION

SESSION03

 

EXPLORATION FLOW

LIFE EXPECTANCY OVER TIME BY COUNTRY/CONTINENT

SESSION03

 

LIFE EXPECTANCY - ALL COUNTRIES

SESSION03

 

COLOR FOR ENCODING THE CONTINENT

SESSION03

 

SMALL MULTIPLE TO DECLUTTER

SESSION03

 

ADDING A TREND ESTIMATION

SESSION03

 

MORE CONTEXT - ADDING ALL DATA IN THE BACKGROUND

SESSION03

 

FOCUSING ON EUROPE

SESSION03

 

ADDING ALL THE CONTEXT AGAIN

SESSION03

 

SMALL MULTIPLE - ZOOM IN COUNTRIES

ADVANCED VIZ

 

SESSION03

 

PARALLEL  COORDINATES

 

SESSION03

 

SESSION03

 

DEFAULT

SESSION03

 

ENCODING COLOR

SESSION03

 

STYLE CHANGE

NO PIE, BUT A WAFFLE

SESSION03

 

SESSION03

 

SESSION03

 

DEFAULT

SESSION03

 

SMALL MULTIPLE

LET'S ADD A DUMBBELL

SESSION03

 

SESSION03

 

SORTED

SESSION03

 

USING REFERENCE LINES

SESSION03

 

SORTED & REFERENCE LINES

MARKDOWN

 

SESSION03

 

SESSION03

 

RESUME OF THE EXPLORATION

INSPIRATION

 

SESSION03

 

SESSION03

 

SESSION04

 

VISUAL DESIGN

HOW TO CREATE A DATAVIZ?

SESSION04

 

#1 DEFINE OBJECTIVE

SESSION04

 

#2 EXPLORE DATA

SESSION04

 

#3 DESIGN IDEA

SESSION04

 

VIZ TYPES

SESSION04

 

THE RIGHT VIZ TYPE ...

SESSION04

 

VIZ ENCODING

SESSION04

 

SESSION04

 

#4 TOOL IMPLEMENTATION

SESSION04

 

SESSION04

 

SESSION04

 

SESSION04

 

SESSION04

 

#5 RESULT REVIEW

SESSION04

 

U X

SESSION04

 

HUMAN PERCEPTION

SESSION04

 

GOOD VIZ

SESSION04

 

SESSION04

 

BAD VIZ

SESSION04

 

WTFVIZ

SESSION04

 

VISUAL COMPLEXITY

SESSION04

 

"Even publications, such as NY Times, assume that people are intelligent enough to read complex prose, but too stupid to read complex graphics."

EDWARD R. TUFTE

SESSION04

 

NR. VISUAL ENCODINGS

SESSION04

 

SESSION04

 

LEVEL OF INNOVATION

SESSION04

 

SESSION04

 

SESSION04

 

LOCATION INTELLIGENCE

PART 01

SESSION05

 

VISUALIZE ANALYSE VISUALIZE ANALYSE VISUALIZE ANALYSE VISUALIZE

VISUALIZE ANALYSE VISUALIZE ANALYSE VISUALIZE

VISUALIZE ANALYSE VISUALIZE ANALYSE 

VISUALIZE ANALYSE VISUALIZE

VISUALIZE ANALYSE 

VISUALIZE

STOP!

 

 

SESSION05

 

HOW TO DEAL WITH BIG DATASETS?

SESSION05

 

AGGREGATE HEXAGONAL BINNING & CLUSTERING

FILTER EXTREM & TARGET GROUPS

STYLE SIZE & OPACITY

 

 

SESSION05

 

01 CUSTOMER RISK IDENTIFICATION

SESSION05

 

01 CUSTOMER CONCENTRATION HEATMAP

SESSION05

 

SESSION05

 

02 EXTREM GROUP    FILTER

SESSION05

 

SESSION05

 

SESSION05

 

03 SPEND SEGMENTS 

CLUSTERS

SESSION05

 

SESSION05

 

SESSION05

 

SESSION05

 

04 TARGET GROUP

STYLING

SESSION05

 

SESSION05

 

SESSION05

 

ALL IN 1 MAP

SESSION05

 

SESSION05

 

LOCATION INTELLIGENCE

PART 02

SESSION06

 

HOW TO GAIN INSIGHTS?

SESSION06

 

01 CONNECT NEW DATASETS

02 SHOW UNCERTAINTY

03 USE DYNAMIC SAMPLING

 

SESSION06

 

01 SHOP AREA PERFORMANCE

SESSION06

 

01 TARGET GROUP

STYLE BY VALUE & ICON

SESSION06

 

SESSION06

 

SESSION06

 

02 AREA OF INFLUENCE

CREATE TRAVEL BUFFERS

SESSION06

 

SESSION06

 

03 INTERSECTION - CUSTOMER

INTERSECT WITH THE SECOND LAYER & AGGREGATE & STYLE BY VALUE

SESSION06

 

SESSION06

 

SESSION06

 

04 INTERSECTION - SHOPS

INTERSECT WITH THE SECOND LAYER & ADAPT COLOR CODE

SESSION06

 

SESSION06

 

SESSION06

 

05 ALL CUSTOMERS DISTRIBUTION

ADD ANOTHER LAYER

SESSION06

 

SESSION06

 

05 ADD SHOP FILTER

ADD A WIDGET

SESSION06

 

SESSION06

 

ALL IN 1 MAP

SESSION06

 

SESSION06

 

02 SPENDING SEGMENTS & OUTLIERS

SESSION06

 

01 SPATIAL SPENDING CORRELATION

ANALYSIS DETECT OUTLIERS & CLUSTERS

SESSION06

 

SESSION06

 

02 SHOW SEGMENTS - COLOR CODE

STYLE BY VALUE

SESSION06

 

SESSION06

 

SESSION06

 

03 SPENDING - SIZE CODE

STYLE BY VALUE

SESSION06

 

SESSION06

 

04 CERTAINTY - OPACITY CODE

CARTOCSS FILTER

SESSION06

 

SESSION06

 

05 ADD EXPLANATION

HTML ADD A LEGEND

SESSION06

 

SESSION06

 

06 ADD SEGMENT FILTER

ADD A WIDGET

SESSION06

 

SESSION06

 

ALL IN 1 MAP

SESSION06

 

SESSION06

 

03 CRIME ANALYSIS OVER TIME

SESSION06

 

01 CREATE CONTEXT

CREAT POLYGONS FROM POINTS & AGGREGATE & STYLE BY VALUE

SESSION06

 

SESSION06

 

SESSION06

 

02 REDUCE DATA

ADD A NEW LAYER & SUB-SAMPLE

SESSION06

 

SESSION06

 

03 TIME ANALYSIS

CREAT A TORQUE MAP & STYLE BY VALUE

SESSION06

 

SESSION06

 

04 DYNAMIC SAMPLING

COMPARE DIFFERENT SAMPLES

SESSION06

 

SESSION06

 

SESSION06

 

SESSION06

 

05 ADD CONTEXT

UNHIDE THE DISTRICT LAYER

SESSION06

 

SESSION06

 

ALL IN 1 MAP

SESSION06

 

SESSION06

 

PERCEPTION

SESSION07

 

ANSCOMBE'S QUARTET

SESSION07

 

SESSION07

 

SESSION07

 

SEEING=UNDERSTANDING

SESSION07

 

SESSION07

 

WEBER'S LAW

SESSION07

 

SESSION07

 

SESSION07

 

SESSION07

 

SESSION07

 

SESSION07

 

SESSION07

 

PRESENTING TRUTH

SESSION07

 

SESSION07

 

SESSION07

 

SESSION07

 

SESSION07

 

SESSION07

 

show the data

tell the truth

help to think about information rather than design

encourage the eye to compare the data

make large dataset coherent

SESSION07

 

SESSION07

 

COLOR

SESSION07

 

SESSION07

 

SESSION07

 

danger

passion

blood

love

agressive

SESSION07

 

SESSION07

 

environment

nature

permission

SESSION07

 

SESSION07

 

sun

happiness

playful

SESSION07

 

SESSION07

 

water

cool

quietness

hope

SESSION07

 

SESSION07

 

death

luxury

sophistication

 

SESSION07

 

SESSION07

 

wedding

pure

innocent

 

SESSION07

 

SESSION07

 

SESSION07

 

SESSION07

 

SESSION07

 

POSITION

SESSION07

 

SESSION07

 

SESSION07

 

SESSION07

 

REDUNDANT

SESSION07

 

SESSION07

 

SESSION07

 

INTERACTIVITY

SESSION07

 

NAVEGATE

IDENTIFY

COMPARE

REDUCE

SESSION07

 

SESSION07

 

SESSION07

 

SESSION07

 

SESSION07

 

SESSION07

 

SESSION07

 

INTERACT D3.JS

PART 01

SESSION08

 

WHAT IS D3.JS?

SESSION08

 

"EFFICIENT MANIPULATION OF DOCUMENTS BASED ON DATA."

MIKE BOSTOCK

SESSION08

 

 

CHARTING TOOL  

OPEN SOURCE

COMMUNITY DEVELOPMENT

VISUAL PHILOSOPHY

BRILLIANT IDEA

 

SESSION08

 

+

=

SESSION08

 

SESSION08

 

&

D3.V5

 

&

D3.V4

 

 

D3.V3

 

SESSION08

 

HOW TO LEARN D3.JS?

SESSION08

 

 

EXAMPLES

 

TUTORIALS

SESSION08

 

SESSION08

 

SESSION08

 

HTML

<!-- -->

CSS

/**/

SCRIPT

// or /**/

YOU HAVE TO SAY SOMETHING

SESSION08

 

SESSION08

 

SESSION08

 

WEBSTANDARDS

SESSION08

 

HTML

SESSION08

 

SESSION08

 

<!DOCTYPE html>
<html>

  <head>
    <title>my first HTML</title>
        <h1>My main title</h1>
        <h2>My top level heading</h2>
        <h3>My subheading</h3>
        <h4>My sub-subheading</h4>
  </head>

  <body>
   Heya there
  </body>
  
  <p>My cat is very grumpy</p>
  <p><strong>My cat is very</strong> grumpy.</p>
  
  <ul> 
      <li>technologists</li>
      <li>thinkers</li>
      <li>builders</li>
  </ul>
 

</html>

SESSION08

 

DOM

SESSION08

 

D3select
D3selectAll

SESSION08

 

<!doctype html>

<html>
  <head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
    <p>Hola Barcelona</p>
    <p>Como va con D3?</p>
    <p>My cat is <strong>very</strong> grumpy.</p>

    <script>
        d3.select("p")
          .style("color", "green");
    </script>

  </body>
</html>

 

TAG

*V4*

SESSION08

 

*V4*

<!doctype html>

<html>
  <head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
    <p id="Hello"> Madrid</p>
 
  
    <script>
        d3.select("#Hello")
          .style("color", "green");
    </script>

  </body>
</html>

 

ID

SESSION08

 

SVG

SESSION08

 

 

RECT

<!DOCTYPE html> 

<html>
    <head>
        <meta charset="utf-8"> <title>SVG Example</title>
    </head> 
    <body>
        <svg>
        <rect width="100" height="100"></rect>
        </svg>
    </body> 
</html>

SESSION08

 

SESSION08

 

<script>

    var width = 500;
    var height = 500;

//Create SVG element
  
   var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

//Create and append rectangle element
    
  svg.append("rect")
            .attr("x", 0)
            .attr("y", 0)
            .attr("width", 200)
            .attr("height", 100)

</script>  

 

RECT

*V4*

SESSION08

 

 

LINE

*V4*

<script>
    var width = 500;
    var height = 500;

  //Create SVG element
  
   var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

  //Create and append line
  
    svg.append("line")
            .attr("x1", 100)
            .attr("x2", 500)
            .attr("y1", 50)
            .attr("y2", 250)
            .attr("stroke", "black")
</script> 

SESSION08

 

 

CIRCLE

*V4*

<script>
    var width = 500;
    var height = 500;

    //Create SVG element
    var svg = d3.select("body")
                .append("svg")
                .attr("width", width)
                .attr("height", height);

    //Append circle 
    svg.append("circle")
       .attr("cx", 250)
       .attr("cy", 50)
       .attr("r", 50)
</script>

SESSION08

 

CSS

SESSION08

 

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
   
    <style>

      text {
        font-size: 2em;
      }

    </style>
  </head>
  <body>

    <svg width="300" height="250">
      <text x="50" y="50">Hello SVG Text!</text>
    </svg>

  </body>
</html>

SESSION08

 


<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            strong {
                background-color: red;
                font-size: 300%;
            }
        </style>
    </head>

    <body>
        Hi <strong> how are you today? </strong>
    </body>
</html>

 

TAG

SESSION08

 

 

CLASS


<!DOCTYPE html>
<html lang="en">
    <head>
       <style>
        .important {
            font-weight: bold;
        }

        .footnote {
            font-size: 75%;
        }
    </style>
    </head>
<body>

<div class="important">Some text</div>
<div class="footnote">Some other text</div>
<div class="important footnote">And this is an important footnote!</div>

</body>

SESSION08

 

SESSION08

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS Example</title>
    <link href="https://fonts.googleapis.com/css?family=Raleway+Dots" rel="stylesheet">

    <style>
      .my-text {
        font-size: 3em;
        font-family: 'Raleway Dots', cursive;
        fill:#40E0D0;
      }
      body {
        background-color:black;
      }
    </style>

 </head>
  <body>
    <svg width="1200" height="600">
      <text class="my-text" x="0" y="100">What is a visual encoding again?</text>
    </svg>
  </body>
</html>

 

FONTS

SESSION08

 

JAVASCRIPT

SESSION08

 

VARIABLES

SESSION08

 

var number = 5;
var value = 12.3467; 
var active = true;
var text = "Crystal clear" 

console.log(number);

SESSION08

 

SESSION08

 

ARRAYS

SESSION08

 

var numbers = [ 5, 10, 15, 20, 25 ];

console.log(numbers [2]) 

SESSION08

 

SESSION08

 

OBJECTS

SESSION08

 

 var fruta = [
    {tipo:"uva", color:"rojo", cantidad:12, dulce:true}
  ];

console.log(fruta);

SESSION08

 

FUNCTIONS

SESSION08

 

function square (x) {return x * x;}

console.log(square(5));

SESSION08


INTERACT D3.JS

PART 02

SESSION09

 

SETUP

SESSION09

 

<script src="//d3js.org/d3.v3.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

 

ONLINE

SESSION09

 

MARGINCONVENTION

SESSION09

 

SESSION09

 

 

01 DEFINE THE MARGIN OBJECT

02 WIDTH AND HEIGHT

03 SVG CONTAINER AS GROUP ELEMENTS BASED ON THE MARGINS  

 

MARGINCONVENTION

SESSION09

 

SESSION09

 

SELECTIONS

SESSION09

 

SESSION09

 

DATABINDING

SESSION09

 

SESSION09

 

DATALOADING

SESSION09

 

 d3.csv("url", function(data) {console.log(data);});
         

SESSION09

 

SESSION09

 

D3.CSV

D3.TSV

D3.JSON

D3.XML

SESSION09

 

SESSION09

 

DATA SCALING

SESSION09

 

var newRamp = d3.scale.linear().domain([500000,13000000]).range([0, 500]);

SESSION09

 

SESSION09

 

D3.MIN

D3.MAX

D3.EXTENT

 

SESSION09

 

SESSION09

 

var newRamp = d3.scale.linear().domain([500000,13000000]).range(["blue","red"]);

SESSION09

 

var sampleArray = [423,124,66,424,58,10,900,44,1];
var qScale = d3.scale.quantile().domain(sampleArray).range([0,1,2]);

SESSION09

 

AXIS

SESSION09

 

//Creation
var x_axis = d3.axisBottom()
               .scale(scale);

//Calling
svg.append("g")
    .call(x_axis);

SESSION09

 

SESSION09

 

SESSION09

 

BARCHART

SESSION09

 

SESSION09

 

SESSION09

 

SESSION09

 

SESSION09

 

SESSION09

 

SCATTERPLOTS

SESSION09

 

SESSION09

 

INTERACT D3.JS

PART 03

SESSION10

 

GENERATORS

SESSION10

 

D3.LINE

D3.AREA

D3.ARC

D3.STACK

D3.PIE

 

 

SESSION10

 

SESSION10

 

SESSION10

 

SESSION10

 

D3.NEST

 

 

 

SESSION10

 

SESSION10

 

SESSION10

 

SMALL MULTIPLE

SESSION10

 

SESSION10

 

SESSION10

 

INTERACTIVITY

SESSION10

 

SESSION10

 

SESSION10

 

TRANSITION

SESSION10

 

.transition() 
.delay
.duration()

SESSION10

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
 
  <script>
    
  d3.select("body")
    .transition()
    .duration(2000)
    .delay(1000)
    .style("background-color", "red");
  
  </script>
  
</body>
</html>

 

BODY

SESSION10

 

SESSION10

 

<script>

//First transition by clicking on the button with the id #start
   d3.select("#start")
      .on("click", function() {rect
      .transition()
      .attr("fill", "red")
      .attr("opacity", "0.5")
	});
//Second transition by clicking on the button with the id #reset
    d3.select("#reset")
      .on("click", function() {rect
      .transition()
      .attr("fill", "black")
      .attr("opacity", "1")
	});

</script>  

 

BY CLICK

SESSION10

 

SESSION10

 

SESSION10

 

SESSION10

 

SESSION10

 

SESSION10

 

SESSION10

 

.ease()

SESSION10

 

SESSION10

 

	d3.select("#start").on("click", function() {
		rectangle
			.transition()
			.attr("x", 250) // New Position
			.ease("bounce"); // Use the Bounce Transition Ease
	});

	d3.select("#reset").on("click", function() {
		rectangle
			.transition()
			.attr("x", 50) // New Position
			.ease("bounce"); // Use the Bounce Transition Ease

 

EASE BOUNCE

SESSION10

 

SESSION10

 

SESSION10

 

SETUP OFFLINE

SESSION10

 

LOCALHOST

$ python -m SimpleHTTPServer

SESSION10

 

 

WORKING OFFLINE

 

01 DOWNLOAD THE LIBARY/IES

02 MOVE THE LIBARY INTO YOUR WORKING FOLDER

03 CONNECT TO A LOCALHOST

 

SESSION10

 

COMPLEX VIZ

SESSION10

 

HEXAGONAL

BINNING

 

 

 

SESSION10

 

"It visually clusters

the most populated areas

on a scatterplot

by using a continuous color code."

 

 

 

 

SESSION10

 

SESSION10

 

SESSION10

 

SESSION10

 

SESSION10

 

BEESWARM

 

 

 

SESSION10

 

"It distributes elements horizontally

avoiding overlap between them

and according to a selected dimension."

 

 

 

SESSION10

 

SESSION10

 

SESSION10

 

SESSION10

 

SESSION10

 

HORIZONGRAPH

 

 

 

SESSION10

 

"It combines position and color to reduce vertical space."

 

 

 

SESSION10

 

SESSION10

 

SESSION10

 

INSPIRATION

SESSION10

 

SESSION10

 

VIZSTORYTELLING

 

 

SESSION11

 

 

TELL ME SOMETHING,

SOMETHING NEW,

SOMETHING INTERESTING

BUT DO IT FAST,

I DON'T HAVE TIME.

SESSION11

 

 

WELL,

JUST LOOK AT THE DATA,

CAN'T YOU SEE IT?

THE STORY IN THE DATA.

SESSION11

 

SESSION11

 

SESSION11

 

SESSION11

 

OBJECTIVES

SESSION11

 

SESSION11

 

SESSION11

 

SESSION11

 

SESSION11

 

Sorry, but I don't understand you 

SESSION11

 

Sorry, but I don't understand you 

Yup, same here. 

SESSION11

 

Sorry, but I don't understand you 

Yup, same here. 

 

DATA

SESSION11

 

Sorry, but I don't understand you 

Yup, same here. 

 

DATA

SESSION11

 

Sorry, but I don't understand you 

Yup, same here. 

 

DATA

 

DECISION

SESSION11

 

Sorry, but I don't understand you 

Yup, same here. 

 

DATA

 

DECISION

 

VISUAL

STORYTELLING

SESSION11

 

AUDIENCE

SESSION11

 

SESSION11

 

Let's investigate

What do I need to know... 

SESSION11

 

CREATION

SESSION11

 

 

CONTEXT

 

SESSION11

 

 

THE STORY STARTS

 

SESSION11

 

 

CREATE TENSION

 

SESSION11

 

 

RESOLUTION

 

SESSION11

 

LANGUAGE

SESSION11

 

COLORS AS ACTORS

SESSION11

 

ICONS FOR EVENTS

SESSION11

 

PATTERNS AS STORIES

SESSION11

 

PATTERNS AS STORIES

SESSION11

 

PATTERNS AS STORIES

SESSION11

 

CONCEPTS

SESSION11

 

AUTHOR DRIVEN

VIEWER DRIVEN

SESSION11

 

SESSION11

 

SESSION11

 

SESSION11

 

SESSION11

 

SESSION11

 

SESSION11

 

SESSION11