CryptoSandra

SESSION01

 

WEB STANDARDS

 

CryptoSandra

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

CryptoSandra

SESSION01

 

CryptoSandra

LOCALHOST

$ python -m SimpleHTTPServer

SESSION01

 

CryptoSandra

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

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

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

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

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

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

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

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

CryptoSandra

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

SESSION02

 

CryptoSandra

CryptoSandra

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

SESSION02

 

CryptoSandra

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

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

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

  • 543