DATA

 

SANDRA BECKER  |  MADRID  |   01/2020

 

VIZ

VIZ

INTRO

 

01

 

 

01

 

WHY DO WE NEED

DATAVIZ

 

B. SCHNEIDERMAN

 

01

 

THE PURPOSE OF DATA VISUALIZATION ARE INSIGHTS NOT PICTURES

 

H. ROSLING

 

01

 

LET MY DATASET CHANGE YOUR MINDSET

 

H. THOREAU

 

01

 

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

 

E. TUFTE

 

01

 

ABOVE ALL ELSE SHOW THE DATA

 

01

 

WHAT IS

DATAVIZ

 

01

 

 

01

 

OPPORTUNITIES

A WORLD OF

 

01

 

 

01

 

 

01

 

 

01

 

 

01

 

DATAVIZ

TODAY

 

01

 

BIG

 

VIZ

 

01

 

REALTIME

 

VIZ

 

01

 

DYNAMIC

 

VIZ

 

01

 

SMART

 

VIZ

 

01

 

ALGO

 

VIZ

 

01

 

ART

 

VIZ

 

01

 

STORY

 

VIZ

 

01

 

YOU ARE GOING TO

LEARN

CREATION

INTERPRETATION

EVALUATION

 

01

 

VIZ

DATA

EXPLORE

R

 

02

 

 

PART 01

 

 

02

 

WHAT IS

GGPLOT2

H. WICKMAN

 

02

 

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

 

02

 

 

02

 

HOW TO LEARN

GGPLOT2

 

TRY  OUT

 

02

 

 

SEARCH

 

E. TUFTE

 

02

 

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

 

02

 

LIBRARY

INSTALLATIONS

 

02

 

THEME

SELECTION

 

02

 

DEFAULT

PERSONALISED

 

02

 

 

02

 

EXPLORATIVE

ANALYSIS

 

02

 

FREQUENCY

PLOT

 

02

 

SHOWING DETAILS

ADDING A VISUAL ENCODING

 

02

 

 

02

 

ZOOMING

 

02

 

HISTOGRAM

PLOT

 

02

 

USING BARS INSTEAD OF LINES

 

02

 

 

02

 

ADDING A VISUAL ENCODING: COLOR

CONCEPT OF GRAMMAR OF GRAPHICS - OVERLAPPING

 

02

 

 

02

 

SMALL MULTIPLE - HISTOGRAM

 

02

 

USING COLOR CODE

 

02

 

PLOT

DENSITY

 

02

 

KERNEL DENSITY ESTIMATE

 

02

 

ADDING A VISUAL ENCODING: COLOR

 

02

 

USING TRANSPARENCY

 

02

 

SMALL MULTIPLE TO COMPARE FULL DISTRUBTIONS

 

02

 

USING COLOR CODE

 

02

 

CHANGING OVERLAP FACTOR

 

02

 

SCATTER

PLOT

 

02

 

DEFAULT

 

02

 

REDUCE SIZE

 

02

 

ADD TRANSPARENCY

 

02

 

SHOWING QUANTILE

 

02

 

SUB-SAMPLE

 

02

 

LOG - SCALING

 

02

 

ADDING A TREND

 

02

 

ADDING CONTEXT: SMALL MULTIPLE

 

02

 

MORE CONTEXT

 

02

 

HEXAGONAL

BINNING

 

02

 

 

02

 

AGGREGATION ENCODED IN COLOR

 

02

 

LOG SCALE

 

02

 

DENSITY: 2D

 

02

 

SCALE

AXIS

 

02

 

DEFAULT

 

02

 

LOG SCALE

 

02

 

LINEAR TRANSFORMATION

 

02

 

DEFINING BREAKS

 

02

 

ADD LABLES

 

02

 

ADD SIZE SCALE

 

02

 

ADD A COLOR SCALE

 

02

 

SMALL MULTIPLE TO DECLUTTER

 

02

 

FLIP AXIS

 

02

 

FLIP SCALES

 

PART 02

 

R

EXPLORE

 

03

 

R

TUFTE IN

 

03

 

REDUCE CHARTJUNK

 

03

 

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

TUFTE THEME

 

03

 

 

03

 

BOXPLOT

TUFTE

 

03

 

TUFTE BOXPLOT

 

03

 

DIMENSIONS

ADDING

 

03

 

 

03

 

DOT DASH SCATTER PLOT

 

03

 

MARGINAL BOX-PLOT SCATTER PLOT

 

03

 

 

03

 

MARGINAL HISTOGRAM SCATTER PLOT

 

03

 

MARGINAL DENSITY SCATTER PLOT

ANALYSIS

TIME SERIES

 

03

 

LINE CHART - FILLED OR DOTTED

 

03

 

ADDING COLOR AS VISUAL ENCODING

 

03

 

SMALL MULTIPLE TO DECLUTTER

 

03

 

ADDING A REFERENCE LINE

 

03

 

ADDING A TREND ESTIMATION

 

03

 

FLOW

ANALYSIS

 

03

 

LIFE EXPECTANCY - ALL COUNTIRES

 

03

 

COLOR FOR ENCODING THE CONTINENT

 

03

 

SMALL MULTIPLE TO DECLUTTER

 

03

 

ADDING A TREND ESTIMATION

 

03

 

MORE CONTEXT - ADDING ALL DATA IN THE BACKGROUND

 

03

 

FOCUSING ON EUROPE

 

03

 

ADDING THE CONTEXT AGAIN

 

03

 

SMALL MULTIPLE - ZOOM IN COUNTRIES

 

03

 

VIZ

ADVANCED

 

03

 

 

03

 

PARALLEL

COORDINATES

 

03

 

DEFAULT

 

03

 

ENCODING COLOR

 

03

 

ADDING DOTS

 

03

 

 

03

 

ADDING BOX-PLOT

 

03

 

DEFAULT

 

03

 

ENCODING COLOR

 

03

 

SMALL MULTIPLE TO DECLUTTER

 

03

 

SCALE SO THE MIN OF THE VARIABLE IS 0 AND THE MAX IS 1

 

03

 

DUMBBELL

LET'S ADD A

DEFAULT

 

03

 

ADDING COLOR CODE

 

03

 

SNALL MULTIPLE TO DECLUTTER

 

03

 

ZOOMING IN EUROPE

 

03

 

USING REFERENCE LINES

 

03

 

 

03

 

WAFFLE

NO PIE BUT A

 

03

 

 

03

 

DEFAULT

 

03

 

SMALL MULTIPLE

 

03

 

MARKDOWN

& SAVE EVERYTHING

 

03

 

RESUME OF THE EXPLORATION

 

03

 

 

03

 

INSPIRATION

 

03

 

DESIGN

VISUAL

 

04

 

HOW TO CREATE

DATAVIZ

 

04

 

DEFINE

OBJECTIVES

DATA

IDEA

RESULT

 

04

 

TOOL

EXPLORE

DESIGN

CREATE

REVIEW

TYPE

VIZUALISATION

 

04

 

 

04

 

 

04

 

1 DATASET 25 WAYS OF VISUALIZING

 

04

 

ENCODING

VISUAL

 

04

 

 

04

 

ENCODING

COLOR

 

04

 

 

04

 

 

04

 

DANGER | PASSION | BLOOD | LOVE | AGGRESSION

 

04

 

 

04

 

 

04

 

ENVIRONMENT | NATURE | PERMISSION

 

04

 

 

04

 

SUN | HAPPINESS | PLAYFUL

 

04

 

 

04

 

WATER | COOL | QUIETNESS | HOPE

 

04

 

 

04

 

DEATH | LUXURY | SOPHISTICATION

 

04

 

 

04

 

WEDDING | PURE | INNOCENT

 

04

 

 

04

 

 

04

 

 

04

 

 

04

 

 

04

 

ENCODING

POSITION

 

04

 

 

04

 

 

04

 

 

04

 

ENCODING

REDUNDANT

 

04

 

 

04

 

 

04

 

GOOD & BAD

VIZ

 

04

 

 

04

 

WTF

VIZ

 

04

 

VISUAL

COMPLEXITY

 

04

 

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

 

 

04

 

 

E. TUFTE

 

04

 

NUMBER OF VISUAL ENCODINGS

 

04

 

LEVEL OF INNOVATION

LEVEL OF INNOVATION

 

04

 

REVIEW

AUDIENCE

 

04

 

 

04

 

PERCEPTION

HUMAN

 

04

 

SEEING = UNDERSTNADING

 

04

 

ANSCOMBES QUATRET

 

04

 

ANSCOMBES QUATRET

WEBER'S LAW

 

04

 

 

04

 

WEBER'S LAW

 

04

 

WEBER'S LAW

 

04

 

WEBER'S LAW

 

04

 

WEBER'S LAW

U X

 

04

 

 

04

 

CHARTJUNK

 

04

 

PRESENTING TRUTH

PRESENTING TRUTH

 

04

 

 

04

 

PRESENTING TRUTH

HANDELING OUTLIERS

 

04

 

HANDELING OUTLIERS

 

04

 

 

04

 

SHOW THE DATA

TELL THE TRUTH

HELP TO THINK ABOUT INFORMATION RATHER THE DESIGN

ENCOURAGE TO EYE TO COMPARE THE DATA

MAKE LARGE DATASETS COHERENT

GUIDANCE

 

PART 01

 

 

05

 

D3|JS

DYNAMIC

WHAT IS

D3 |. JS

 

05

 

EFFICIENT MANIPULATION OF DOCUMENTS BASED ON DATA

 

 

05

 

MIKE  BOSTOCK

TOOL  

SOURCE

DEVELOPMENT

PHILOSOPHY

IDEA

 

 

05

 

 

CHARTING  

OPEN

COMMUNITY

VISUAL

BRILLIANT

 

+

=

 

05

 

 

05

 

HOW TO LEARN

 

05

 

D3 |. JS

 

EXAMPLES

 

TUTORIALS

 

05

 

 

05

 

BLOCKBUILDER

 

05

 

JSBIN

HTML

 

<!-- -->

CSS

 

/**/

SCRIPT

 

// or /**/

 

05

 

COMMENTS

 

05

 

LEARNING PROCESS

WEB STANDARD

HTML

 

05

 

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

 

05

 

BASICS

D3

SELECT

 

05

 

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

 

05

 

TAG SELECT

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

 

05

 

ID SELECT

SVG

WEB STANDARD

 

05

 

 

05

 

<html> 
  
  <body>
  
  <svg width="250" height="250">
      <rect x="0"   y="0"   width="100" height="100" fill="#FF0000"></rect>
      <rect x="120" y="0"   width="100" height="100" fill="#00FF00"></rect>
      <rect x="0"   y="120" width="100" height="100" fill="#0000FF"></rect>
      <rect x="120" y="120" width="100" height="100" fill="#7837A3"></rect>
  </svg>

  </body>
  
</html>

SVG RECT

 

05

 

 

05

 

<html>
  
  
<head>
  <script src="https://d3js.org/d3.v4.min.js"></script>    
</head>
<body>

<script>
    
  var width = 500;
  var height = 500;
  
  var svg = d3.select("body")
              .append("svg")
              .attr("width", width)
              .attr("height", height);
  
  svg.append("line")
     .attr("x1", 100)
     .attr("x2", 500)
     .attr("y1", 150)
     .attr("y2", 450)
     .attr("stroke", "black")
  
</script> 
  
</body>
  
  
</html>

SELECT LINE

 

05

 

<html>
  
  
<head>
  <script src="https://d3js.org/d3.v4.min.js"></script>    
</head>

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

    var svg = d3.select("body")
                .append("svg")
                .attr("width", width)
                .attr("height", height);
 
    svg.append("circle")
       .attr("cx", 0)
       .attr("cy", 0)
       .attr("r", 50)
    
</script>
</body>
  
  
</html>

SELECT CIRCLE

 

05

 

<html>
  
  
<head>
 <script src="https://d3js.org/d3.v4.min.js"></script>   
</head>

<body>

<script>
    
   var test = d3.select("body")
                .append("svg")
                .attr("width", 500)
                .attr("height", 5000);
    
  test.append("rect")
      .attr("x", 10)
      .attr("y", 50)
      .attr("width", 200)
      .attr("height", 100)
      .attr("fill", "GREY")

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

SELECT RECT

CSS

WEB STANDARD

 

05

 

 

05

 

<html>
  
  
<head>  
<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>

SELECT TAG

 

05

 

<html>
  
  
<head>
<style>
      strong {
         background-color: red;
         font-size: 300%;
             }
</style>
</head>

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

SELECT TAG

 

05

 

<html>
  
  
<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>
  
  
</html>

SELECT CLASS

 

05

 

 

05

 

<html>
  
<head>
<link href="https://fonts.googleapis.com/css?family=Raleway+Dots" rel="stylesheet">

<style>
 .my-text {
     font-size: 1em;
     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>

GOOGLE FONTS

VARIABLE

JS

 

05

 

 

05

 

var value = 12.3467; 
console.log(value);


var active = true;
console.log("Is this really", active);


var text = "33.5"; 
console.log(text);


var IntoNumber = +"33.5";
console.log(IntoNumber);

 

05

 

JS

ARRAY

 

05

 

 

05

 

var Array = [ 5, 10, 15, 20, 25 ];
console.log(Array [2]) 

  
var AddArray = Array.push(5);
console.log(AddArray);

  
var SortArray = Array.sort((a, b) => b-a);
console.log(SortArray);

  
var ShortArray = Array.pop();
console.log(ShortArray); 

 

05

 

JS

OBJECTIVE

 

05

 

 

05

 

var fruta = {type:"uva", color:"rojo", cantidad:12, dulce:true};
console.log(fruta);
console.log(fruta.type);

JS

FUNCTIONS

 

05

 

 

05

 

function square (x) {return x * x;}
console.log(square(5)); 

  
let myNumbers = [1, 2, 3, 4];
myNumbers = myNumbers.map(function(d){return d*2;});
console.log(myNumbers);

  
function numberFunction(myNumber) {
if (myNumber < 10) {return myNumber;} else {return myNumber * myNumber;}}
console.log(numberFunction(30));

DYNAMIC

D3|JS

 

06

 

 

PART 02

 

 

06

 

LIBRARY

CONNECTING

 

06

 

ONLINE

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

D3

SELECTIONS

 

06

 

 

06

 

SELECTIONS

D3

DATA      BINDING

 

06

 

 

06

 

DATA BINDING

D3

DATA      LOADING

 

06

 

 

06

 

DATA LOADING

 

06

 

D3

SCALING

 

06

 

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

 

06

 

 

06

 

SCALING

 

06

 

SCALED CRICLES

 

06

 

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

 

06

 

 

06

 

COLOR SCALE

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

 

06

 

D3

AXIS

 

06

 

 

06

 

<script>

var width = 400,
    height = 100;

var data = [10, 15, 20, 25, 30];
    
 
var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

var scale = d3.scaleLinear()
              .domain([d3.min(data), d3.max(data)])
              .range([0, width - 40]);

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

svg.append("g")
   .call(x_axis);
  
</script>
















AXIS

 

06

 

AXIS

MARGIN

CONVENTION

 

06

 

 

06

 

MARGIN CONVENTION

 

01 DEFINE THE MARGIN OBJECT

02 WIDTH AND HEIGHT

03 SVG CONTAINER AS GROUP ELEMENTS BASED ON THE MARGINS  

 

MARGIN CONVENTION

 

06

 

D3

BAR    CHART

 

06

 

 

06

 

<script>

d3.scaleBand()
  .domain(d3.range(data.length))
  .rangeRound([0, width])
  .paddingInner(0.05); 
  
</script>
































SCALEBAND

 

06

 

SORTED

 

06

 

<style>

.bar {
  fill: #f20675;
  fill-opacity:0.6;
  stroke-width: 0.2px;
  stroke:#f20675;
}

.bar:hover {
  fill: #1ce3cd;
  fill-opacity:0.6;
}
 
</style>

























CSS HOVER

 

06

 

HOVER

 

06

 

<script>

var bar = svg.selectAll("g")
             .data(data).enter().append("g")
             .attr("transform",(d,i)=>"translate(10,"+i*20+")");

bar.append("rect")
   .attr("width",d=> x(d.Value))
   .attr("height", 18)
   .attr("class", "bars");   

bar.append("text")
   .attr("x",-30)
   .attr("y", 18/2)
   .attr("dy", ".34em")
   .text(d=> d.LOCATION);
  
</script>






















AS GROUP ELEMENT

 

06

 

VERTICAL

 

06

 

<script>

svg.append("g")
   .attr("class", "x-axis")
   .attr("transform", "translate(0,"+height+")")
   .call(xAxis)
   .selectAll("text")
   .attr("y", 6)
   .attr("x", 0)
   .attr("transform", "rotate(35)")
   .style("text-anchor", "start");
  

var color = d3.scaleLinear()
              .domain([d3.min(data,d=> d.Value), d3.max(data,d=> d.Value)])
              .range(['#1ce3cd', '#f20675'])

svg.selectAll('rect')
   .data(data).enter()
   .append('rect')
   .style('fill',(d)=> color(d.Value))
   .attr('width', x.bandwidth())
   .attr('x',(d)=> x(d.LOCATION))
   .attr("y",d=> y(d.Value))
   .attr("height",d=> height-y(d.Value))
  
</script>













COLOR SCALE

 

06

 

COLOR SCALE

 

06

 

<script>

svg.selectAll('rect')
   .data(data).enter()
   .append('rect')
   .attr('class', 'bar') 
   .attr("x", d => x(d.LOCATION))
   .attr("width", x.bandwidth()) 
   .attr("y",d=>{if(+d.Value<0){return height/2;}else{return y(+d.Value);}})
   .attr("height",d=> height/2-y(Math.abs(+d.Value))) 
   .attr("fill",d=>{if(+d.Value>=0){return color(d.Value);}else{return color2(d.Value);}})});
  
</script>



























IF STATEMENT

 

06

 

NEGATIVE SCALE

D3

SCATTER     PLOT

 

06

 

 

06

 

<script>

var xAxis = d3.axisBottom().scale(x).ticks(5);

var yAxis = d3.axisLeft().scale(y).ticks(5);

svg.selectAll("circle")
	 .data(data) 
	 .enter() 
	 .append("circle")
	 .attr("cx",d=> x(d[0]))  
	 .attr("cy",d=> y(d[1])) 
	 .attr("r", 15); 
			 
svg.append("g")
	 .attr("class", "x-axis")
	 .attr("transform", "translate(0," + (height - 20) + ")")
	 .call(xAxis);
			
svg.append("g")
	 .attr("class", "y-axis")
	 .attr("transform", "translate(" + 20 + ",0)")
	 .call(yAxis);
  
</script>















USING CIRCLES

 

06

 

WITH AXIS

 

06

 

<script>

var rMin = 2; 
var rMax = 12;
var xColumn = "sepal_length";
var yColumn = "petal_length";
var rColumn = "sepal_width";
var colorColumn = "species";
  
var circles = svg.selectAll("circle")
                 .data(data).enter().append("circle")
                 .attr("class", "circle")
                 .attr("cx",d=> x(d[xColumn]))
                 .attr("cy",d=> y(d[yColumn]))
                 .attr("r",d=>  r(d[rColumn]))
                 .attr("fill",d=> color(d[colorColumn]))
                 .attr("stroke",d=> color(d[colorColumn])); 
  
</script>





















GLOBAL VARIABLES

 

06

 

COLOR& SIZE SCALE

DYNAMIC

D3|JS

 

PART 03

 

 

07

 

WHY

ANIMATE

 

07

 

 

07

 

 

07

 

 

07

 

D3

TRANSITIONS

 

07

 

<script>
    
  d3.select("body")
    .transition()
    .duration(2000)
    .delay(1000)
    .style("background-color", "red");
  
</script>
  






























SIMPLE

 

07

 

.ease()

 

07

 

<script>
    
svg.selectAll("circle")
   .data(data)
   .enter()
   .append("circle")
   .style({fill:"#f20675"})
   .transition()
   .duration(2000)
   .ease("bounce")
   .style({fill:"#1ce3cd"})
   .attr("cx",(d,i)=>i*80)
   .attr("r",(d,i)=>d*2)
   .attr("cy","10%");
  
</script>
























 

07

 

COMPLETE

 

07

 

ANIMATED CIRCLES

ANIMATED

BAR      CHART

 

07

 

<script>
    
svg.selectAll(".bar")
   .data(data)
   .enter()
   .append("rect")
   .attr("class", "bar")
   .attr("x",d=>x(d.letter))
   .attr("width", x.rangeBand())
   .attr("y", 470)
   .attr("height",d=>height-470)
   .transition().duration(1000)
   .attr("y",d=>y(d.frequency))
   .attr("height",d=>height-y(d.frequency));
  
</script>
























 

07

 

HEIGHT

 

07

 

BARS WITH ANIMATED HEIGHT

<script>
    
svg.selectAll('rect')
   .data(data)
   .enter()
   .append('rect')
   .attr('class', 'bar')
   .attr("x", d=> x(d.LOCATION))
   .attr("width", x.bandwidth())
   .attr("y",d=> height)
   .attr("height",0)
   .transition()
   .duration(600)
   .delay((d,i)=> i*200)
   .attr("y",d=> y(d.Value))
   .attr("height",d=> height-y(d.Value));
  
</script>






















 

07

 

DELAY

 

07

 

SEQUENCE ANIMATION

<script>
    
d3.select("#start")
  .on("click", function() {
  
rect
  .transition()  
  .attr("x", 30)
  .attr("y", 30)
  .attr("width", 50)
  .attr("height", 50)
  .attr("fill", "#1ce3cd")

});
    
</script>
























 

07

 

CLICK FUNCTION

 

07

 

BY CLICK

<script>
    
d3.select("#start")
  .on("click", function() {

data = [11, 12, 15, 20, 18, 17, 16, 18, 23, 25, 5, 10, 13, 19, 21, 25, 22, 18, 15, 13];

svg.selectAll("rect")
   .data(data) 
   .transition()	 
   .ease(d3.easeLinear) 
   .duration(1500) 
   .delay(100)
   .attr("y",d=> y(d))
   .attr("height", d => height - y(d));

svg.selectAll("text")
   .data(data)
   .transition()
   .ease(d3.easeLinear)          	
   .duration(1500)
   .delay(100)          	
   .text(d=> d)
   .attr("x",(d,i)=> x(i) + x.bandwidth() / 2)
   .attr("y",d=> y(d) + 14);
					   				
});
    
</script>
















 

07

 

NEW DATA

 

07

 

BY CLICK ANIMATED BAR CHART

 

07

 

BY CLICK NEW DATASET

 

07

 

BY CLICK NEW DATASET NEGATIVE SCALE

ANIMATED

SCATTER     PLOT

 

07

 

 

07

 

BY CLICK ANIMATED SCATTER PLOT

 

07

 

BY CLICK ANIMATED SCATTER PLOT

D3

NEST

 

07

 

D3

GENERATORS

 

07

 

LINE

CHART

 

07

 

 

07

 

SIMPLE LINE CHART

 

07

 

LINE CHART HIGHLIGHTED

 

07

 

SVG ANIMATION

 

07

 

UPDATE BY CLICK

 

07

 

START BY CLICK

 

07

 

REALTIME ANIMATION

 

07

 

AREA

CHART

 

07

 

 

07

 

 

07

 

 

07

 

DYNAMIC

D3|JS

 

08

 

 

PART 04

 

WHY

INTERACT

 

08

 

NAVIGATE

IDENTIFY

COMPARE

REDUCE

 

08

 

 

08

 

 

08

 

D3

EVENT

 

08

 

<script>

var tt = d3.select("body")
           .append("div")
		   .attr("class", "tooltip")
           .style("position", "absolute")
           .text("yuhu tooltip");


d3.select("svg")
  .append("circle")
  .attr("class", "circle")
  .attr("r", 200)
  .attr("cx", 300)
  .attr("cy",300)
  .on("mouseover",()=> tt.style("visibility", "visible"))
  .on("mousemove",()=> tt.style("top", (event.pageY+10)+"px")
  .style("left",(event.pageX+10)+"px"))
  .on("mouseout",()=> tt.style("visibility", "hidden"));
  
</script>
























TOOLTIP

 

08

 

 

08

 

 

08

 

MOUSEOVER

 

08

 

MOUSEOVER WITH LABLE

SMALL

MULTIPLE

 

08

 

 

08

 

AREA CHART

 

08

 

AREA CHART

 

08

 

HISTOGRAM

 

08

 

RIDGED CHART

 

08

 

SMALL MULTIPLE LINE CHART

 

08

 

SETUP

OFFLINE

 

08

 

 

D3.V3

 

 

D3.V4

 

 

D3.V5

 

VERSIONS

 

08

 

LOCALHOST

 

08

 

 

python -m SimpleHTTPServer

 

 

WORKING OFFLINE

 

DOWNLOAD THE LIBARY/IES

MOVE THE LIBARY INTO YOUR WORKING FOLDER

CONNECT TO A LOCALHOST

 

 

08

 

ADVANCED

VISUALIZATIONS

 

08

 

 

08

 

HEXBIN

CHART

 

08

 

"IT VISUALLY CLUSTERS THE MOST POPULAR AREAS ON A SCATTERPLOT BY USING A CONTINUOUS COLOR OR SIZE SCALE

 

08

 

 

08

 

RAW

 

08

 

 

08

 

BEESWARM

CHART

 

08

 

IT DISTRIBUTES ELEMENTS HORIZONTALLY AVOIDING OVERLAP BETWEEN THEM AND ACCORDING TO A SELECTED DIMENSION

 

 

 

08

 

 

08

 

RAW

 

08

 

 

08

 

 

08

 

 

08

 

HORIZON

CHART

 

08

 

IT COMBINES POSITION AND COLOR TO REDUCE VERTICAL SPACE

 

 

 

 

08

 

 

08

 

RAW

 

08

 

LOCATION

CARTO

 

09

 

 

PART 01

 

 

09

 

WHAT IS

CARTO

VISUALIZE ANALYSE VISUALIZE ANALYSE VISUALIZE ANALYSE VISUALIZE

VISUALIZE ANALYSE VISUALIZE ANALYSE VISUALIZE

VISUALIZE ANALYSE VISUALIZE ANALYSE 

VISUALIZE ANALYSE VISUALIZE

VISUALIZE ANALYSE 

VISUALIZE

STOP!

 

 

 

09

 

 

09

 

HOW TO DEAL WITH

BIG       DATASET

 

09

 

AGGREGATE

FILTER

STYLE

HEXAGONAL BINNING & CLUSTERING

EXTREM & TARGET GROUP

SIZE & OPACITY

 

09

 

STYLE BY VALUE

 

09

 

AGGREGATION

HEXBIN

 

09

 

HEXAGONAL BINNING

 

09

 

EXTREM GROUP

FILTER

 

09

 

FILTER ON HIGH RISK

 

09

 

CREATE SPECIFIC STYLING