DATAVIZ

IE, Sandra Becker MAD 06/2018

CryptoSandra

SESSION01

 

CryptoSandra

INTRODATAVIZ

WHY DO WE NEED DATA VIZ?

CryptoSandra

SESSION01

 

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

BEN SCHNEIDERMAN

CryptoSandra

SESSION01

 

"LET MY DATASET CHANGE YOUR MINDSET."

HANS ROSLING

CryptoSandra

SESSION01

 

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

HENRY DAVID THOREAU

CryptoSandra

SESSION01

 

"ABOVE ALL ELSE SHOW THE DATA ."

EDWARD R. TUFTE

CryptoSandra

SESSION01

 

WHAT IS DATA VIZ?

 

CryptoSandra

SESSION01

 

CryptoSandra

SESSION01

 

BIG

DATAVIZ

 

CryptoSandra

SESSION01

 

REALTIME

DATAVIZ

 

CryptoSandra

SESSION01

 

DYNAMIC

DATAVIZ

 

CryptoSandra

SESSION01

 

SMART

DATAVIZ

 

CryptoSandra

SESSION01

 

DIMENSIONAL

DATAVIZ

 

CryptoSandra

SESSION01

 

ART

DATAVIZ

 

CryptoSandra

SESSION01

 

SESSION02

 

DATAVIZPRACTICE

CryptoSandra

HOW TO CREATE A DATA VIZ?

CryptoSandra

SESSION02

 

#1 OBJECTIVE DEFINE

CryptoSandra

SESSION02

 

#2 DATA EXPLORE

CryptoSandra

SESSION02

 

#3 IDEA DESIGN

CryptoSandra

SESSION02

 

CryptoSandra

VIZ TYPES

SESSION02

 

CryptoSandra

CHOOSE THE RIGHT VIZ TYPE?

SESSION02

 

CryptoSandra

VIZ ENCODING

SESSION02

 

#4 TOOL EXECUTION

CryptoSandra

SESSION02

 

PROGRAMMING

CryptoSandra

SESSION02

 

 

 

LOCATION

CryptoSandra

SESSION02

 

 

 

EXPLORE

CryptoSandra

SESSION02

 

#5 RESULT REVIEW

CryptoSandra

SESSION02

 

U X

CryptoSandra

SESSION02

 

HUMAN PERCEPTION

CryptoSandra

SESSION02

 

GOOD VIZ

CryptoSandra

SESSION02

 

CryptoSandra

SESSION02

 

BAD VIZ

CryptoSandra

SESSION02

 

CryptoSandra

WTF VIZ

SESSION02

 

VISUAL COMPLEXITY

CryptoSandra

SESSION02

 

CryptoSandra

"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

SESSION02

 

CryptoSandra

NR. OF VISUAL ENCODINGS

SESSION02

 

CryptoSandra

SESSION02

 

CryptoSandra

LEVEL OF INNOVATION

SESSION02

 

CryptoSandra

SESSION02

 

CryptoSandra

SESSION02

 

ALGORITHM VIZ

CryptoSandra

SESSION02

 

CryptoSandra

SESSION02

 

CryptoSandra

SESSION02

 

CryptoSandra

SESSION02

 

CryptoSandra

SESSION02

 

ASSIGNMENT 01

CryptoSandra

SESSION02

 

PART 01

VIZ EVALUATION

CryptoSandra

SESSION02

 

CryptoSandra

01  CHOOSE A DATA VIZ PROJECT

02  DISCUSS THE QUESTION CATALOGUE

03  SUMMARISE YOUR EVALUATION

 

 

SESSION02

 

Q1 WHAT IS THE OBJECTIVE?

Q2 WHAT IS THE CLASS (DATA VIZ OR INFOGRAPHIC) ?

Q3  WHAT IS THE VIZ TYPE, IS THE CHOICE ACCURATE?

Q4  WHAT VIZ ENCODING ARE USED, IS THE CHOICE ACCURATE?

Q5  WHAT ARE THE POSSIBILITIES TO INTERACT?

Q6  ANY PROBLEMS REGARDING HUMAN PERCEPTION?

Q7  ANY IMPROVEMENTS REGARDING THE UX?

Q8  IS IT A GOOD DATA VIZ? WHY/WHY NOT?

 

 

 

CryptoSandra

SESSION02

 

CryptoSandra

SESSION02

 

PART 02

VIZ CREATION

CryptoSandra

SESSION02

 

01 CHOOSE ONE EXAMPLE

02 DEFINE OBJECTIVES & EXPLORE THE DATA

04 TRY DIFFERENT VIZ TYPES AND VIZ ENCODINGS

05 CHOOSE THE MOST ACCURATE DATA VIZ

06 SUMMARISE YOUR CREATIONS

07  EXPLAIN THE REASONS FOR YOUR CHOICE 




CryptoSandra

SESSION02

 

CryptoSandra

SESSION02

 

PERCEPTIONDESIGN

CryptoSandra

SESSION03

 

ANSCOMBE'S QUARTET

CryptoSandra

SESSION03

 

CryptoSandra

SESSION 03

 

CryptoSandra

SESSION 03

 

SEEING = UNDERSTANDING

CryptoSandra

SESSION03

 

CryptoSandra

SESSION 03

 

WEBER'S LAW

CryptoSandra

SESSION03

 

CryptoSandra

SESSION 03

 

CryptoSandra

SESSION 03

 

CryptoSandra

SESSION 03

 

CryptoSandra

SESSION 03

 

CryptoSandra

SESSION 03

 

CryptoSandra

SESSION 03

 

CryptoSandra

PRESENTING TRUTH

SESSION03

 

CryptoSandra

SESSION 03

 

CryptoSandra

SESSION 03

 

CryptoSandra

SESSION 03

 

CryptoSandra

SESSION 03

 

CryptoSandra

SESSION 03

 

CryptoSandra

#1 show the data

#2 tell the truth

#3 help the viewer to think about the information rather than the design

#4 encourage the eye to compare the data

#5 make large dataset coherent

SESSION03

 

SESSION 03

 

CryptoSandra

COLOR

CryptoSandra

SESSION03

 

SESSION 03

 

CryptoSandra

CryptoSandra

SESSION03

 

SESSION 03

 

CryptoSandra

CryptoSandra

SESSION03

 

CryptoSandra

danger

passion

blood

love

agressive

SESSION03

 

CryptoSandra

SESSION03

 

CryptoSandra

SESSION 03

 

environment

nature

permission

CryptoSandra

SESSION 03

 

CryptoSandra

SESSION 03

 

sun

happiness

playful

CryptoSandra

SESSION 03

 

CryptoSandra

SESSION 03

 

water

cool

quietness

hope

CryptoSandra

SESSION 03

 

CryptoSandra

SESSION 03

 

death

luxury

sophistication

 

CryptoSandra

SESSION 03

 

CryptoSandra

SESSION 03

 

wedding

pure

innocent

 

CryptoSandra

SESSION 03

 

SESSION 03

 

CryptoSandra

SESSION 03

 

POSITION

CryptoSandra

SESSION 03

 

CryptoSandra

SESSION 03

 

CryptoSandra

SESSION 03

 

CryptoSandra

REDUNDANT

CryptoSandra

SESSION 03

 

SESSION 03

 

CryptoSandra

SESSION 03

 

CryptoSandra

SESSION 03

 

INTER ACTIVITY

CryptoSandra

NAVEGAR

IDENTIFICAR

COMPROBAR

REDUCIR

SESSION 03

 

CryptoSandra

SESSION 03

 

CryptoSandra

SESSION 03

 

CryptoSandra

SESSION 03

 

CryptoSandra

SESSION 03

 

CryptoSandra

CryptoSandra

SESSION 03

 

CryptoSandra

SESSION 03

 

LOCATIONCARTO

PART 1

SESSION04

 

CryptoSandra

VISUALIZE ANALYSE   VISUALIZE ANALYSE  VISUALIZE ANALYSE  VISUALIZE

VISUALIZE ANALYSE VISUALIZE ANALYSE VISUALIZE

VISUALIZE ANALYSE  VISUALIZE ANALYSE  

VISUALIZE ANALYSE  VISUALIZE

VISUALIZE ANALYSE  

VISUALIZE

STOP!

 

 

SESSION 04

 

CryptoSandra

HOW TO DEAL WITH BIG DATASETS?

SESSION 04

 

CryptoSandra

AGGREGATE HEXAGONAL BINNING & CLUSTERING

FILTER EXTREM & TARGET GROUPS

STYLE SIZE & OPACITY

 

 

SESSION 04

 

CryptoSandra

SESSION 04

 

CryptoSandra

01 CUSTOMER RISK IDENTIFICATION

01 CUSTOMER CONCENTRATION HEATMAP

CryptoSandra

SESSION 04

 

CryptoSandra

SESSION 04

 

CryptoSandra

SESSION 04

 

02 EXTREM GROUP     FILTER

CryptoSandra

SESSION 04

 

CryptoSandra

SESSION 04

 

CryptoSandra

SESSION 04

 

03 SPEND SEGMENTS  

CLUSTERS

CryptoSandra

SESSION 04

 

CryptoSandra

SESSION 04

 

CryptoSandra

SESSION 04

 

CryptoSandra

SESSION 04

 

04 TARGET GROUP

STYLING

CryptoSandra

SESSION 04

 

CryptoSandra

SESSION 04

 

CryptoSandra

ALL IN 1 M AP

SESSION 04

 

CryptoSandra

SESSION 04

 

SESSION 05

 

CryptoSandra

LOCATIONCARTO

PART 2

SESSION 05

 

CryptoSandra

HOW TO GAIN INSIGHTS?

SESSION 05

 

CryptoSandra

01 CONNECT NEW DATASETS

02 SHOW UNCERTAINTY

03 USE DYNAMIC SAMPLING


01 SHOP AREA PERFORMANCE

SESSION 05

 

CryptoSandra

SESSION 05

 

CryptoSandra

01 TARGET GROUP

STYLE BY VALUE & ICON

CryptoSandra

SESSION 05

 

CryptoSandra

SESSION 05

 

SESSION 05

 

CryptoSandra

02 AREA OF INFLUENCE

CREATE TRAVEL BUFFERS

SESSION 05

 

CryptoSandra

SESSION 05

 

CryptoSandra

03 INTERSECTION - CUSTOMER

INTERSECT WITH THE SECOND  LAYER & AGGREGATE & STYLE BY VALUE

SESSION 05

 

CryptoSandra

SESSION 05

 

CryptoSandra

SESSION 05

 

CryptoSandra

04 INTERSECTION - SHOPS

INTERSECT WITH THE SECOND  LAYER & ADAPT COLOR CODE

SESSION 05

 

CryptoSandra

SESSION 05

 

CryptoSandra

SESSION 05

 

CryptoSandra

05 ALL CUSTOMERS DISTRIBUTION

ADD ANOTHER LAYER

SESSION 05

 

CryptoSandra

SESSION 05

 

CryptoSandra

05 ADD SHOP FILTER

ADD A WIDGET

SESSION 05

 

CryptoSandra

SESSION 05

 

CryptoSandra

ALL IN 1 M AP

SESSION 05

 

CryptoSandra

SESSION 05

 

CryptoSandra

02 SPENDING SEGMENTS  & OUTLIERS

SESSION 05

 

CryptoSandra

01 SPATIAL SPENDING CORRELATION

ANALYSIS DETECT OUTLIERS & CLUSTERS

SESSION 05

 

CryptoSandra

SESSION 05

 

CryptoSandra

02 SHOW SEGMENTS - COLOR CODE

STYLE BY VALUE

SESSION 05

 

CryptoSandra

SESSION 05

 

CryptoSandra

SESSION 05

 

CryptoSandra

03 SPENDING - SIZE CODE

STYLE BY VALUE

SESSION 05

 

CryptoSandra

SESSION 05

 

CryptoSandra

04 CERTAINTY - OPACITY CODE

CARTOCSS FILTER

SESSION 05

 

CryptoSandra

SESSION 05

 

CryptoSandra

05 ADD EXPLANATION

HTML ADD A LEGEND

SESSION 05

 

CryptoSandra

SESSION 05

 

CryptoSandra

06 ADD SEGMENT FILTER

ADD A WIDGET

SESSION 05

 

CryptoSandra

SESSION 05

 

CryptoSandra

ALL IN 1 M AP

SESSION 05

 

CryptoSandra

SESSION 05

 

CryptoSandra

03 CRIME ANALYSIS OVER TIME

SESSION 05

 

CryptoSandra

01 CREATE CONTEXT

CREAT POLYGONS FROM POINTS & AGGREGATE & STYLE BY VALUE

SESSION 05

 

CryptoSandra

SESSION 05

 

CryptoSandra

SESSION 05

 

CryptoSandra

02 REDUCE DATA

ADD A NEW LAYER & SUB-SAMPLE

SESSION 05

 

CryptoSandra

SESSION 05

 

CryptoSandra

03 TIME ANALYSIS

CREAT A TORQUE MAP & STYLE BY VALUE

SESSION 05

 

CryptoSandra

SESSION 05

 

CryptoSandra

04 DYNAMIC SAMPLING

COMPARE DIFFERENT SAMPLES

SESSION 05

 

CryptoSandra

SESSION 05

 

CryptoSandra

SESSION 05

 

CryptoSandra

SESSION 05

 

CryptoSandra

05 ADD CONTEXT

UNHIDE THE DISTRICT LAYER

SESSION 05

 

CryptoSandra

SESSION 05

 

CryptoSandra

ALL IN 1 M AP

SESSION 05

 

CryptoSandra

SESSION 05

 

ASSIGNMENT 02

CryptoSandra

SESSION 05

 

CryptoSandra

01 CHOOSE A DATASET

02  EXPLORAR THE DATA USING CARTO

03  CREAT ONE FINAL MAP & INTERPRETATION

04  EXPLAIN YOUR PROCESS AND CHOICE

 

 

 

 

SESSION 05

 

CryptoSandra

SESSION 06

 

DYNAMICD3.JS

PART 1

CryptoSandra

SESSION 06

 

CryptoSandra

WHAT IS D3.JS?

CryptoSandra

SESSION 06

 

"EFFICIENT MANIPULATION OF DOCUMENTS BASED ON DATA ."

MIKE BOSTOCK

CryptoSandra

 

CHARTING TOOL  

OPEN SOURCE

COMMUNITY DEVELOPMENT

VISUAL PHILOSOPHY

BRILLIANT IDEA

 

SESSION 06

 

+

=

CryptoSandra

SESSION 06

 

SESSION 06

 

CryptoSandra

CryptoSandra

SESSION 06

 

SESSION 06

 

CryptoSandra

HOW TO LEARN  D3.JS?

SESSION06

 

CryptoSandra

 

TUTORIALS

 

EXAMPLES

SESSION 06

 

CryptoSandra

SESSION 06

 

CryptoSandra

CryptoSandra

SESSION 06

 

CryptoSandra

CryptoSandra

LOCAL HOST

$ python -m SimpleHTTPServer

SESSION 06

 

SESSION 06

 

CryptoSandra

CryptoSandra

CryptoSandra

HTML

SESSION 06

 

CryptoSandra

<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>HELLO WORLD</title>
</head>
<body>
</body>
</html>

SESSION 06

 

CryptoSandra

SVG

SESSION 06

 

CryptoSandra

SESSION 06

 

<!DOCTYPE html>

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

CryptoSandra

CSS

SESSION 06

 

CryptoSandra

SESSION 06

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS Example</title>
    <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>
  body {
    background: #4a1486;
    }
    #lights {
     width:800px
    }
    .bulb {
      width: 50px;
      height: 50px;
      display: inline-block;
      float: left;
      margin: 15px 10px;
      border-radius: 50% 2px;
      transform: rotate(-45deg);
    }
    .bulb:nth-child(odd) {
      background: #6bf5ff;
      opacity: 1;
      box-shadow: 1px 1px 15px #6bf5ff, -1px -1px 15px #6bf5ff;
      animation: bulb-pulse-1 0.9s linear 0s infinite alternate;
    }
    .bulb:nth-child(even) {
      background: #d8ff19;
      opacity: 1;
      box-shadow: 1px 1px 15px #d8ff19, -1px -1px 15px #d8ff19;
      animation: bulb-pulse-2 0.9s linear 0s infinite alternate;
    }
    @keyframes bulb-pulse-1 {
      from {box-shadow: 1px 1px 15px #6bf5ff, -1px -1px 15px #6bf5ff; }
      to { box-shadow: none; opacity: .3;}
    }
    @keyframes bulb-pulse-2 {
      from { box-shadow: none; opacity: .3;}
      to {box-shadow: 1px 1px 15px #d8ff19, -1px -1px 15px #d8ff19; }
    }

CryptoSandra

SESSION 06

 

CryptoSandra

SVG elemento

RECT

RECT

SESSION 06

 

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

CryptoSandra

SVG elemento

RECT

RECT

SESSION 06

 

JAVA SCRIPT

CryptoSandra

SESSION 06

 

VARIABLES

CryptoSandra

SESSION 06

 

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

console.log(number);

CryptoSandra

SESSION 06

 

ARRAYS

CryptoSandra

SESSION 06

 

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

console.log(numbers [2]) 

CryptoSandra

SESSION 06

 

OBJECTS

CryptoSandra

SESSION 06

 

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

console.log(fruta);

CryptoSandra

SESSION 06

 

FUNCTIONS

CryptoSandra

SESSION 06

 

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

console.log(square(5));

CryptoSandra

SESSION 06

 

CryptoSandra

SVG elemento

RECT

RECT

SESSION 06

 

SESSION07

 

DYNAMICD3.JS

PART 2

CryptoSandra

SET UP

CryptoSandra

SESSION07

 

CryptoSandra

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

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

SESSION07

 

SELECTIONS

CryptoSandra

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>

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

CryptoSandra

#1 EXAMPLE

 

SESSION07

 

CryptoSandra

<script>

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

</script>

SESSION07

 

DATA BINDING

CryptoSandra

SESSION07

 

CryptoSandra

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

#2 EXAMPLE

 

SESSION07

 

HOW TO SAVE DATA ONLINE?

CryptoSandra

SESSION07

 

CryptoSandra

<!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>
      d3.csv("https://gist.githubusercontent.com/sandravizmad/7287d19eee4e427d988282dbcf81faaa/raw/43c49dafb55d5e92a379787c39fb9d496384453a/test", function (myArrayOfObjects){
        myArrayOfObjects.forEach(function (d){
          console.log(d.x + ", " + d.y);
        });
      });
    </script>

  </body>
</html>

SESSION07

 

CryptoSandra

DATA SCALING

SESSION07

 

CryptoSandra

CryptoSandra

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

CryptoSandra

CryptoSandra

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

CryptoSandra

CryptoSandra

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

CryptoSandra

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

#3 EXAMPLE

 

SESSION07

 

CryptoSandra

CryptoSandra

var x = d3.scaleLog()
    .rangeRound([0, width - 2]);

var y = d3.scaleLog()
    .rangeRound([height - 2, 0]);

x.domain(d3.extent(diamonds,
function(d) { return d.carat; }));
y.domain(d3.extent(diamonds,
function(d) { return d.price; }));

CryptoSandra

UPDATE

SESSION07

 

CryptoSandra

 

ENTER

DATA

ELEMENT

 

UPDATE

 

EXIT

SESSION07

 

CryptoSandra

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

      //Binding
      var rects = svg.selectAll("rect").data(a_name);

      //Enter
      	  rects
            .enter().append("rect")
            .attr("y", 50)
            .attr("width",  80)
            .attr("height", 80);
      //Update
      	  rects
           .attr("x", function(a_name){return scale(a_name);});
      //Exit
       	  rects
           .exit().remove();

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

#4 EXAMPLE

 

SESSION07

 

CryptoSandra

SVG elemento

RECT

RECT

SESSION07

 

CryptoSandra

INDEX

SESSION07

 

CryptoSandra

<!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, 200]);

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

      //Binding
      var rects = svg.selectAll("rect").data(a_name);

      //Enter
      	  rects
            .enter().append("rect")
            .attr("y", 50)
            .attr("width", 50);

      //Update
      	  rects
           .attr("height", function(a_name){return scale(a_name);})
           .attr("x", function(a_name,i){return i*60;});
      //Exit
       	  rects
           .exit().remove();

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

#5 EXAMPLE

 

SESSION07

 

CryptoSandra

BAR CHART

SESSION07

 

CryptoSandra

#6 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([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>

SESSION07

 

CryptoSandra

<!DOCTYPE html>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
<style>
.chart div {
  font: 18px sans-serif;
  background-color: #40E0D0;
  text-align: right;
  padding: 20px;
  margin: 5px;
  color: white;
}

body {
    background-color: black;
  }

</style>

<div class="chart"></div>

<script>
var data = [4, 8, 15, 16, 23, 42, 60];

var scale = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 300]);

d3.select(".chart")
  .selectAll("div")
    .data(data)
    .enter().append("div")
    .style("width", function(d) { return scale(d) + "px"; })
    .text(function(d) { return d; });
</script>

BAR 01

SESSION07

 

CryptoSandra

<!DOCTYPE html>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
<style>
.chart rect {
  fill: #40E0D0;
}
.chart text {
  fill: white;
  font: 18px sans-serif;
  text-anchor: end;
}
body {
    background-color: black;
  }
</style>

<svg class="chart"></svg>

<script>
var width = 600,
    barHeight = 40;
var x = d3.scale.linear()
    .range([0, width]);
var chart = d3.select(".chart")
    .attr("width", width);

d3.tsv("data.tsv", type, function(error, data) {
  x.domain([0, d3.max(data, function(d) { return d.value; })]);

  chart.attr("height", barHeight * data.length);

var bar = chart.selectAll("g")
      .data(data)
      .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

bar.append("rect")
      .attr("width", function(d) { return x(d.value); })
      .attr("height", barHeight - 1);

bar.append("text")
      .attr("x", function(d) { return x(d.value) - 3; })
      .attr("y", barHeight / 2)
      .attr("dy", ".35em")
      .text(function(d) { return d.value; });
});

function type(d) {
  d.value = +d.value; // coerce to number
  return d;
}

</script>

BAR 02

SESSION07

 

CryptoSandra

BAR 03

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
.bar {
  fill: #40E0D0;
}
.bar:hover {
  fill: white;
}
.axis--x path {
  display: none;
}
body {
    background-color: black;
}
.axisx text{
  fill: white;
}
.axisy text{
  fill: white;
}
.axisx line{
  stroke: white;
}
.axisy line{
  stroke: white;
}
.axisx path{
  stroke: white;
}
.axisy path{
  stroke: white;
}
</style>
<svg width="960" height="500"></svg>
<script>

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;
var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
    y = d3.scaleLinear().rangeRound([height, 0]);
var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("data.tsv", function(d) {
  d.frequency = +d.frequency;
  return d;
}, function(error, data) {
  if (error) throw error;

x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

g.append("g")
      .attr("class", "axisx")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

g.append("g")
      .attr("class", "axisy")
      .call(d3.axisLeft(y).ticks(10, "%"))
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Frequency");

g.selectAll(".bar")
    .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.letter); })
      .attr("y", function(d) { return y(d.frequency); })
      .attr("width", x.bandwidth())
      .attr("height", function(d) { return height - y(d.frequency); });
});

</script>

SESSION07

 

CryptoSandra

SCATTER PLOT

SESSION07

 

CryptoSandra

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

  <style>
	circle{fill: #40E0D0}
  </style>

  <body>

    <script>

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

      function a_name (d){

        // Bind data
        var circles = svg.selectAll("circle").data(d);

        // Enter
        circles.enter().append("circle")
          .attr("r", 15);

        // Update
        circles
          .attr("cx", function (d){ return d.x; })
          .attr("cy", function (d){ return d.y; });

        // Exit
        circles.exit().remove();

      }
      d3.csv("https://gist.githubusercontent.com/sandravizmad/7287d19eee4e427d988282dbcf81faaa/raw/1150864a4881223226559f6dae83155b0d3a0d05/test",
function (d){a_name(d);});

    </script>

  </body>
</html>

SESSION07

 

CryptoSandra

TRANSITIONS

SESSION07

 

CryptoSandra

CryptoSandra

CryptoSandra

ASSIGNMENT 03

SESSION07

 

CryptoSandra

01 SAVE YOUR DATASET