1.5 TP-3: Introducción a Observable y D3 / Tomasgianni11

html`<svg width="200" height="200">

<circle cx="100" cy="100" r="25" style="fill:red;"></circle>`

html`<svg width="110" height="110">

</circle>`

grilla_circ_conc = {

var coleccion = []; // Arreglo de datos a retornar

var cantidad_circulos = 3;

var incremento = 1;

var rad = 100;

var rad_dec = rad*0.25;

var color_ = ['green', 'purple', 'red'];

for(var r = 1; r < cantidad_circulos+incremento; r = r+incremento) {

rad = rad - rad_dec

var circle_elem = {

eje_x: 100,

eje_y: 100,

radio: rad,

color: color_[r-1],

};

coleccion.push(circle_elem);

}

return coleccion;

}

{

// 1. Creación de un área de dibujo (400x400 pixeles)

const svg = d3.create("svg")

.attr("width",400)

.attr("height",400);

// 2. Asociamos la colección de círculos a componentes gráficos "circle"

var circulos = svg.selectAll("circle") // Esta selección da vacio

.data(grilla_circ_conc) // Estos son los datos

.enter() // Para cada entrada

.append("circle"); // Agregá un círculo

// 3. Le decimos a d3 cómo utilizar la información disponible en el arreglo

// para setear las propiedades cx, cy, r y fill del componente HTML circle

circulos.attr("cx", function(d) {return d.eje_x;} )

.attr("cy", function(d) {return d.eje_y;} )

.attr("r" , function(d) {return d.radio;} )

.style("fill", function(d) {return d.color;} )

// 4. Retornamos el canvas

return svg.node();

}

grilla_gradient_circles = {

const coleccion = [];

const filas = 17;

const columnas = 17;

const espacio = 15;

const radio = 5;

for (let fila = 0; fila < filas; fila++) {

for (let col = 0; col < columnas; col++) {

const tX = col / (columnas - 1); // horizontal (0 a 1)

const tY = fila / (filas - 1); // vertical (0 a 1)

// Interpolación horizontal para obtener el gradiente de colores (de negro a rojo, y de verde claro a amarillo):

const topColor = d3.interpolateLab("black", "red")(tX);

const bottomColor = d3.interpolateLab("#00ff00", "yellow")(tX);

// Interpolación vertical entre los colores definidos:

const finalColor = d3.interpolateLab(topColor, bottomColor)(tY);

const circle_elem = {

eje_x: col * espacio,

eje_y: fila * espacio,

radio: radio,

color: finalColor

};

coleccion.push(circle_elem);

}

return coleccion;

}

{

// 1. Creación de un área de dibujo (400x400 pixeles)

const svg = d3.create("svg")

.attr("width", 400)

.attr("height", 400);

// 2. Asociamos la colección de círculos a componentes gráficos "circle"

const circulos = svg.selectAll("circle")

.data(grilla_gradient_circles)

.enter()

.append("circle");

// 3. Definimos atributos de los círculos

circulos

.attr("cx", d => d.eje_x + 10) // offset horizontal

.attr("cy", d => d.eje_y + 30) // offset vertical

.attr("r", d => d.radio)

.attr("fill", d => d.color);

// 4. Retornamos el canvas

return svg.node();

}

grilla_increasing_radius = {

const coleccion = [];

const filas = 17;

const columnas = 17;

const espacio = 15;

// Posiciones de los centros:

const centroX = (columnas - 1) / 2;

const centroY = (filas - 1) / 2;

const maxDist = Math.sqrt(centroX**2 + centroY**2); // normalización

const radio_max = 5.2;

const radio_min = 0.5;

const exponent = 4; // Constante para hacer que el radio crezca exponencialmente

for (let fila = 0; fila < filas; fila++) {

for (let col = 0; col < columnas; col++) {

// Distancia al centro:

const dx = col - centroX;

const dy = fila - centroY;

const dist = Math.sqrt(dx * dx + dy * dy);

const t = 1 - dist / maxDist; // closer to center → t ≈ 1

// Creamos la variable exponencial:

const exponentialT = Math.pow(t, exponent);

// Interpolamos el radio usando la exponencial:

const radio = radio_min + exponentialT * (radio_max - radio_min);

coleccion.push({

eje_x: col * espacio,

eje_y: fila * espacio,

radio: Math.max(0, radio),

color: "black"

});

}

return coleccion;

}

// En este caso no logré hacer que el círculo del centro se vea de igual tamaño que los adyacentes a él, cosa que entiendo que ocurre porque la función llega al valor máximo seteado para el radio antes de llegar al píxel central, y entonces solo le asigna el radio máximo a él también.

{

// 1. Creación de un área de dibujo (400x400 pixeles).

// Si lo consideran necesario, pueden modificar el tamaño del canvas.

// También es posible que necesiten más de una celda para resolverlo.

const svg = d3.create("svg")

.attr("width",400)

.attr("height",400);

const circulos = svg.selectAll("circle")

.data(grilla_increasing_radius)

.enter()

.append("circle");

circulos

.attr("cx", d => d.eje_x + 10) // offset horizontal

.attr("cy", d => d.eje_y + 30) // offset vertical

.attr("r", d => d.radio)

.attr("fill", d => d.color);

// n. Retornamos el canvas.

return svg.node();

}

html`

</svg>

</html>`

{

// 1. Crear un área de dibujo (300x350 píxeles)

const svg = d3.create("svg")

.attr("width", 300)

.attr("height", 350);

// 2. Definir los parámetros de las filas y triángulos

const rows = 16;

const trianglesPerRow = 40;

const spacing = 10;

const centerY = 20;

const height = 5.5;

const base = 6;

// 3. Crear las filas de triángulos

for (let row = 0; row < rows; row++) {

const rowGroup = svg.append("g")

.attr("transform", `translate(0, ${row * 20})`);

for (let i = 0; i < trianglesPerRow; i++) {

const isUpward = i % 2 === 0;

const xOffset = i * spacing;

const points = isUpward

? `${xOffset} ${centerY - height}, ${xOffset + base} ${centerY + height}, ${xOffset - base} ${centerY + height}`

: `${xOffset} ${centerY + height}, ${xOffset - base} ${centerY - height}, ${xOffset + base} ${centerY - height}`;

rowGroup.append("polygon")

.attr("points", points)

.attr("fill", isUpward ? "yellow" : "none")

.attr("stroke", isUpward ? "blue" : "red")

.attr("stroke-width", 1.5);

}

// 4. Retornar el nodo SVG con los triángulos

return svg.node();

}

{

// 1. Crear un área de dibujo (300x300 pixeles).

const svg = d3.create("svg")

.attr("width", 300)

.attr("height", 300);

const rows = 7;

const cols = 7;

const r = 15; // radio de cada hexágono

const row_spacing = 7;

const hex_spacing = 4;

const dx = Math.cos(Math.PI / 6) * r * 2 + hex_spacing; // distancia horizontal

const dy = r * 1.5 + row_spacing; // distancia vertical

const strokeMin = 0.5;

const strokeMax = 3;

// 2. Definir la función hexágono para obtener los puntos

function hexagon(x, y, r) {

var x1 = x;

var y1 = y - r;

var x2 = x + Math.cos(Math.PI / 6) * r;

var y2 = y - Math.sin(Math.PI / 6) * r;

var x3 = x + Math.cos(Math.PI / 6) * r;

var y3 = y + Math.sin(Math.PI / 6) * r;

var x4 = x;

var y4 = y + r;

var x5 = x - Math.cos(Math.PI / 6) * r;

var y5 = y + Math.sin(Math.PI / 6) * r;

var x6 = x - Math.cos(Math.PI / 6) * r;

var y6 = y - Math.sin(Math.PI / 6) * r;

return `${x1},${y1} ${x2},${y2} ${x3},${y3} ${x4},${y4} ${x5},${y5} ${x6},${y6}`;

}

// 3. Crear la cuadrícula de hexágonos y aplicar translate para mejorar la visualización

const gridGroup = svg.append("g")

.attr("transform", "translate(50, 20)"); // Ajustamos la posición inicial

// 4. Iterar para crear los hexágonos

for (let row = 0; row < rows; row++) {

const strokeWidth = strokeMin + (strokeMax - strokeMin) * (row / (rows - 1)); // Incrementar el grosor

const y = row * dy;

for (let col = 0; col < cols; col++) {

const xOffset = (row % 2 === 0) ? 0 : dx / 2; // Desplazamiento horizontal alterno

const x = col * dx + xOffset;

gridGroup.append("polygon")

.attr("points", hexagon(x, y, r))

.attr("fill", "none")

.attr("stroke", "black")

.attr("stroke-width", strokeWidth);

}

// 5. Retornar el canvas con el grupo de hexágonos

return svg.node();

}

// Función para generar hexágonos en x,y de radio r.

function hexagon(x, y, r) {

var x1 = x;

var y1 = y - r;

var x2 = x + Math.cos(Math.PI / 6) * r;

var y2 = y - Math.sin(Math.PI / 6) * r;

var x3 = x + Math.cos(Math.PI / 6) * r;

var y3 = y + Math.sin(Math.PI / 6) * r;

var x4 = x;

var y4 = y + r;

var x5 = x - Math.cos(Math.PI / 6) * r;

var y5 = y + Math.sin(Math.PI / 6) * r;

var x6 = x - Math.cos(Math.PI / 6) * r;

var y6 = y - Math.sin(Math.PI / 6) * r;

var path = x1 + ',' + y1 + " " + x2 + ',' + y2 + " " + x3 + ',' + y3 + " " + x4 + ',' + y4 + " " + x5 + ',' + y5 + " " + x6 + ',' + y6;

return path;

}

Purpose-built for displays of data