DATAVIZ

    Sandra Becker MAD 01/2019

SESSION01

 

INTRO DATAVIZ

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

 

SESSION01

 

SMALL MULTIPLES

 

BIG

DATAVIZ

 

SESSION01

 

REALTIME

DATAVIZ

 

SESSION01

 

DYNAMIC

DATAVIZ

 

SESSION01

 

SMART

DATAVIZ

 

SESSION01

 

ALGO

DATAVIZ

 

SESSION01

 

ART

DATAVIZ

 

SESSION01

 

STORY

DATAVIZ

 

SESSION01

 

SESSION02

 

DATAVIZ PRACTICE

HOW TO CREATE A DATAVIZ?

SESSION02

 

#1 DEFINE OBJECTIVE

SESSION02

 

#2 EXPLORE DATA

SESSION02

 

#3 DESIGN IDEA

SESSION02

 

VIZ TYPES

SESSION02

 

THE RIGHT VIZ TYPE ...

SESSION02

 

VIZ ENCODING

SESSION02

 

#4 TOOL IMPLEMENTATION

SESSION02

 

SESSION02

 

 

 

SESSION02

 

SESSION02

 

 

 

CryptoSandra

SESSION02

 

#5 RESULT REVIEW

SESSION02

 

U X

SESSION02

 

HUMAN PERCEPTION

SESSION02

 

GOOD VIZ

SESSION02

 

SESSION02

 

BAD VIZ

SESSION02

 

WTFVIZ

SESSION02

 

VISUAL COMPLEXITY

SESSION02

 

SESSION02

 

"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

NR. VISUAL ENCODINGS

SESSION02

 

SESSION02

 

LEVEL OF INNOVATION

SESSION02

 

SESSION02

 

SESSION02

 

SESSION03

 

EXPLORE GGPLOT2

SESSION03

 

WHAT IS GGPLOT2?

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

Hadley Wickman

SESSION03

 

SESSION03

 

SESSION03

 

HOW TO LEARN GGPLOT2?

 

SEARCH

 

TRY OUT

SESSION03

 

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

EDWARD R. TUFTE

SESSION03

 

SESSION03

 

BASIC CHARTS

SESSION03

 

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

 

NO PIE, BUT A WAFFLE

SESSION03

 

SESSION03

 

SESSION03

 

LET'S ADD A DUMBBELL

SESSION03

 

SESSION04

 

PERCEPTION DESIGN

ANSCOBE'S QUARTET

SESSION04

 

SESSION04

 

SESSION04

 

SEEING=UNDERSTANDING

SESSION04

 

SESSION04

 

WEBER'S LAW

SESSION04

 

SESSION04

 

SESSION04

 

SESSION04

 

SESSION04

 

SESSION04

 

SESSION04

 

PRESENTING TRUTH

SESSION04

 

SESSION04

 

SESSION04

 

SESSION04

 

SESSION04

 

SESSION04

 

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

SESSION04

 

SESSION04

 

SESSION04

 

COLOR

SESSION04

 

SESSION04

 

danger

passion

blood

love

agressive

SESSION04

 

SESSION04

 

environment

nature

permission

SESSION04

 

SESSION04

 

sun

happiness

playful

SESSION04

 

SESSION04

 

water

cool

quietness

hope

SESSION04

 

SESSION04

 

death

luxury

sophistication

 

SESSION04

 

SESSION04

 

SESSION04

 

wedding

pure

innocent

 

SESSION04

 

SESSION04

 

SESSION04

 

SESSION04

 

SESSION04

 

POSITION

SESSION04

 

SESSION04

 

SESSION04

 

SESSION04

 

REDUNDANT

CryptoSandra

SESSION04

 

CryptoSandra

SESSION04

 

SESSION04

 

INTERACTIVITY

SESSION04

 

NAVEGATE

IDENTIFY

COMPARE

REDUCE

SESSION04

 

SESSION04

 

SESSION04

 

SESSION04

 

SESSION04

 

SESSION04

 

SESSION05

 

INTERACT D3.JS

PART 01

SESSION05

 

WHAT IS D3.JS?

SESSION05

 

"EFFICIENT MANIPULATION OF DOCUMENTS BASED ON DATA."

MIKE BOSTOCK

SESSION05

 

 

CHARTING TOOL  

OPEN SOURCE

COMMUNITY DEVELOPMENT

VISUAL PHILOSOPHY

BRILLIANT IDEA

 

SESSION05

 

+

=

SESSION05

 

SESSION05

 

&

D3.V5

 

&

D3.V4

 

 

D3.V3

 

SESSION05

 

HOW TO LEARN D3.JS?

 

EXAMPLES

 

TUTORIALS

SESSION05

 

SESSION05

 

SESSION05

 

HTML

<!-- -->

CSS

/**/

SCRIPT

// or /**/

YOU HAVE TO SAY SOMETHING

SESSION05

 

SESSION05

 

SESSION05

 

SESSION05

 

WEBSTANDARDS

SESSION05

 

HTML

SESSION05

 

SESSION05

 

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

SESSION05

 

DOM

SESSION05

 

D3select
D3selectAll

SESSION05

 

<!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*

SESSION05

 

*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

SESSION05

 

SVG

SESSION05

 

 

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>

SESSION05

 

SESSION05

 

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

SESSION05

 

 

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> 

SESSION05

 

 

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>

SESSION05

 

CSS

SESSION05

 

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

SESSION05

 


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

SESSION05

 

 

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>

SESSION05

 

SESSION05

 

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

SESSION05

 

JAVASCRIPT

SESSION05

 

VARIABLES

SESSION05

 

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

console.log(number);

SESSION05

 

SESSION05

 

ARRAYS

SESSION05

 

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

console.log(numbers [2]) 

SESSION05

 

SESSION05

 

OBJECTS

SESSION05

 

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

console.log(fruta);

SESSION05

 

FUNCTIONS

SESSION05

 

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

console.log(square(5));

SESSION06

 

INTERACT D3.JS

PART 02

SETUP

SESSION06

 

SESSION06

 

<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

SELECTIONS

SESSION06

 

SESSION06

 

#1 EXAMPLE

 

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>

<style>

  rect
     {fill: #40E0D0}

</style>
  
<body>
  <script>
      
   var svg= d3.select("body").append("svg")
              .attr("width",  250)
              .attr("height", 250);

   var rect = svg.append("rect")
                 .attr("x", 50)
                 .attr("y", 50)
                 .attr("width", 80)
                 .attr("height", 80);

  </script>
</body>
</html>
<style>
	rect{fill: #FCE33E}
  circle{fill: #A6C9B1}
  body {background-color: #E0DDDA }
	text {
    font-size:70px; 
    font-family: "Trebuchet MS", Verdana, sans-serif;
    letter-spacing: 20px;
    text-transform: capitalize;
    font-weight: bold;}
</style>
 <body>
    <script>
      
      var svg= d3.select("body").append("svg")
           .attr("width",  1000)
           .attr("height", 1000);

      var rect = svg.append("rect")
           .attr("x", 50)
           .attr("y", 50)
           .attr("width", 250)
           .attr("height", 250);
      
      var circle = svg.append("circle")
           .attr("cx", 250)
           .attr("cy", 250)
           .attr("r", 120);
      
     var line = svg.append("line")
            .attr("x1", 20)
            .attr("x2", 220)
            .attr("y1", 150)
            .attr("y2", 450)
            .attr("stroke", "#81D4DC")
     				.attr("stroke-width", 50)
     
      var text = svg.append("text")
            .attr("x", 10)
            .attr("y", 100)
      			.text("Liebe ist alles")
            .attr("fill", "#33312F")
     			
       
    </script>
 </body>

SESSION06

 

SESSION06

 

d3.select('circle')
	.style('fill', 'BLUE')

d3.selectAll('circle')
	.attr('r', 20);

d3.select('circle:nth-child(3)')
	.classed('selected', true);

d3.select('.title')
	.text('SOME SELECTIONS')


SESSION06

 

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>

<style>
  body {
      font-family: "Helvetica Neue", Helvetica, sans-serif;
      font-size: 14px;
      color: white;
      background-color:black;
        }

  circle {
      fill: #ddd;
      cursor: pointer;
        }
</style>

<body>
  <svg width="760" height="140">
    <g transform="translate(70, 70)">
      <circle r="40" />
      <circle r="40" cx="120" />
      <circle r="40" cx="240" />
      <circle r="40" cx="360" />
      <circle r="40" cx="480" />
    </g>
  </svg>
  <div class="status">Click on a circle</div>

  <script>
      d3.selectAll('circle')
        .on('click', function(d, i) 
           {
            d3.select(this)
              .style('fill', '#40E0D0');
           });
  </script>

</body>
</html>



DATABINDING

SESSION06

 

SESSION06

 

var myData = ["Hello World!"];
     
var p = d3.select("body")
          .selectAll("p")
          .data(myData)
          .text(function (d) {return d;});


SESSION06

 

#2 EXAMPLE

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  </head>
  
  <style>
	rect{fill: #40E0D0}
  </style>
  
  <body>
    <script> 
    
      var a_name = [1, 2, 3, 4, 5];
     
      var svg = d3.select("body").append("svg")
        .attr("width",  800)
        .attr("height", 800);
      
      svg.selectAll("rect") 
         .data(a_name) 
         .enter().append("rect")
         .attr("x", function(a_name){return a_name*100;}) 
         .attr("y", 50) 
         .attr("width",  80) 
         .attr("height", 80);

    </script>
  </body>
</html>

DATALOADING

SESSION06

 

SESSION06

 

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

SESSION06

 

D3.CSV

D3.TSV

D3.JSON

D3.XML

SESSION06

 

SESSION06

 

 

EXAMPLE

SCATTER PLOT

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  </head>
  
  <body>

    <script>

      var svg = d3.select("body").append("svg")
        .attr("width",  250)
        .attr("height", 250);

      function Hello (data1)
      
      {var circles = svg.selectAll("circle").data(data1);
        
        circles.enter()
          .append("circle")
          .attr("r", 10)
          .attr("cx", function (data3){ return data3.x; })
          .attr("cy", function (data3){ return data3.y; });}
      
      
      d3.csv("https://gist.githubusercontent.com/sandravizmad/7287d19eee4e427d988282dbcf81faaa/raw/1150864a4881223226559f6dae83155b0d3a0d05/test", 
      function (data2){Hello(data2);});

    </script>

  </body>
</html>

DATA SCALING

SESSION06

 

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

SESSION06

 

SESSION06

 

SESSION06

 

#3 EXAMPLE

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  </head>
  
  <style>
	rect{fill: #40E0D0}
  </style>
  
  <body>
    <script> 
    
      var a_name = [1, 2, 3, 4, 5];
      
      var scale = d3.scale.linear()
        .domain([1, 5])   
        .range([0, 400]); 
     
      var svg = d3.select("body").append("svg")
        .attr("width",  800)
        .attr("height", 800);
      
      svg.selectAll("rect") 
         .data(a_name) 
         .enter().append("rect")
         .attr("x", function(a_name){return scale(a_name);}) 
         .attr("y", 50) 
         .attr("width",  80) 
         .attr("height", 80);

    </script>
  </body>
</html>
 var scale = d3.scale.linear()
        .domain([d3.min(a_name), d3.max(a_name)])
        .range([0, 400]); 

SESSION06

 

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

SESSION06

 

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

SESSION06

 

AXIS

SESSION06

 

SESSION06

 

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

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

SESSION06

 

SESSION06

 

BARCHART

SESSION06

 

SESSION06

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  </head>
  
  <style>
	rect{fill: #40E0D0}
  </style>
  
  <body>
    <script> 
      
      var a_name = [1, 2, 3, 4, 5];
      
      var scale = d3.scale.linear()
        .domain([1, 5])   
        .range([1, 10]); 
     
      var svg = d3.select("body").append("svg")
        .attr("width",  2000)
        .attr("height", 2000);
    
      //Binding
      var rects = svg.selectAll("rect").data(a_name);
      
      //Enter
          rects
            .enter().append("rect")
            .attr("width", 50);
            
      //Update		
      	  rects
           .attr("height", function(a_name){return scale(a_name)*30;})
           .attr("y", function(a_name) {return (400 - scale(a_name)*30) ;})
           .attr("x", function(a_name, i) {return i *60;});
      //Exit	
       	 rects
           .exit().remove();
      
    </script>
  </body>
</html>

#4 EXAMPLE

 

SESSION06

 

SESSION06

 

SESSION07

 

INTERACT D3.JS

PART 03

SESSION07

 

MARGINCONVENTION

SESSION07

 

var margin = {top: 50, right: 20, bottom: 50, left: 20},
    padding = {top: 100, right: 60, bottom: 100, left: 60},
    outerWidth = 600,
    outerHeight = 600,
    innerWidth = outerWidth - margin.left - margin.right,
    innerHeight = outerHeight - margin.top - margin.bottom,
    width = innerWidth - padding.left - padding.right,
    height = innerHeight - padding.top - padding.bottom;

var x = d3.scale.linear()
   	  .domain([0, width])
          .rangeRound([0, width]);

var y = d3.scale.linear()
    	  .domain([0, height])
	  .rangeRound([height, 0]);

SESSION07

 

 

01 DEFINE THE MARGIN OBJECT

02 WIDTH AND HEIGHT

03 SVG CONTAINER AS GROUP ELEMENTS BASED ON THE MARGINS  

 

MARGINCONVENTION

SESSION07

 

SESSION07

 

TRANSITION

SESSION07

 

.transition() 
.delay
.duration()

SESSION07

 

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

SESSION07

 

<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

SESSION07

 

<script>

//On click, update with new data			
    d3.select("p")
      .on("click", function() {

//New values for dataset
dataset = [ 11, 12, 15, 20, 18, 17, 16, 18, 23, 25,
	    5, 10, 13, 19, 21, 25, 22, 18, 15, 13 ];

//Update all rects
  svg.selectAll("rect")
     .data(dataset)
     .attr("y", function(d) {
	return h - yScale(d);
		})
     .attr("height", function(d) {
	return yScale(d);
		});				
	   });

</script>

 

BAR CHART: UPDATE DATASET

SESSION07

 

<script>

//On click, update with new data			
  d3.select("p")
    .on("click", function() {

//New values for dataset
 dataset = [ 11, 12, 15, 20, 18, 17, 16, 18, 23, 25,
	     5, 10, 13, 19, 21, 25, 22, 18, 15, 13 ];

//Update all rects
svg.selectAll("rect")
   .data(dataset)
   .transition() // <-- This makes it a smooth transition!
   .attr("y", function(d) {
	return h - yScale(d);
		          })
   .attr("height", function(d) {
	return yScale(d);
		          })
   .attr("fill", function(d) {
	return "rgb(0, 0, " + Math.round(d * 10) + ")";
			  });

</script>

 

BAR CHART: UPDATE DATASET II

SESSION07

 

SESSION07

 

SESSION07

 

SESSION07

 

.ease()

SESSION07

 

SESSION07

 

	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

SESSION07

 

 

ANIMATED

LINE CHARTS

SESSION07

 

SESSION07

 

SETUP OFFLINE

SESSION07

 

LOCALHOST

$ python -m SimpleHTTPServer

SESSION07

 

 

WORKING OFFLINE

 

01 DOWNLOAD THE LIBARY/IES

02 MOVE THE LIBARY INTO YOUR WORKING FOLDER

03 CONNECT TO A LOCALHOST

 

SESSION07

 

COMPLEX VIZ

SESSION07

 

HEXAGONAL

BINNING

 

 

 

SESSION07

 

"It visually clusters

the most populated areas

on a scatterplot

by using a continuous color code."

 

 

 

 

SESSION07

 

SESSION07

 

SESSION07

 

SESSION07

 

SESSION07

 

BEESWARM

 

 

 

SESSION07

 

"It distributes elements horizontally

avoiding overlap between them

and according to a selected dimension."

 

 

 

SESSION07

 

SESSION07

 

SESSION07

 

SESSION07

 

SESSION07

 

SESSION07

 

SESSION07

 

HORIZONGRAPH

 

 

 

SESSION07

 

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

 

 

 

SESSION07

 

SESSION07

 

SESSION07

 

SESSION07

 

SESSION07

 

SESSION07

 

INSPIRATION

SESSION07

 

SESSION08

 

LOCATION INTELLIGENCE

PART 01

SESSION08

 

VISUALIZE ANALYSE VISUALIZE ANALYSE VISUALIZE ANALYSE VISUALIZE

VISUALIZE ANALYSE VISUALIZE ANALYSE VISUALIZE

VISUALIZE ANALYSE VISUALIZE ANALYSE 

VISUALIZE ANALYSE VISUALIZE

VISUALIZE ANALYSE 

VISUALIZE

STOP!

 

 

SESSION08

 

HOW TO DEAL WITH BIG DATASETS?

SESSION08

 

AGGREGATE HEXAGONAL BINNING & CLUSTERING

FILTER EXTREM & TARGET GROUPS

STYLE SIZE & OPACITY

 

 

01 CUSTOMER RISK IDENTIFICATION

SESSION08

 

01 CUSTOMER CONCENTRATION HEATMAP

SESSION08

 

SESSION08

 

02 EXTREM GROUP    FILTER

SESSION08

 

SESSION08

 

SESSION08

 

03 SPEND SEGMENTS 

CLUSTERS

SESSION08

 

SESSION08

 

SESSION08

 

SESSION08

 

04 TARGET GROUP

STYLING

SESSION08

 

SESSION08

 

SESSION08

 

ALL IN 1 MAP

SESSION08

 

SESSION08

 

SESSION09

 

LOCATION INTELLIGENCE

PART 02

HOW TO GAIN INSIGHTS?

SESSION09

 

01 CONNECT NEW DATASETS

02 SHOW UNCERTAINTY

03 USE DYNAMIC SAMPLING

 

SESSION09

 

01 SHOP AREA PERFORMANCE

SESSION09

 

01 TARGET GROUP

STYLE BY VALUE & ICON

SESSION09

 

SESSION09

 

SESSION09

 

02 AREA OF INFLUENCE

CREATE TRAVEL BUFFERS

SESSION09

 

SESSION09

 

03 INTERSECTION - CUSTOMER

INTERSECT WITH THE SECOND LAYER & AGGREGATE & STYLE BY VALUE

SESSION09

 

SESSION09

 

SESSION09

 

04 INTERSECTION - SHOPS

INTERSECT WITH THE SECOND LAYER & ADAPT COLOR CODE

SESSION09

 

SESSION09

 

SESSION09

 

05 ALL CUSTOMERS DISTRIBUTION

ADD ANOTHER LAYER

SESSION09

 

SESSION09

 

05 ADD SHOP FILTER

ADD A WIDGET

SESSION09

 

SESSION09

 

ALL IN 1 MAP

SESSION09

 

SESSION09

 

02 SPENDING SEGMENTS & OUTLIERS

SESSION09

 

01 SPATIAL SPENDING CORRELATION

ANALYSIS DETECT OUTLIERS & CLUSTERS

SESSION09

 

SESSION09

 

02 SHOW SEGMENTS - COLOR CODE

STYLE BY VALUE

SESSION09

 

SESSION09

 

SESSION09

 

03 SPENDING - SIZE CODE

STYLE BY VALUE

SESSION09

 

SESSION09

 

04 CERTAINTY - OPACITY CODE

CARTOCSS FILTER

SESSION09

 

SESSION09

 

05 ADD EXPLANATION

HTML ADD A LEGEND

SESSION09

 

SESSION09

 

06 ADD SEGMENT FILTER

ADD A WIDGET

SESSION09

 

SESSION09

 

ALL IN 1 MAP

SESSION09

 

SESSION09

 

03 CRIME ANALYSIS OVER TIME

SESSION09

 

01 CREATE CONTEXT

CREAT POLYGONS FROM POINTS & AGGREGATE & STYLE BY VALUE

SESSION09

 

SESSION09

 

SESSION09

 

02 REDUCE DATA

ADD A NEW LAYER & SUB-SAMPLE

SESSION09

 

SESSION09

 

03 TIME ANALYSIS

CREAT A TORQUE MAP & STYLE BY VALUE

SESSION09

 

SESSION09

 

04 DYNAMIC SAMPLING

COMPARE DIFFERENT SAMPLES

SESSION09

 

SESSION09

 

SESSION09

 

SESSION09

 

05 ADD CONTEXT

UNHIDE THE DISTRICT LAYER

SESSION09

 

SESSION09

 

ALL IN 1 MAP

SESSION09

 

SESSION09

 

VIZSTORYTELLING

 

 

SESSION10

 

 

TELL ME SOMETHING,

SOMETHING NEW,

SOMETHING INTERESTING

BUT DO IT FAST,

I DON'T HAVE TIME.

SESSION10

 

 

WELL,

JUST LOOK AT THE DATA,

CAN'T YOU SEE IT?

THE STORY IN THE DATA.

SESSION10

 

SESSION10

 

SESSION10

 

SESSION10

 

OBJECTIVES

SESSION10

 

SESSION10

 

SESSION10

 

SESSION10

 

SESSION10

 

Sorry, but I don't understand you 

SESSION10

 

Sorry, but I don't understand you 

Yup, same here. 

SESSION10

 

Sorry, but I don't understand you 

Yup, same here. 

 

DATA

SESSION10

 

Sorry, but I don't understand you 

Yup, same here. 

 

DATA

SESSION10

 

Sorry, but I don't understand you 

Yup, same here. 

 

DATA

 

DECISION

SESSION10

 

Sorry, but I don't understand you 

Yup, same here. 

 

DATA

 

DECISION

 

VISUAL

STORYTELLING

SESSION10

 

AUDIENCE

SESSION10

 

SESSION10

 

Let's investigate

What do I need to know... 

SESSION10

 

CREATION

SESSION10

 

 

CONTEXT

 

SESSION10

 

 

THE STORY STARTS

 

SESSION10

 

 

CREATE TENSION

 

SESSION10

 

 

RESOLUTION

 

SESSION10

 

LANGUAGE

SESSION10

 

COLORS AS ACTORS

SESSION10

 

ICONS FOR EVENTS

SESSION10

 

PATTERNS AS STORIES

SESSION10

 

PATTERNS AS STORIES

SESSION10

 

PATTERNS AS STORIES

SESSION10

 

CONCEPTS

SESSION10

 

AUTHOR DRIVEN

VIEWER DRIVEN

SESSION10

 

SESSION10

 

SESSION10

 

SESSION10

 

SESSION10

 

SESSION10

 

SESSION10

 

SESSION10

 

SESSION10

 

SESSION10

 

SESSION10

 

SESSION10

 

SESSION10

 

SESSION10

 

SESSION10

 

PERSONALISATION

SESSION10

 

SESSION10

 

SESSION10

 

BEAUTY

SESSION10

 

SESSION10

 

EMOTION

SESSION10

 

SESSION10

 

NEW MEDIA

SESSION10

 

SESSION10

 

SESSION10

 

INSPIRATION

SESSION10

 

SESSION10

 

SESSION10

 

NETWORKVIZ

 

 

SESSION11

 

SESSION11

 

SESSION11

 

PROJECTS

 

SESSION11

 

SESSION11

 

SESSION11

 

SESSION11

 

SESSION11

 

CREATION

SESSION11

 

SESSION11

 

FORCE LAYOUT

SESSION11

 

SESSION11

 

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>

<style>
circle {
  fill: cadetblue;
}
</style>

<body>
  <div id="content">
  <svg width="600" height="600"></svg>
  </div>

<script>

var nodes = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]

var simulation = d3.forceSimulation(nodes)
                   .force('charge', d3.forceManyBody().strength(-30))
                   .force('center', d3.forceCenter(200, 200))
                   .on('tick', ticked);
  
console.log(nodes); 

function ticked() {
 
  var u = d3.select('svg')
            .selectAll('circle')
            .data(nodes)

      u.enter()
       .append('circle')
       .attr('r', 10)
       .merge(u)
       .attr('cx', function(d) {
      return d.x
    })
       .attr('cy', function(d) {
      return d.y
    })

      u.exit().remove()
}
  </script>
</body>
</html>

SESSION11

 

SESSION11

 

SESSION11

 

PLEASE DON'T FORGET

 

 

THEEND

 

THEEND

 

“Small, noncomparative, highly labeled data sets usually belong in tables.”

EDWARD TUFTE

PLEASE REMEMBER

 

 

THEEND

 

THEEND

 

“Graphical excellence is that which gives to the viewer the greatest number of ideas in the shortest time with the least ink in the smallest space.”

EDWARD TUFTE

 LAST BUT NOT LEAST

 

 

THEEND

 

THEEND

 

 

:)

“WHAT IS A VISUAL ENCODING AGAIN?”

THANK YOU

DATAVIZ IE 2019 01

By Sandra Becker

DATAVIZ IE 2019 01

  • 1,058
Loading comments...

More from Sandra Becker