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>`
coleccion_de_circulos = [
{eje_x:150 , eje_y:150, radio:100, color:"green"},
{eje_x:150, eje_y:150, radio:70, color:"purple"},
{eje_x:150, eje_y:150, radio:40, color:"red"}
];
dibujar = function(coleccion) {
// 1. Creación de un área de dibujo (256x256 pixeles)
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")
.data(coleccion)
.enter()
.append("circle");
// 3. Le decimos a d3 cómo utilizar la información del 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. Agregamos el texto "a)" arriba a la izquierda
svg.append("text")
.attr("x", 0)
.attr("y", 12)
.text("a)")
.attr("font-size", "14px")
.attr("font-family", "sans-serif");
// 5. Retornamos el canvas
return svg.node();
}
viewof dibujo = dibujar(coleccion_de_circulos)
{
// 1. Creación de un área de dibujo (256x256 pixeles).
const svg = d3.create("svg")
.attr("width", 256)
.attr("height", 256);
// 2. Parámetros de la grilla
const filas = 16;
const columnas = 16;
const espaciado = 16;
const radio = 5;
// 3. Generación de círculos
let coleccion = [];
for (let i = 0; i < filas; i++) {
for (let j = 0; j < columnas; j++) {
let x = j * espaciado + espaciado / 2;
let y = i * espaciado + espaciado / 2;
let r = Math.round((j / (columnas - 1)) * 255);
let g = Math.round((i / (filas - 1)) * 255);
let b = 0;
let color = `rgb(${r},${g},${b})`;
coleccion.push({ eje_x: x, eje_y: y, radio: radio, color: color });
}
}
// 4. Dibujar los círculos
svg.selectAll("circle")
.data(coleccion)
.enter()
.append("circle")
.attr("cx", d => d.eje_x)
.attr("cy", d => d.eje_y)
.attr("r", d => d.radio)
.style("fill", d => d.color);
// 5. Retornamos el canvas
return svg.node();
}
// me costo hacer el degradado para que se vea como en el original
{
// 1. Creación de un área de dibujo (256x256 pixeles).
const svg = d3.create("svg")
.attr("width", 256)
.attr("height", 256);
// 2. definimos parametros de la grilla
const filas = 20;
const columnas = 20;
const espaciado = 12;
// 3. calculo distancia maxima y el centro
const centro_x = (columnas - 1) * espaciado / 2;
const centro_y = (filas - 1) * espaciado / 2;
const max_dist = Math.sqrt(centro_x**2 + centro_y**2);
const coleccion = [];
// 4. recorro la grilla
for (let i = 0; i < filas; i++) {
for (let j = 0; j < columnas; j++) {
const x = j * espaciado + espaciado / 2;
const y = i * espaciado + espaciado / 2;
const dx = x - centro_x;
const dy = y - centro_y;
const dist = Math.sqrt(dx*dx + dy*dy);
const factor = 1 - dist / max_dist; // 1 en el centro, 0 en los bordes
let radio = 0.5 + factor * 1.5; // radio normal entre 0.5 y 2
// 5. dibujo los ciruclos
if (
(i === 9 && j === 10) || // arriba
(i === 10 && j === 9) || // izquierda
(i === 10 && j === 10) || // centro
(i === 10 && j === 11) || // derecha
(i === 11 && j === 10) // abajo
) {
radio = 4;
}
const gris = Math.round(255 * (1 - factor));
const color = `rgb(${gris},${gris},${gris})`;
coleccion.push({ eje_x: x, eje_y: y, radio: radio, color: color });
}
}
svg.selectAll("circle")
.data(coleccion)
.enter()
.append("circle")
.attr("cx", d => d.eje_x)
.attr("cy", d => d.eje_y)
.attr("r", d => d.radio)
.style("fill", d => d.color);
// 6. Retornamos el canvas
return svg.node();
}
// 1. Definir grilla y medidas
triangles = {
const dx = 12;
const dy = 12;
const spacingY = 4; // espacio entre filas
const rows = 16;
const cols = 32;
const triangles = [];
// 2. Recorrer la grilla
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
const offsetX = col * dx;
const offsetY = row * (dy + spacingY); // espacio entre filas
let p1, p2, p3, fill, stroke;
//3. Hacer triangulo
if (col % 2 === 0) {
// Punta hacia arriba es borde azul y relleno amarillo
p1 = [offsetX + dx / 2, offsetY];
p2 = [offsetX, offsetY + dy];
p3 = [offsetX + dx, offsetY + dy];
fill = "yellow";
stroke = "blue";
} else {
// Punta hacia abajo con borde rojo y relleno blanco
p1 = [offsetX, offsetY];
p2 = [offsetX + dx, offsetY];
p3 = [offsetX + dx / 2, offsetY + dy];
fill = "white";
stroke = "red";
}
// 4. Guardar el triangulo
triangles.push({
points: [p1, p2, p3],
fill: fill,
stroke: stroke,
strokeWidth: 1.5
});
}
}
return triangles;
}
{
// 1. Creación de un área de dibujo (256x256 pixeles).
const svg = d3.create("svg")
.attr("width", 256)
.attr("height", 256);
// 2. Dibujar todos los triangulos
svg.selectAll("polygon")
.data(triangles)
.enter()
.append("polygon")
.attr("points", d => d.points.map(p => p.join(",")).join(" "))
.attr("fill", d => d.fill)
.attr("stroke", d => d.stroke)
.attr("stroke-width", d => d.strokeWidth);
// 3. 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. Función que genera los puntos de un hexágono centrado en (x, y) con radio r
function hexagon(x, y, r) {
const x1 = x;
const y1 = y - r;
const x2 = x + Math.cos(Math.PI / 6) * r;
const y2 = y - Math.sin(Math.PI / 6) * r;
const x3 = x + Math.cos(Math.PI / 6) * r;
const y3 = y + Math.sin(Math.PI / 6) * r;
const x4 = x;
const y4 = y + r;
const x5 = x - Math.cos(Math.PI / 6) * r;
const y5 = y + Math.sin(Math.PI / 6) * r;
const x6 = x - Math.cos(Math.PI / 6) * r;
const y6 = y - Math.sin(Math.PI / 6) * r;
return `${x1},${y1} ${x2},${y2} ${x3},${y3} ${x4},${y4} ${x5},${y5} ${x6},${y6}`;
}
// 3. Tamaño de la grilla
const filas = 7;
const columnas = 7;
const r = 16;
// 4. Centrado del patron para que no se vea completo
const dx = Math.cos(Math.PI / 6) * r * 2 * 1.15;
const dy = r * 1.5 * 1.1;
const patternWidth = dx * (columnas - 1) + r * 2;
const patternHeight = dy * (filas - 1) + r * 2;
const offsetX0 = (256 - patternWidth) / 2;
const offsetY0 = (256 - patternHeight) / 2;
// 5. Dibujar los hexágonos
for (let row = 0; row < filas; row++) {
for (let col = 0; col < columnas; col++) {
const offsetX = col * dx + (row % 2 === 1 ? dx / 2 : 0);
const offsetY = row * dy;
// Degradado en grosor del trazo según la fila (de 0.2 a 2.5 aprox)
const strokeWidth = 0.2 + (row / (filas - 1)) * 2.3;
svg.append("polygon")
.attr("points", hexagon(offsetX0 + offsetX, offsetY0 + offsetY, r))
.attr("fill", "white")
.attr("stroke", "black")
.attr("stroke-width", strokeWidth);
}
}
// 6. Retornar el canvas
return svg.node();
}
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.
