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

arivas97

Workspace

Public

Edited

Apr 22

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

}

function grilla_circ() {

var coleccion = [];

var filas = 17;

var columnas = 17;

for (var ix = 0; ix < filas; ix++) {

for (var iy = 0; iy < columnas; iy++) {

var red = Math.round((iy / (columnas - 1)) * 255);

var green = Math.round((ix / (columnas - 1)) * 255);

var color = `rgb(${red},${green},0)`;

var circle_elem = {

eje_x: (iy * 20) + 5,

eje_y: (ix * 20) + 15,

radio: 5,

color: color

};

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

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`

<defs>

</g>

</defs>

//Fila 1

//Fila 2

//Fila 3

//Fila 4

//Fila 5

//Fila 6

//Fila 7

//Fila 8

//Fila 9

//Fila 10

//Fila 11

//Fila 12

//Fila 13

//Fila 14

//Fila 15

</g>

</svg>

</html>`

{

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

const svg = d3.create("svg")

.attr("width",400)

.attr("height",400);

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

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