Introducción D3 Volver

Conoceremos conceptos básicos del desarrollo con d3.js

  • Introducción a d3.js como librería
  • Ejemplos de la posibilidad de d3

Introducción a d3.js como librería

Data Driven Documents. Asociar data a elementos del DOM.

Ver Ejemplo html Ver Ejemplo jsFiddle

Selecciones:

d3.selectAll("p").style("color", "red");
d3.select("body").style("background-color", "black");

Propiedades dinámicas:

d3.selectAll("p").style("color", function() {
  return "rgb(0,125,255)";
});
d3.selectAll("p").style("color", function() {
  return "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) +","+ Math.floor(Math.random() * 255) +")";
});
d3.selectAll("p").style("color", function(d, i) {
  return i % 2 ? "red" : "green";
});

Enter, Updates & Exit

Probar el siguiente código agregando o quitando números del arreglo.

// Update…
var p = d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
    .text(function(d) { return d; });

// Enter…
p.enter().append("p")
    .text(function(d) { return d; });

// Exit…
p.exit().remove();

Transitions


d3.select("body").transition()
    .duration(1000)
    .style("background-color", "green");
d3.selectAll('p')
    .transition()
    .duration(1000)
    .style("font-size","30px");
d3.selectAll("p")
    .data([8,10, 15, 18, 23, 42])
    .text(function(d) { return 'Tiene Font-Size:' + d; })
    .transition()
    .duration(1000)
    .style("font-size",function(d){ return d+'px';});
var p = d3.selectAll("p")
    .data([8,10, 15, 18, 23, 42]);
    
    p.enter().append("p")
      .style("font-size",'0');

    p.transition()
    .duration(1000)
    .style("font-size",function(d){ return d+'px';})
    .text(function(d) { return 'Tiene Font-Size:' + d; });

    // Exit…
    p.exit().remove();

Agregar D3 desde recurso externo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>Un pequeño documento</title>
</head>
<body>
  <p>Miren, estoy programando con D3.</p>
  <p>Miren, estoy programando con D3.</p>
  <p>Miren, estoy programando con D3.</p>
  <p>Miren, estoy programando con D3.</p>
  <p>Miren, estoy programando con D3.</p>
  <p>Miren, estoy programando con D3.</p>
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</body>
</html>

Ejemplos de la posibilidad de d3