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

Ezequiel Rodriguez

Workspace

Public

Edited

Apr 18

Fork of 1.5 TP-3: Introducción a Observable y D3

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 (512x90 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();

}

{

// 1. Creación de un área de dibujo (512x90 pixeles)

const svg = d3.create("svg")

.attr("width",400)

.attr("height",400);

const colsB = 17;

const rowsB = 17;

const spacing = 16;

const radius = 6;

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

for (let j = 0; j < rowsB; j++) {

const cx = i * spacing + spacing;

const cy = j * spacing + spacing;

const r = Math.floor((i / (colsB - 1)) * 255);

const g = Math.floor((j / (rowsB - 1)) * 255);

const b = 0;

svg.append("circle")

.attr("cx", cx)

.attr("cy", cy)

.attr("r", radius)

.attr("fill", `rgb(${r},${g},${b})`);

}

// 4. Retornamos el canvas

return svg.node();

}

{

// 1. Creación de un área de dibujo (256x256 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",256)

.attr("height",256);

const colsC = 17;

const rowsC = 17;

const spacingC = 15;

const cxCenter = (colsC - 1) * spacingC / 2;

const cyCenter = (rowsC - 1) * spacingC / 2;

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

for (let j = 0; j < rowsC; j++) {

const cx = i * spacingC;

const cy = j * spacingC;

const dx = cx - cxCenter;

const dy = cy - cyCenter;

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

const maxDist = Math.sqrt(cxCenter * cxCenter + cyCenter * cyCenter);

const radius = 6.0 * (1 - (dist / maxDist)**0.33);

svg.append("circle")

.attr("cx", cx + spacingC / 2)

.attr("cy", cy + spacingC / 2)

.attr("r", radius)

.attr("fill", "black");

}

// n. Retornamos el canvas.

return svg.node();

}

html`

</svg>

</html>`

{

// 1. Creación de un área de dibujo (512x90 pixeles)

const svg = d3.create("svg")

.attr("width",400)

.attr("height",400);

const colsD = 33, rowsD = 16;

const stepX = 12, stepY = 20;

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

for (let j = 0; j < rowsD; j++) {

const x = i * stepX;

const y = j * stepY;

const isUp = i % 2 === 0;

const alt = (i) % 2 === 0;

const points = isUp

? `${x + 8},${y} ${x},${y + 14} ${x + 16},${y + 14}`

: `${x + 8},${y + 14} ${x},${y} ${x + 16},${y}`;

svg.append("polygon")

.attr("points", points)

.attr("fill", alt ? "yellow" : "white")

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

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

}

// 4. Retornamos el canvas

return svg.node();

}

{

// 1. Creación de un área de dibujo (256x256 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",256)

.attr("height",256);

const rHex = 15;

const dx = Math.cos(Math.PI / 6) * rHex * 2 + 1; //

const dy = rHex * 1.5 + 1; //

const colsD = 7, rowsD = 7;

for (let j = 0; j < rowsD; j++) {

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

const x = i * dx + (j % 2 === 0 ? dx / 2 : 0);

const y = j * dy;

const thickness = 0.5 + 2.5 * (j / (rowsD - 1));

svg.append("polygon")

.attr("points", hexagon(x, y, 0.85*rHex))

.attr("fill", "white")

.attr("stroke", "black")

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

}

// n. Retornamos el canvas.

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

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more