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

Javier Vasquez

Workspace

Published

Edited

Jun 11, 2021

Fork of Actividad 1: Introducción a Observable y D3

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

</circle>`

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

</circle>`

coleccion_de_circulos = [

{eje_x:128, eje_y:128, radio:120, color:"#007f01"},

{eje_x:128, eje_y:128, radio:80, color:"#800080"},

{eje_x:128 , eje_y:128, radio:40, color:"#ff0100"},

];

{

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

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

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

.data(coleccion_de_circulos) // 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 (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 coleccion_de_circulos = [];

const cantidad = 17;

const radio = 5;

const margen =5;

const x0 = 10;

const y0 = 10;

// 2.Defino los circulos

let verde = 0;

let rojo = 0;

let color = '000000';

let xi = 0;

let yi = 0;

for(let y=0; y<=cantidad-1; y++){

yi = y0 + (radio * 2+margen)*y;

verde = Math.floor(255 * y /(cantidad-1));

for(let x=0; x<=cantidad-1; x++){

rojo = Math.floor(255 * x / (cantidad-1));

color = `rgb(${rojo}, ${verde}, 00)`;

xi = x0 + (radio * 2+margen)*x;

coleccion_de_circulos.push({coordx:xi, coordy:yi, radio:radio, color:color})

}

//3. Agrego la colleccion de circulos al canvas

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

.data(coleccion_de_circulos) // Estos son los datos

.enter() // Para cada entrada

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

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

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

.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 (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 centro = 9

// 2. Defino funciones y constantes.

function distancia(x,y) {

const a = x - centro;

const b = y - centro;

return Math.sqrt( a*a + b*b );

}

const coleccion_de_circulos = [];

const cantidad = 2*centro-1;

const margen =5;

const separacion = 15

const x0 = 10;

const y0 = 10;

const color = '000000';

// 3.Defino los circulos

let xi = 0;

let yi = 0;

let radio = 1;

for(let y=0; y<=cantidad-1; y++){

yi = y0 + (separacion)*y;

for(let x=0; x<=cantidad-1; x++){

if (x==centro && y==centro){

radio=5}

else {

radio = 5/distancia(x,y)

}

xi = x0 + (separacion)*x;

coleccion_de_circulos.push({coordx:xi, coordy:yi, radio:radio, color:color})

}

//4. Agrego la colleccion de circulos al canvas

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

.data(coleccion_de_circulos) // Estos son los datos

.enter() // Para cada entrada

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

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

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

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

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

// 5. Retornamos el canvas.

return svg.node();

}

{

// 1. Creación de un área de dibujo (256x256 pixeles).

const svg = d3.create("svg")

.attr("width",255)

.attr("height",255);

// 2. Definicion de variables

const triangulos = [];

let x = 5;

let y = 1;

const interlineado = 16;

const cantidad = 16;

//3. Triangulos hacia abajo

while(y < 256){

while(x < 256){

let p1 = `${x + 5}, ${y + 10}`;

let p2 = `${x}, ${y}`;

let p3 = `${x + 10}, ${y}`;

let puntos = `${p1} ${p2} ${p3}`;

triangulos.push({points:puntos, fill:'#ffffff', stroke:'#ff0000'})

x += interlineado;

}

x = 5;

y += interlineado;

}

x = -3;

y = 1;

//4. Triangulos hacia arriba

while(y < 256){

while(x < 256){

let p1 = `${x + 5}, ${y}`;

let p2 = `${x}, ${y + 10}`;

let p3 = `${x + 10}, ${y + 10}`;

let puntos = `${p1} ${p2} ${p3}`;

triangulos.push({points:puntos, fill:'#ffff00', stroke:'#0000ff'})

x += interlineado;

}

x = -3;

y += interlineado;

}

//5. Agrego los triangulos

var triangulo = svg.selectAll("polygon")

.data(triangulos)

.enter()

.append("polygon");

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

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

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

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

// 6. Retornamos el canvas.

return svg.node();

}

{

// 1. Creación de un área de dibujo (256x256 pixeles).

const svg = d3.create("svg")

.attr("width",256)

.attr("height",256);

// 2. Definicion de constantes

const cantidad = 7;

const coleccion = [];

const x0=12;

const y0=12;

let paso = 30;

let separacion = 2;

//3. Definicion de los hexagonos

for(let y=0; y<=cantidad; y++){

let yi = y0 + (paso+separacion-1)*y;

for(let x=0; x<=cantidad-1; x++){

let xi = x0 + (paso+ separacion)*x + (paso+separacion)*((y+1) % 2)/2+3;

coleccion.push({points:hexagon(xi, yi, paso/2+1), stroke:"#000000", fill:"#ffffff", ancho: y/2})

}

//4. Agrego la colleccion de circulos al canvas

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

.data(coleccion) // Estos son los datos

.enter() // Para cada entrada

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

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

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

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

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

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