coleccion_de_circulos_a = [
{eje_x:128 , eje_y:128, radio:118, color:"#19753e"},
{eje_x:128, eje_y:128, radio:78, color:"#800080"},
{eje_x:128, eje_y:128, radio:38, color:"#ff0000"},
];
{
// 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_a) // 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;});
// n. Retornamos el canvas.
return svg.node();
}
{
const width = 256;
const height = 256;
const rows = 17;
const cols = 17;
const padding = 2;
const radius = (width / cols - padding) / 2;
}
{
const width = 256;
const height = 256;
const rows = 17;
const cols = 17;
const padding = 2;
const radius = 5;
const svg = d3.create("svg")
.attr("width",width)
.attr("height",height);
const xScale = d3.scaleLinear().domain([0, cols - 1]).range([radius, width - radius]);
const yScale = d3.scaleLinear().domain([0, rows - 1]).range([radius, height - radius]);
for (let j = 0; j < rows; j++) {
for (let i = 0; i < cols; i++) {
const x = xScale(i);
const y = yScale(j);
// Colores interpolados combinando rojo y verde con base en la posición
const r = i / (cols - 1);
const g = j / (rows - 1);
const color = d3.rgb(r * 255, g * 255, 0); // rojo-verde-amarillo
svg.append("circle")
.attr("cx", x)
.attr("cy", y)
.attr("r", radius)
.attr("fill", color.toString());
}
}
// n. Retornamos el canvas.
return svg.node();
}
{
const width = 256;
const height = 256;
const rows = 17;
const cols = 17;
const padding = 2;
const svg = d3.create("svg")
.attr("width",width)
.attr("height",height);
const xScale = d3.scaleLinear().domain([0, cols - 1]).range([0, width]);
const yScale = d3.scaleLinear().domain([0, rows - 1]).range([0, height]);
const centerX = width / 2;
const centerY = height / 2;
const maxDistance = Math.hypot(centerX, centerY); // distancia máxima posible
for (let j = 0; j < rows; j++) {
for (let i = 0; i < cols; i++) {
const x = xScale(i);
const y = yScale(j);
// Distancia desde el centro
const dx = x - centerX;
const dy = y - centerY;
const distance = Math.hypot(dx, dy);
const norm = 1 - 1.1*distance / maxDistance; // más cerca del centro => valor mayor
const radius = 0.1 + norm * 3; // radio ajustable
svg.append("circle")
.attr("cx", x)
.attr("cy", y)
.attr("r", radius)
}
}
// n. Retornamos el canvas.
return svg.node();
}
{
const width = 256;
const height = 256;
const rows = 17;
const cols = 30;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const cellWidth = width / cols;
const side = cellWidth * 1.3; // casi pegados
const triangleHeight = Math.sqrt(3) / 2 * side;
const cellHeight = height / rows;
const offsetX = (width - cols * cellWidth) / 2;
const offsetY = (height - rows * cellHeight) / 2;
for (let j = 0; j < rows; j++) {
for (let i = 0; i < cols; i++) {
const cx = offsetX + i * cellWidth + cellWidth / 2;
const cy = offsetY + j * cellHeight + cellHeight / 2;
const pointingUp = (i + j) % 2 === 0;
const points = pointingUp
? [
[cx, cy - triangleHeight / 2],
[cx - side / 2, cy + triangleHeight / 2],
[cx + side / 2, cy + triangleHeight / 2]
]
: [
[cx, cy + triangleHeight / 2],
[cx - side / 2, cy - triangleHeight / 2],
[cx + side / 2, cy - triangleHeight / 2]
];
const pathData = d3.line()(points.concat([points[0]]));
svg.append("path")
.attr("d", pathData)
.attr("fill", pointingUp ? "yellow" : "white")
.attr("stroke", pointingUp ? "blue" : "hotpink")
.attr("stroke-width", 1.3);
}
}
return svg.node();
}
{
const width = 256;
const height = 256;
const r = 14; // radio del hexágono
const rows = 7;
const cols = 7;
const hexHeight = 2.4 * r;
const hexWidth = Math.cos(Math.PI / 6) * 2.4 * r; // ancho entre vértices horizontales
const vertSpacing = 0.75 * hexHeight;
const horizSpacing = hexWidth;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const offsetX = (width - (cols - 1) * horizSpacing) / 2;
const offsetY = (height - (rows - 1) * vertSpacing) / 2;
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;
return `${x1},${y1} ${x2},${y2} ${x3},${y3} ${x4},${y4} ${x5},${y5} ${x6},${y6}`;
}
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
const x = offsetX + col * horizSpacing + (row % 2 === 1 ? horizSpacing / 2 : 0);
const y = offsetY + row * vertSpacing;
const strokeWidth = 0.4 + 0.2 * (col + row);
svg.append("polygon")
.attr("points", hexagon(x, y, r))
.attr("fill", "white")
.attr("stroke", "black")
.attr("stroke-width", strokeWidth);
}
}
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.
