CryptoSandra

SESSION01

WEB STANDARDS

CryptoSandra

WHAT IS D3.JS?

SESSION01

CryptoSandra

"EFFICIENT MANIPULATION OF DOCUMENTS BASED ON DATA."

MIKE BOSTOCK

SESSION01

CryptoSandra

CHARTING TOOL

OPEN SOURCE

COMMUNITY DEVELOPMENT

VISUAL PHILOSOPHY

BRILLIANT IDEA

SESSION01

+

=

CryptoSandra

SESSION01

CryptoSandra

SESSION01

CryptoSandra

SESSION01

CryptoSandra

HOW TO LEARN D3.JS?

SESSION01

CryptoSandra

TUTORIALS

EXAMPLES

SESSION01

CryptoSandra

SESSION01

CryptoSandra

SESSION01

CryptoSandra

SESSION01

CryptoSandra

LOCALHOST

$ python -m SimpleHTTPServer

SESSION01

CryptoSandra

SESSION01

CryptoSandra

HTML

SESSION01

CryptoSandra

<!DOCTYPE html>

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

SESSION01

CryptoSandra

SVG

SESSION01

CryptoSandra

<!DOCTYPE html> 

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

SESSION01

CryptoSandra

RECT

SVG RECT 01

- Crea 4 cuadros “rect”
- Cada cuadro tiene el tamaño de 100*100 pixels

- Todos tienen el fill de este color #7b3294.
- El 1. tiene los coordinadores de 0,0 el 2. 0,50, el 3. 50,0 y el 4. 50,50.

- La opacity crece de 0.2 para el primero hasta el 0.8 del último.

SESSION01

CryptoSandra

SVG elemento

RECT

SVG RECT 02

- Crea 4 cuadros “rect”
- Cada cuadro tiene el tamaño de 100*100 pixels

- Todos tienen el fill transparent

- Todos tienen un stroke del colo r #7b3294
- El 1. tiene los coordinadores de 0,0 el 2. 0,50, el 3. 50,0 y el 4. 50,50.

- La opacity del stroke crece de 0.2 para el primero hasta el 0.8 del último.

- El tamaño del Stroke es 10.

SESSION01

CryptoSandra

SVG elemento

RECT

SVG CRICLE

- Crea 5 circles que van a estar en linea

- Todos tienen el fill #f1eef6 y un stroke del colo r #c51b8a
- El 1. tiene los coordinadores de 80,80 y cada círculo con coordinadores de 30 pixeles más.

- El primero tiene el radius de 20 y cada siguiente circulo tiene una radius con 10 pixels más hasta el ú ltimo que tenga un radius de 60 pixels.

- El tamaño empieza con del Stroke es 15 pixeles y cada siguiente tiene 3 pixels menos.

SESSION01

CryptoSandra

CSS

SESSION01

CryptoSandra

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

SESSION01

  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

SESSION01

CryptoSandra

SVG elemento

RECT

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

SESSION01

CryptoSandra

CSS TEXT

- Vamos a cambiar el estilo de un texto

- Crea tres elementos de texto en SVG

- Utiliza el class argumento para darles nombres.
- En CSS cambiar tanto el tamaño de los tres elementos como el color y utilizar un tipo de esa página. https://fonts.google.com

SESSION01

CryptoSandra

SVG elemento

RECT

SESSION01

JAVASCRIPT

CryptoSandra

SESSION01

VARIABLES

CryptoSandra

SESSION01

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

console.log(number);

CryptoSandra

SESSION01

ARRAYS

CryptoSandra

SESSION01

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

console.log(numbers [2])

CryptoSandra

SESSION01

CryptoSandra

ARRAY

- Crear este array

- Llama el array total primero

- Llama el nombre de la primera ciudad y si es bonito

- Llama el numero de los habitantes en Koeln

var ciudades = [
{ nombre: "Sao Paulo", habitantes: 12, bonito: true}, 
{ nombre: "Madrid", habitantes: 6, bonito: true},
{ nombre: "Koeln" , habitantes: 1, bonito: true}
];

SESSION01

OBJECTS

CryptoSandra

SESSION01

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

console.log(fruta);

CryptoSandra

SESSION01

FUNCTIONS

CryptoSandra

SESSION01

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

console.log(square(5));

CryptoSandra

SESSION01

CryptoSandra

SVG elemento

RECT

FUNCTION

- Calcular el IMC de esas dos personas

- La función del IMC es x/(y*y)

var personas = [{ x: 60, y: 1.60}, { x: 70, y: 2.00},];

SESSION01

CryptoSandra

SVG elemento

RECT

SESSION01

D3 PRINCIPALS

CryptoSandra

SESSION02

SETUP

CryptoSandra

SESSION02

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>

SESSION02

SELECTIONS

CryptoSandra

SESSION02

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

SESSION02

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>

SESSION02

CryptoSandra

SELECTORS

- Añade un elemento SVG al Body

- Crea tres elementos tipo rectanglo

x=100 y=100 width=100 height=20 fill=red

x=100 y=120 width=100 height=30 fill=yellow

x=100 y=150 width=100 height=20 fill=red

SESSION02

DATABINDING

CryptoSandra

SESSION02

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

SESSION02

HOW TO SAVE DATA ONLINE?

CryptoSandra

SESSION02

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>

SESSION02

CryptoSandra

DATASCALING

SESSION02

CryptoSandra

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

SESSION02

CryptoSandra

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

SESSION02

CryptoSandra

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

SESSION02

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

SESSION02

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

SESSION02

CryptoSandra

SVG elemento

RECT

SCALING

- Crea un array (1, 1.5, 2, 4, 4.5, 5)

- Crea el domain con min y max de los datos

- Crea el range de 20 y 200

- Pinta círculos con el color verde y radius 20

- El visual encoding the los datos va a ser la posición en el eje X.

SESSION02

CryptoSandra

UPDATE

SESSION02

CryptoSandra

ENTER

DATA

ELEMENT

UPDATE

EXIT

SESSION02

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

SESSION02

CryptoSandra

SVG elemento

RECT

SESSION02

CryptoSandra

INDEX

SESSION02

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

SESSION02

CryptoSandra

BAR CHART

SESSION02

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>

SESSION02

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 x = 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 x(d) + "px"; })
    .text(function(d) { return d; });
</script>

BAR01

SESSION02

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>

BAR02

SESSION02

CryptoSandra

BAR03

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

SESSION02

CryptoSandra

SCATTER PLOT

SESSION02

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>

SESSION02

CryptoSandra

D3 PLOT

- PINTAR ESTOS DATOS

var data = [
[70,150],
[120,200],
[150,300],
[200,350],
[170,250],
[90,220],
[320,70],
[115,250],
[180,200],
[160,220]
];

SESSION02

CryptoSandra

TRANSITIONS

SESSION02

CryptoSandra

SESSION02

CryptoSandra

SESSION02

"Aaron’s unique quality was

that he was marvellously and vigorously different.

There is a scarcity of that.

Perhaps we can be all

a little more

different too."

Edward Tufte about Aaron Swartz, 2013

CryptoSandra

D3.js

By Jesus Garcia Garcia (jesus_gg)

D3.js

D3.js tutorial

Jesus Garcia Garcia (jesus_gg)

I'm a computer engineer with a great interest around #Big Data, #data analysis and #dataviz.

jesusgarcia.pro

SESSION01

SESSION01

SESSION01

SESSION01

+

=

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION01

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

SESSION02

D3.js

More from Jesus Garcia Garcia (jesus_gg)