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

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

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

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

</polygon>`

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

}

grilla_circ_b = {

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

var rad = 7.5;

var tamanio_lado = 17

;

var pos_y = 0;

var paleta_abajo = d3.scaleLinear().domain([0,16]).range(["#05FA02", "#FAFA00"]);

var paleta_arriba = d3.scaleLinear().domain([0,16]).range(["#050500", "#FA0402"]);

for(let j = 0; j < tamanio_lado - 1; ++j){

pos_y += 1/tamanio_lado

var pos_x = 1/(tamanio_lado*2)

for(let i = 0; i < tamanio_lado - 1; ++i){

pos_x += 1/tamanio_lado

var paleta = d3.scaleLinear().domain([0,16]).range([paleta_arriba(i), paleta_abajo(i)])

var circle_elem = {

eje_x: pos_x * 400,

eje_y: pos_y * 400,

radio: rad,

color: paleta(j),

};

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_b) // 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_circ_c = {

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

var tamanio_lado = 17;

var pos_y = 1/(tamanio_lado*2);

var mitad = (tamanio_lado + 1) / 2; //Posición intermedia

var radio_mitad = 10

var factor_reduccion_inicial = 1 //DEBE SER IGUAL O MAYOR A 1

for(let j = 1; j <= tamanio_lado; ++j){

pos_y += 1/tamanio_lado

var pos_x = 1/(tamanio_lado*2)

for(let i = 1; i <= tamanio_lado; ++i){

pos_x += 1/tamanio_lado

var rad = radio_mitad / (1 + Math.sqrt((j - mitad)**2 + (i - mitad)**2))

var circle_elem = {

eje_x: pos_x * 400,

eje_y: pos_y * 400,

radio: rad,

};

coleccion.push(circle_elem);

}

return coleccion;

}

{

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

const svg = d3.create("svg")

.attr("width",500)

.attr("height",500);

// 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_c) // 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", "black" )

// 4. Retornamos el canvas

return svg.node();

}

function puntos_triangulo(lado, base_x, base_y, vertical) {

if (vertical) {

var altura = Math.sqrt(lado**2 - (lado/2)**2);

var punta_der = `${lado + base_x} ${lado + base_y}`;

var punta_medio = `${lado/2 + base_x} ${lado - altura + base_y}`;

var punta_izq = `${base_x} ${lado + base_y}`;

} else {

var altura = Math.sqrt(lado**2 - (lado/2)**2);

var punta_der = `${lado + base_x} ${base_y - altura + lado}`;

var punta_medio = `${lado/2 + base_x} ${lado + base_y}`;

var punta_izq = `${base_x} ${base_y - altura + lado}`;

}

return(punta_der + ', ' + punta_medio + ', ' + punta_izq);

}

html`

</svg>

</html>`

grilla_triangulos = {

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

var lado = 20; // Tamaño del lado de cada triangulo

var pos_y = 0; //Posicion inicial en y

var separacion = lado * 2/3; // Separación entre triangulos vecinos horizontalmente

var cantidad_filas = 100; // Cantidad de filas de triangulos

var cantidad_columnas = 100; // Cantidad de columnas de triangulos

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

var pos_x = 0

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

if (i % 2 === 0) {

var color_fill = "#FFFF02"

var color_stroke = "#1A1BFF"

var vertical = true

} else {

var color_fill = "white"

var color_stroke = "#FF0000"

var vertical = false

}

var triangulos_elem = {

points: puntos_triangulo(lado, pos_x, pos_y, vertical),

color_fill: color_fill,

color_stroke: color_stroke

};

coleccion.push(triangulos_elem);

pos_x += separacion // Me corro hacia la columna de la derecha

};

pos_y += lado // Me corro hacia la fila de abajo

};

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 triangulos = svg.selectAll("polygon") // Esta selección da vacio

.data(grilla_triangulos) // Estos son los datos

.enter() // Para cada entrada

.append("polygon"); // 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

triangulos.attr("points", function(d) {return d.points;} )

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

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

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

.style("stroke", function(d) {return d.color_stroke;} )

.style("stroke-width", 1 )

// 4. Retornamos el canvas

return svg.node();

}

grilla_hexagonos = {

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

var tamanio_lado = 7;

var radio = 20;

var pos_y = radio * 2;

var ancho = 1

for(let j = 1; j <= tamanio_lado; ++j){

if (j % 2 === 0){

var pos_x = radio * 3

} else {

var pos_x = radio * 2

}

for(let i = 1; i <= tamanio_lado; ++i){

var hexagono_elem = {

points: hexagon(pos_x, pos_y, radio),

ancho: ancho

};

coleccion.push(hexagono_elem);

pos_x += radio * 2

}

pos_y += radio * 2

ancho += 0.5

}

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 hexagonos = svg.selectAll("polygon") // Esta selección da vacio

.data(grilla_hexagonos) // Estos son los datos

.enter() // Para cada entrada

.append("polygon"); // 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

hexagonos.attr("points", function(d) {return d.points;} )

.style("fill", "white" )

.style("stroke", "black" )

.style("stroke-width", function(d) {return d.ancho;} )

// 4. 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;

}

html`

</svg>

</html>`

Purpose-built for displays of data