[Visualization] Animacion

Animaciones

Cambio de posición

const svg = d3.select("#canvas").append("svg")
    .attr("width", 400)
    .attr("height", 200)
    .style("border-color", "black")
    .style("border-style", "solid")
    .style("border-width", "1px");

const rectangle const svg = d3.select("#canvas").append("svg")
    .attr("width", 400)
    .attr("height", 200)
    .style("border-color", "black")
    .style("border-style", "solid")
    .style("border-width", "1px");

const rectangle = svg.append("rect")
    .attr("x", 50)
    .attr("y", 50)
    .attr("width", 50)
    .attr("height", 50);

d3.select("#start").on("click", function () {
    rectangle
        .transition()
        .attr("x", 250);
});

d3.select("#reset").on("click", function () {
    rectangle
        .transition()
        .attr("x", 50);
});

Reto 1: incluir un botón "Reset" que deje el cuadrado en la posición inicial

Cambio de tamaño

const svg = d3.select("#canvas").append("svg")
    .attr("width", 400)
    .attr("height", 200)
    .style("border-color", "black")
    .style("border-style", "solid")
    .style("border-width", "1px");

const rectangle = svg.append("rect")
    .attr("x", 50)
    .attr("y", 50)
    .attr("width", 50)
    .attr("height", 50);

d3.select("#start").on("click", function () {
    rectangle
        .transition()
        .attr("x", 250)
        .attr("width", 100) 
	    .attr("height", 100); 
});

d3.select("#reset").on("click", function () {
    rectangle
        .transition()
        .attr("x", 50);
});

Reto 2: incluir un botón "Reset" que deje el cuadrado en la posición inicial con el tamaño inicial

Cambio de opacidad

const svg = d3.select("#canvas").append("svg")
    .attr("width", 400)
    .attr("height", 200)
    .style("border-color", "black")
    .style("border-style", "solid")
    .style("border-width", "1px");

const rectangle = svg.append("rect")
    .attr("x", 50)
    .attr("y", 50)
    .attr("width", 50)
    .attr("height", 50);

d3.select("#start").on("click", function () {
    rectangle
        .transition()
        .attr("x", 250)
        .attr("width", 100) 
	    .attr("height", 100) 
        .attr("opacity",0.5);
});

d3.select("#reset").on("click", function () {
    rectangle
        .transition()
        .attr("x", 50);
});

Reto 3: crear una animación para un círculo en el que cambie de tamaño, de posición y color.

Delay en el inicio de la transición

const svg = d3.select("#canvas").append("svg")
    .attr("width", 400)
    .attr("height", 200)
    .style("border-color", "black")
    .style("border-style", "solid")
    .style("border-width", "1px");

const rectangle = svg.append("rect")
    .attr("x", 50)
    .attr("y", 50)
    .attr("width", 50)
    .attr("height", 50);

d3.select("#start").on("click", function () {
    rectangle
        .transition()
        .attr("x", 250)
        .attr("width", 100) 
	    .attr("height", 100) 
        .delay(500);
});

d3.select("#reset").on("click", function () {
    rectangle
        .transition()
        .attr("x", 50);
});

Duración de la transición

const svg = d3.select("#canvas").append("svg")
    .attr("width", 400)
    .attr("height", 200)
    .style("border-color", "black")
    .style("border-style", "solid")
    .style("border-width", "1px");

const rectangle = svg.append("rect")
    .attr("x", 50)
    .attr("y", 50)
    .attr("width", 50)
    .attr("height", 50);

d3.select("#start").on("click", function () {
    rectangle
        .transition()
        .attr("x", 250)
        .attr("width", 100) 
	    .attr("height", 100) 
        .delay(500)
        .duration(5000);
});

d3.select("#reset").on("click", function () {
    rectangle
        .transition()
        .attr("x", 50);
});

Easing

const svg = d3.select("#canvas").append("svg")
    .attr("width", 400)
    .attr("height", 200)
    .style("border-color", "black")
    .style("border-style", "solid")
    .style("border-width", "1px");

const rectangle = svg.append("rect")
    .attr("x", 50)
    .attr("y", 50)
    .attr("width", 50)
    .attr("height", 50);

d3.select("#start").on("click", function () {
    rectangle
        .transition()
        .attr("x", 250)
        .attr("width", 100) 
	    .attr("height", 100) 
        .delay(500)
        .duration(5000)
        .ease(d3.easeBounce);
});

d3.select("#reset").on("click", function () {
    rectangle
        .transition()
        .attr("x", 50);
});

Doble transición

const svg = d3.select("#canvas").append("svg")
    .attr("width", 400)
    .attr("height", 200)
    .style("border-color", "black")
    .style("border-style", "solid")
    .style("border-width", "1px");

const rectangle = svg.append("rect")
    .attr("x", 50)
    .attr("y", 50)
    .attr("width", 50)
    .attr("height", 50);

d3.select("#start").on("click", function () {
    rectangle
        .transition()
        .attr("x", 250)
        .attr("width", 100) 
	    .attr("height", 100) 
        .delay(500)
        .duration(5000)
        .ease(d3.easeBounce)
        .on("end",function() { 
		    d3.select(this)
		    	.transition() 
                .attr("x", 150) 
                .attr("width", 75) 
                .attr("height", 75) 
                .attr("opacity", 0.75) 
                .attr("fill", "blue") 
                .delay(500)  
                .duration(2500) 
                .ease(d3.easeBounce); 
		});
});

d3.select("#reset").on("click", function () {
    rectangle
        .transition()
        .attr("x", 50);
});

Reto 4: hacer una gráfica de barras, en la que el eje x represente a cada ciudad dentro del arreglo data, y la altura de la barra sea el dato w2005. Incluya un botón y una transición para que se tomen como referencia los dato w2006. En la transición cambie el color de las barras.

const data = [
    { name: "Medellín", w2005: 3, w2006: 33 },
    { name: "Cali", w2005: 39, w2006: 45 },
    { name: "Bogotá", w2005: 7, w2006: 31 },
    { name: "Pereira", w2005: 35, w2006: 36 },
    { name: "Bucaramanga", w2005: 16, w2006: 23 },
    { name: "Cúcuta", w2005: 45, w2006: 45 },
    { name: "Armenia", w2005: 6, w2006: 16 }
];