html`<svg width="100" height="100">
<circle cx="40" cy="60" r="20" style="fill:red;">
</circle>`
html`<svg width="110" height="110">
<polygon points="50,5 20,99 95,39 5,39 80,99" style="fill:blue;stroke:red;stroke-width:5;fill-rule:evenodd;" />
</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",256)
.attr("height",256);
svg.append("circle")
.attr("cx", 128)
.attr("cy", 128)
.attr("r", 120)
.attr("fill", "green");
svg.append("circle")
.attr("cx", 128)
.attr("cy", 128)
.attr("r", 80)
.attr("fill", "purple");
svg.append("circle")
.attr("cx", 128)
.attr("cy", 128)
.attr("r", 40)
.attr("fill", "red");
// n. Retornamos el canvas.
return svg.node();
}
//Solucion de clase parte 1 - crear el arreglo
conjunto_circulos = {
var coleccion = [];
var cantidad_circulos = 8;
var rad = 100;
var cx = 100;
var cy = 100;
var color_circle = ['green', 'purple', 'red','yellow']
for(var r=1; r< cantidad_circulos+1; r =r+1){
var circle_elem ={ejex: cx, ejey: cy, radio: rad, color: color_circle[(r-1)%color_circle.length]}
rad = rad/2
coleccion.push(circle_elem)
}
return coleccion
}
//Solucion de clase parte 2 - primitivas y visualizacion
{
// 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);
var circulos = svg.selectAll("circle").data(conjunto_circulos).enter().append("circle");
circulos.attr("cx",function(d){return d.ejex;})
.attr("cy",function(d){return d.ejey;})
.attr("r",function(d){return d.radio;})
.style("fill",function(d){return d.color;})
// n. 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 gridSize = 16;
const radius = 6;
for (let row = 0; row < gridSize; row++) {
for (let col = 0; col < gridSize; col++) {
const cx = col * 16 + 8;
const cy = row * 16 + 8;
const tX = col / (gridSize - 1); // 0 → izquierda, 1 → derecha
const tY = row / (gridSize - 1); // 0 → arriba, 1 → abajo
// Interpolamos los colores de izquierda a derecha
const topColor = d3.interpolateRgb("black", "red")(tX); // arriba
const bottomColor = d3.interpolateRgb("green", "yellow")(tX); // abajo
// Luego interpolamos entre arriba y abajo
const finalColor = d3.interpolateRgb(topColor, bottomColor)(tY);
svg.append("circle")
.attr("cx", cx)
.attr("cy", cy)
.attr("r", radius)
.attr("fill", finalColor);
}
}
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 gridsize = 17;
for (let row = 0; row < gridsize; row++) {
for (let col = 0; col < gridsize; col++) {
const cx = col * 15 + 15 / 2;
const cy = row * 15 + 15 / 2;
// distancia al centro
const dx = cx - 128;
const dy = cy - 128;
const distance = Math.sqrt(dx * dx + dy * dy);
// escala inversa: más cerca del centro → radio más grande
const maxRadius = 6;
const radius = maxRadius * Math.exp(-0.02 * distance); // decae exponencialmente
svg.append("circle")
.attr("cx", cx)
.attr("cy", cy)
.attr("r", radius)
.attr("fill", "black");
}
}
// n. Retornamos el canvas.
return svg.node();
}
{
const svg = d3.create("svg")
.attr("width", 256)
.attr("height", 256);
const gridsize = 32;
const size = 6; // tamaño del triángulo
for (let row = 0; row < gridsize; row++) {
for (let col = 0; col < gridsize; col++) {
const cx = col * 8 + 8 / 2;
const cy = row * 16 + 16 / 2;
let points, color, border;
;
if ((col) % 2 === 0) {
// Triángulo hacia arriba
points = `${cx},${cy - size} ${cx - size},${cy + size} ${cx + size},${cy + size}`;
color = "yellow";
border = "blue";
} else {
// Triángulo hacia abajo
points = `${cx},${cy + size} ${cx - size},${cy - size} ${cx + size},${cy - size}`;
color = "white"
border = "red"
}
svg.append("polygon")
.attr("points", points)
.attr("fill", color)
.attr("stroke", border)
.attr("stroke-width", 1);
}
}
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 gridsize = 7;
const size = 17;
for (let row = 0; row < gridsize; row++) {
for (let col = 0; col < gridsize; col++) {
let cx = col * 34 + 17;
let cy = row * 34 + 17;
let x, y;
;
if (row % 2 !== 0) {
cx += 17;
}
const weight = 0.5 + row/2
svg.append("polygon")
.attr("points", hexagon(cx, cy, size))
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", weight)
}
}
// 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.
