wororo.

learn d3.js - 01

Jupyter d3js
2017/11/12

Packages

Para empezar a trabajar con D3 en jupyter, se trabajará con py_d3

1
import py_d3

Initialize

Para empezar a ocupar la librería es necesario hacer un load con %load_ext py_d3. En algunos casos hay problemas al reabrir el notebook, por eso se cambia por %reload_ext py_d3.

1
%reload_ext py_d3

References

En este Notebook, trabajaré en base al tutorial de Gabriel Coch. Ese tutorial es una traducción de otro tutorial de Scott Murray.

El aporte de este tutorial es trabajarlo en Jupyter.

Jupyter con py_d3

Usando el tag %%d3 se puede correr código HTML y JavaScript directamente en una celda. Aquí algunos ejemplos.

Text

1
2
3
%%d3 4.11.0
Hello World!



Hello World!
 
1
2
3
%%d3 4.11.0
<a href="http://www.google.com">Google</a>



Google

SVG

1
2
3
4
5
6
7
8
9
10
%%d3 4.11.0
<svg>
    <circle cx="50" 
            cy="50" 
            r="30" 
            fill="blue" 
            stroke="black" 
            stroke-width="5"/>
</svg>

Javascript

1
2
3
4
5
%%d3 4.11.0
<script>
    alert("Hello, world!");
</script>

HTML Console

1
2
3
4
5
%%d3 4.11.0
<script>
    console.log(d3.selectAll("p"));
</script>

d3.js

d3 es una librería que permite agregar y modificar elementos en la estructura del DOM de HTML.

Una diferencia de trabajar directamente en un archivo HTML, es necesario cambiar d3.select("body").append("g") sino generar un elemento <g /> y ocupar d3.select("g").

Añadir Elementos

Lo primero será crear elementos dentro de la celda de salida.

En este caso, un texto.

1
2
3
4
5
6
7
8
%%d3 4.11.0
<g />
<script>
    d3.select("g")
        .text("Hello World");
</script>

HTML DOM Elements

Si quisiera agregar más de un párrafo, se pensaría intuitivamente que se debe repetir el código, sin embargo, dentro del DOM HTML, se trata de un solo elemento, llamado <g />. Lo que sucede en la siguiente celda es que se agrega dos valores de texto al mismo elemento.

1
2
3
4
5
6
7
8
%%d3 4.11.0
<g />
<script>
    d3.select("g").text("Hello World 1");
    d3.select("g").text("Hello World 2");
</script>

Identificadores de elementos

Ahora, en un archivo HTML, sería necesario seleccionar los elementos específicos. En este caso podemos ocupar un atributo id con un nombre dado. En el siguiente caso <g id="g1">, que puede ser seleccionado con .select("#g1").

1
2
3
4
5
6
7
8
9
%%d3 4.11.0
<g id="g1"/>
<g id="g2"/>
<script>
    d3.select("#g1").text("Hello World 1");
    d3.select("#g2").text("Hello World 2");
</script>

Elementos con nombres

Una alternativa a lo anterior, es agregar elementos con nombres propios.

1
2
3
4
5
6
7
8
9
%%d3 4.11.0
<control1 />
<control2 />
<script>
    d3.select("control1").text("Hello World 1");
    d3.select("control2").text("Hello World 2");
</script>

Agregar Elementos al DOM

Para poder trabajar correctamente con esto, es necesario agregar párrafos al elemento <g />. Esto se realiza mediante .append("p").

1
2
3
4
5
6
7
8
%%d3 4.11.0
<g />
<script>
    d3.select("g").append("p").text("Hello World 1");
    d3.select("g").append("p").text("Hello World 2");
</script>

Chaining methods

Si se desean agregar muchos párrafos, en vez de hacer las órdenes una a una, se pueden encadenar métodos para generar nuevos elementos.

Al ocupar esta técnica, se puede simplificar el código.

1
2
3
4
5
6
7
8
9
%%d3 4.11.0
<g />
<script>
    d3.select("g")
        .append("p").text("New paragraph 1!")
        .append("p").text("New paragraph 2!");
</script>

HTML Styles

Se pueden agregar estilos de HTML a los elementos que se agreguen.

1
2
3
4
5
6
7
8
9
%%d3 4.11.0
<g />
<script>
    d3.select("g")
        .text("Hello World")
        .style("color","#ff00ff");
</script>

Trabajar con Arrays

En este caso, generamos un array.
Luego agregamos de forma manual un párrafo por cada elemento. Los elementos se llaman con corchetes, con índices basados en cero.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
%%d3 4.11.0
<g />
<script>
    var array = [ 5, 10, 15, 20, 25];
    
    d3.select("g")
        .append("p").text("array[0]: " + array[0])
        .append("p").text("array[1]: " + array[1])
        .append("p").text("array[2]: " + array[2])
        .append("p").text("array[3]: " + array[3])
        .append("p").text("array[4]: " + array[4]);
</script>

Arrays en d3

Trabajar con los arrays es raro en d3.

Tiene un órden de ejecución no tán intuitivo.

En primera instancia se hace un .selectAll(“p”), incluso antes de haber agregado ningún (“p”) aún.

Luego se hace una selección del array con .data(nombreDelArray) y luego un .enter().

Ahora, por cada elemento, agregamos un párrafo con New paragraph!. 

1
2
3
4
5
6
7
8
9
10
11
12
13
%%d3 4.11.0
<g />
<script>
    var array = [ 5, 10, 15, 20, 25];
    
    d3.select("g")
        .selectAll("p")
        .data(array)
        .enter()
        .append("p").text("New paragraph!");
</script>

Array values

En el caso anterior, no se puede acceder a los valores del array, es necesario agregar una función que retorne el valor del arreglo: function(d) {return d;}.

1
2
3
4
5
6
7
8
9
10
11
12
%%d3 4.11.0
<g />
<script>
    var array = [ 5, 10, 15, 20, 25];
    
    d3.select("g")
        .selectAll("p")
        .data(array).enter()
        .append("p").text(function(d) { return "Array Item: " + d; });
</script>

Funciones

En este caso se hace una función para hacer que cambie de color la función según el valor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
%%d3 4.11.0
<g />
<script>
    var dataset = [ 5, 10, 15, 20, 25];
    
    d3.select("g")
        .selectAll("p")
        .data(dataset).enter()
        .append("p").text(function(d) { return "Array Item: " + d; })
            .style("color", function(d) 
                {
                    if (d % 2 == 0) 
                        { return "red";} 
                    else 
                        { return "blue"; } 
                });;
</script>

Refactor de funciones

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
%%d3 4.11.0
<g />
<script>
    function printNumber(d) {  return "Array Item: " + d; }
    function colorThis(d){ return (d % 2 == 0) ? "red" : "blue" ; }
    var dataset = [ 5, 10, 15, 20, 25];
    
    d3.select("g")
        .selectAll("p")
        .data(dataset).enter()
        .append("p").text(printNumber)
        .style("color", colorThis);
</script>

Otra función, para colorear las letras. Just for fun.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
%%d3 4.11.0
<g />
<script>
    function printLetter(d, i) { return d; }
    
    function randomColor(d, i){ 
        return '#'+(Math.random()*0xFFFFFF<<0).toString(16); 
    }
    var word = "Hello World";
    
    d3.select("g")
        .selectAll("a")
        .data(word).enter()
        .append("a").text(printLetter)
        .style("color", randomColor );  
</script>

Claro que en este post, no se puede apreciar como cambian de color cada vez que se ejecutan :(
CATALOG
  1. 1. Packages
  2. 2. Initialize
  3. 3. References
  4. 4. Jupyter con py_d3
    1. 4.1. Text
    2. 4.2. Links
    3. 4.3. SVG
    4. 4.4. Javascript
    5. 4.5. HTML Console
  5. 5. d3.js
    1. 5.1. Añadir Elementos
      1. 5.1.1. HTML DOM Elements
      2. 5.1.2. Identificadores de elementos
      3. 5.1.3. Elementos con nombres
      4. 5.1.4. Agregar Elementos al DOM
    2. 5.2. Chaining methods
    3. 5.3. HTML Styles
    4. 5.4. Trabajar con Arrays
      1. 5.4.1. Arrays en d3
      2. 5.4.2. Array values
      3. 5.4.3. Funciones
      4. 5.4.4. Refactor de funciones
Archive Tag
Total : 7
2017
Python Github Django Heroku Images CC5508 Hexo Ghost Markdown Ubuntu ZSH VirtualEnv HelloWorld Jupyter d3js