4 hvid sum Visualización de datos con D3: CSV y JSON

Introducción y objetivos

• Este tema introduce elementos esenciales para dibujar con D3 utilizando archivos CSV o JSON.
• Se cubrirán elementos SVG en HTML y se crearán gráficos simples como Bar Charts y Scatter Plots con D3 y HTML.
• El objetivo es experimentar con estilos gráficos y anotaciones, comenzando con lo simple y avanzando hacia la complejidad.
• Se aconseja dominar los conceptos básicos antes de intentar modificaciones complejas para no complicar el aprendizaje.
• Se recomienda practicar todas las instrucciones del código, usando herramientas como Brackets para repetir los pasos.
• Entender las estructuras de datos JSON y CSV es crucial para la gestión y modificación de visualizaciones futuras.

Trabajar con diferentes estructuras de datos: JSON y CSV

• Se comienza creando un archivo CSV llamado "comida.csv" en Brackets, que contiene datos sobre comida y preferencia.
• Un ejemplo de archivo CSV sería:
  • Comida, Preferencia.
  • Manzana,9.
  • Huevos fritos, 10.
  • Ensalada, 5.
  • Galleta, 2.
  • Leche, 8.
• La función d3.csv acepta dos atributos:
  • La ruta al archivo. Si el archivo no está en la misma carpeta que el HTML, puede haber errores.
  • La función callback, que se ejecuta si el archivo CSV se encuentra.
• El proceso implica imprimir los valores del CSV iterando por filas y accediendo a los valores mediante las cabeceras.
• Similar a CSV, se puede trabajar con archivos JSON.
• Un ejemplo sería crear un archivo llamado "coordenadas.json" con datos de coordenadas.

[
  {
    "x_axis": 30,
    "y_axis": 30,
    "radius": 20,
    "color": "green"
  }, {
    "x_axis": 70,
    "y_axis": 70,
    "radius": 20,
    "color": "purple"
  }, {
    "x_axis": 110,
    "y_axis": 100,
    "radius": 20,
    "color": "red"
  }
]

• Los objetos JSON se leen y se recorren de manera similar a CSV, utilizando la función d3.json en lugar de d3.csv.

Generar y dibujar con SVG

• D3 es ideal para gestionar objetos gráficos como SVGs (Scalable Vector Graphics), aunque también se pueden usar elementos div.
• Los SVG aseguran la máxima compatibilidad entre diferentes dispositivos y navegadores web.
• Para crear un círculo SVG, se utilizan los atributos cx y cy para definir las coordenadas del centro y r para el radio.

<svg width="50" height="50">
  <circle cx="25" cy="25" r="22" fill="blue" stroke="gray" stroke-width="2"/>
</svg>

• Es importante especificar los atributos width y height para los elementos SVG.
• El elemento (0,0) representa la esquina superior izquierda.
• Para un rectángulo, las coordenadas x e y indican la posición de la esquina superior izquierda.

<rect x="100" y="0" width="200" height="50"/>

• Se pueden dibujar elipses especificando los radios en x (rx) e y (ry).

<ellipse cx="250" cy="25" rx="100" ry="25"/>

• Para dibujar una línea, se define el punto inicial y final con el atributo stroke.

<line x1="0" y1="0" x2="500" y2="50" stroke="black"/>

• Los elementos gráficos se pueden renderizar y se puede definir el estilo como en HTML, utilizando atributos como:
  • fill: Para rellenar, usando valores de CSS para los colores.
  • stroke: El color de la línea.
  • stroke-width: El ancho de la línea.
  • opacity: Un número entre 0.0 y 1.0.
• Se puede utilizar CSS especificando una clase en el SVG.
• En SVG, no existen capas ni la posibilidad de definir la posición en el eje z; todo se maneja en un plano bidimensional.
• Para lograr efectos de superposición, se juega con el orden y la posición de las coordenadas x e y.

<rect x="0" y="0" width="30" height="30" fill="purple"/>
<rect x="20" y="5" width="30" height="30" fill="blue"/>

• Se pueden utilizar colores en formato RGBA para añadir transparencia, donde el último valor indica el nivel de transparencia.

<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 1.0)"/>
<circle cx="50" cy="25" r="20" fill="rgba(0, 0, 255, 0.75)"/>

• También se puede usar el atributo opacity directamente en el elemento SVG.

<circle cx="25" cy="25" r="20" fill="purple" stroke="green" stroke-width="10" opacity="0.9"/>

Bar Chart y Scatter Plot desde cero

• Un Bar Chart y un Scatter Plot se pueden crear desde cero.
• Inicialmente, se pueden usar elementos div en lugar de SVG.
• Crear una barra con un elemento div requiere definir el estilo como display: inline-block.

<div style="display: inline-block; width: 20px; height: 75px; background-color: teal;"></div>

• Para aplicar el mismo estilo a diferentes divs, se crea una clase en CSS.

div.bar {
  display: inline-block;
  width: 20px;
  height: 75px; /* We'll override height later */
  background-color: teal;
}

• Luego, se referencia la clase en el div.

<div class="bar"></div>

• Para crear múltiples barras con D3, se utiliza un array de datos.

function read(){
  d3.select("body").selectAll("div")
    .data(dataset)
    .enter()
    .append("div")
    .attr("class", "bar");
}

• Para que la altura de cada barra varíe según el contenido del array, se sobrescribe el valor height en CSS con D3.

function read(){
  d3.select("body").selectAll("div")
    .data(dataset)
    .enter()
    .append("div")
    .attr("class", "bar")
    .style("height", function(d) {
      return d + "px";
    });
}

• Para usar más valores, se puede generar un array con valores aleatorios.

var dataset = []; //Inicializar array vacio
for (var i = 0; i < 10; i++) { //Loop 10 veces
  var newNumber = Math.floor(Math.random() * 30);
  dataset.push(newNumber); //Añadir al array
}

• Para crear barras con elementos SVG:
  • Primero, se define el tamaño SVG.

var w = 500;
var h = 100;

• Luego, se crea el elemento SVG.

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

• Se generan las barras creando rectángulos.

svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", 20)
  .attr("height", 100);

• Para crear múltiples barras con diferentes posiciones y alturas:

svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("x", function(d, i) {
    return i * (w / dataset.length);
  })
  .attr("y", 0)
  .attr("width", w / dataset.length - 1)
  .attr("height", function(d) {
    return d;
  });

• Para que el gráfico quede bien, se cambia el valor de "y" en cada elemento.

svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("x", function(d, i) {
    return i * (w / dataset.length);
  })
  .attr("y", function(d) {
    return h - d;
  })
  .attr("width", w / dataset.length - 1)
  .attr("height", function(d) {
    return d;
  });

• Atributo fill se puede utilizar para dar color a las barras. attr("fill", "teal");
• También se puede usar gradiente:

.attr("fill", function(d) {
  return "rgb(0, 0, " + (d * 10) + ")";
})

• Para poner el valor encima de las barras:

svg.selectAll("text")
  .data(dataset)
  .enter()
  .append("text")
  .text(function(d) {
    return d;
  })
  .attr("x", function(d, i) {
    return i * (w / dataset.length);
  })
  .attr("y", function(d) {
    return h - (d);
  });

• Para Scatter Plot, se utiliza un array con coordenadas:

var dataset = [
  [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], [410, 12], [475, 44],
  [25, 67], [85, 21], [220, 88]
];

• La función es similar a la del Bar Chart, pero se utiliza "circle" en lugar de "rect".

svg.selectAll("circle") // <-- Cambiamos donde antes ponía "rect"
  .data(dataset)
  .enter()
  .append("circle")
  .attr("cx", function(d) {
    return d[0];
  })
  .attr("cy", function(d) {
    return d[1];
  })
  .attr("r", 5);

• Para practicar, se recomienda usar archivos CSV y JSON para ambos gráficos.