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

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",200)

.attr("height",200);

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

.attr("height",300);

// 4. Retornamos el canvas

return svg.node();

}

circles_conc = {

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

var cantidad_circulos = 240;

var incremento = 15;

var rad = 5;

//var rad_dec = rad*0.25;

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

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

var h = 0

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

//rad = rad - rad_dec

var circle_elem = {

eje_x: i+incremento,

eje_y: j+incremento,

radio: rad,

//color: 'rgb(191, 60, 175)',

color: 'hsl(' + h + ', 80%, 50%)'

};

h=h+10

coleccion.push(circle_elem);

}

return coleccion

}

{

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

const svg = d3.create("svg")

.attr("width",300)

.attr("height",300);

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

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

.data(circles_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();

}

//var numberOfItems = 8;

var rainbow = new Rainbow();

rainbow.setNumberRange(1, 8);

rainbow.setSpectrum('red', 'black');

var s = '';

for (var i = 1; i <= 8; i++) {

var hexColour = rainbow.colourAt(i);

s += '#' + hexColour + ', ';

}

// y = X² entre [0..1]

//rad=[.04,0.0529,0.0784,0.1225,0.1936,0.3025,0.4624,0.6889,1,0.6889,0.4624,0.3025,0.1936,0.1225,0.0784,0.0529,0.04];

//0.01*(X^2)+0.19

rad=[0.2,0.23,0.28,0.35,0.44,0.55,0.68,0.83,1,0.83,0.68,0.55,0.44,0.35,0.28,0.23,0.2]

circ_var = {

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

var cantidad_circulos = 240;

var incremento = 15;

var radio = 5;

var amp=5

//var rad_dec = rad*0.25;

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

let punti=0

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

let puntj=0

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

radio = rad[punti]*rad[puntj]*amp

var circle_elem = {

eje_x: i+incremento,

eje_y: j+incremento,

radio: radio,

color: color_[0],

};

coleccion.push(circle_elem);

puntj=puntj+1

}

punti=punti+1

}

return coleccion

}

{

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

const svg = d3.create("svg")

.attr("width",300)

.attr("height",300);

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

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

.data(circ_var) // 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();

}

html`

</svg>

</html>`

html`

</svg>

</html>`

html`

</svg>

</html>`

html`

</svg>

</html>`

html`

</svg>

</html>`

triang_var = {

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

var cantidad_triangulos = 30;

var incremento = 10;

var radio = 5;

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

var values = [];

for(var i = 1; i < cantidad_triangulos; i = i+1) {

var x1=0

var x2=5

var x3=10

var y1=10*i

var y2=1.5+10*(i-1)+2

var y3= 10*i

for(var j = 1; j < cantidad_triangulos; j = j+1){

//const points = new Array(40, 100, 1);

//values.push( `${x1} ${y1}`+ "," +`${x2} ${y2}`+ "," +`${x3} ${y3}`);

var trian_elem = {

//"0 10,5 1.5,10 10" punto 1

//"10 10,15 1.5,20 10" punto 2

points:`${x1=x1+10+2} ${y1}`+ "," +`${x2=x2+10+2} ${y2}`+ "," +`${x3=x3+10+2} ${y3}`,

style: 'fill:yellow',

stroke: 'purple',

strokewidth: 1,

};

coleccion.push(trian_elem);

}

return coleccion

}

triang_inv = {

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

var cantidad_triangulos = 30;

var incremento = 10;

var radio = 5;

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

var values = [];

for(var i = 1; i < cantidad_triangulos; i = i+1) {

var x1=7

var x2=15

var x3=11

var y1=1.5+10*(i-1)+2

var y2=1.5+10*(i-1)+2

var y3= 10*i

for(var j = 1; j < cantidad_triangulos; j = j+1){

//const points = new Array(40, 100, 1);

//values.push( `${x1} ${y1}`+ "," +`${x2} ${y2}`+ "," +`${x3} ${y3}`);

var trian_elem = {

//"0 10,5 1.5,10 10" punto 1

//"10 10,15 1.5,20 10" punto 2

points:`${x1=x1+10+2} ${y1}`+ "," +`${x2=x2+10+2} ${y2}`+ "," +`${x3=x3+10+2} ${y3}`,

style: 'fill:yellow',

stroke: 'purple',

strokewidth: 1,

};

coleccion.push(trian_elem);

}

return coleccion

}

{

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

const svg = d3.create("svg")

.attr("width",300)

.attr("height",300);

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

var trian = svg.selectAll("polygon") // Esta selección da vacio

.data(triang_var) // 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

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

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

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

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

// 4. Retornamos el canvas

return svg.node();

}

{

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

const svg = d3.create("svg")

.attr("width",300)

.attr("height",300);

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

var trian = svg.selectAll("polygon") // Esta selección da vacio

.data(triang_inv) // 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

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

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

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

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

// 4. Retornamos el canvas

return svg.node();

}

triang_total = {

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

var cantidad_triangulos = 30;

var incremento = 10;

var radio = 5;

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

var values = [];

for(var i = 1; i < cantidad_triangulos; i = i+1) {

// triangulos apuntando arriba

var x1=0

var x2=5

var x3=10

var y1=10*i

var y2=1.5+10*(i-1)+2

var y3= 10*i

//triangulos apuntando hacia abajo

var x11=7

var x22=15

var x33=11

var y11=1.5+10*(i-1)+2

var y22=1.5+10*(i-1)+2

var y33= 10*i

for(var j = 1; j < cantidad_triangulos; j = j+1){

var trian_arriba = {

//"0 10,5 1.5,10 10" punto 1

//"10 10,15 1.5,20 10" punto 2

points:`${x1=x1+10+2} ${y1}`+ "," +`${x2=x2+10+2} ${y2}`+ "," +`${x3=x3+10+2} ${y3}`,

style: 'fill:yellow',

stroke: 'blue',

strokewidth: 1,

};

var trian_abajo = {

//"0 10,5 1.5,10 10" punto 1

//"10 10,15 1.5,20 10" punto 2

points:`${x11=x11+10+2} ${y11}`+ "," +`${x22=x22+10+2} ${y22}`+ "," +`${x33=x33+10+2} ${y33}`,

style: 'fill:yellow',

stroke: 'red',

strokewidth: 1,

};

coleccion1.push(trian_arriba);

coleccion1.push(trian_abajo);

}

return coleccion1

}

{

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

const svg = d3.create("svg")

.attr("width",300)

.attr("height",300);

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

var trian1 = svg.selectAll("polygon") // Esta selección da vacio

.data(triang_total) // 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

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

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

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

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

// 4. Retornamos el canvas

return svg.node();

}

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

</circle>`

{

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

.attr("height",300);

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

var hexa1 = svg.selectAll("polygon") // Esta selección da vacio

.data(hexagono_total) // 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

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

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

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

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

// n. Retornamos el canvas.

return svg.node();

}

hexagono_total = {

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

var cantidad_hexa = 30;

//var incremento = 10;

var radio = 10;

var ancho=0.2

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

var values = [];

for(var i = 1; i < cantidad_hexa; i = i+1) {

//var x1=20

if(i % 2 == 0) {

var x1=20 ;

}

// if the number is odd

else {

var x1=10 ;

}

var y1 =20*i

for(var j = 1; j < cantidad_hexa; j = j+1){

var hexa = {

//"0 10,5 1.5,10 10" punto 1

//"10 10,15 1.5,20 10" punto 2

points: hexagon(x1=x1+2*radio,y1,radio),

style: 'fill:none',

stroke: 'black',

strokewidth: ancho,

};

coleccion2.push(hexa);

}

ancho=ancho+0.1

}

return coleccion2

}

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

}

hexagon(20,20,10)

Purpose-built for displays of data