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", 300)
.attr("height", 300);
const cx = 150;
const cy = 150;
// Círculo exterior (verde)
svg.append("circle")
.attr("cx", cx)
.attr("cy", cy)
.attr("r", 100)
.attr("fill", "green");
// Círculo medio (violeta)
svg.append("circle")
.attr("cx", cx)
.attr("cy", cy)
.attr("r", 70)
.attr("fill", "purple");
// Círculo interior (rojo)
svg.append("circle")
.attr("cx", cx)
.attr("cy", cy)
.attr("r", 40)
.attr("fill", "red");
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 spacing = 15;
const radius = 5;
const gridSize = 17;
for (let row = 0; row < gridSize; row++) {
for (let col = 0; col < gridSize; col++) {
// Normalizamos coordenadas (valores entre 0 y 1)
const tCol = col / (gridSize - 1);
const tRow = row / (gridSize - 1);
// Interpolamos colores horizontales en la fila superior e inferior
const topColor = d3.interpolateRgb("#000000", "#ff0000")(tCol); // negro → rojo
const bottomColor = d3.interpolateRgb("#00ff00", "#ffff00")(tCol); // verde → amarillo
// Interpolamos verticalmente entre esos dos colores
const finalColor = d3.interpolateRgb(topColor, bottomColor)(tRow);
svg.append("circle")
.attr("cx", col * spacing + spacing / 2)
.attr("cy", row * spacing + spacing / 2)
.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", 512)
.attr("height", 512);
const gridSize = 33;
const spacing = 16;
const center = (gridSize - 1) / 2;
const maxDistance = Math.sqrt(2) * center;
for (let row = 0; row < gridSize; row++) {
for (let col = 0; col < gridSize; col++) {
const dx = col - center;
const dy = row - center;
const distance = Math.sqrt(dx * dx + dy * dy);
const t = distance / maxDistance; // normalizamos entre 0 y 1
const radius = 6 * (1 - t); // más lejos = más chico
svg.append("circle")
.attr("cx", col * spacing + spacing / 2)
.attr("cy", row * spacing + spacing / 2)
.attr("r", radius)
.attr("fill", "black");
}
}
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", 512)
.attr("height", 512);
const trianglesPerRow = 20;
const size = 12; // tamaño del triángulo
const spacing = 24; // espacio entre triángulos
const rows = 16;
// Función para crear una fila de triángulos
function createRow(yOffset) {
const group = svg.append("g").attr("transform", `translate(0, ${yOffset})`);
for (let col = 0; col < trianglesPerRow; col++) {
const x = col * spacing;
const esTrianguloArriba = col % 2 === 0;
let points;
let fill;
let stroke;
if (esTrianguloArriba) {
// Triángulo apuntando hacia arriba
points = [
[x + size / 2, 0],
[x, size],
[x + size, size]
];
fill = "yellow";
stroke = "blue";
} else {
// Triángulo apuntando hacia abajo
points = [
[x, 0],
[x + size, 0],
[x + size / 2, size]
];
fill = "white";
stroke = "red";
}
group.append("polygon")
.attr("points", points.map(p => p.join(",")).join(" "))
.attr("fill", fill)
.attr("stroke", stroke)
.attr("stroke-width", 1.2);
}
}
// Repetimos la fila 16 veces
for (let i = 0; i < rows; i++) {
createRow(i * spacing);
}
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", 512)
.attr("height", 512);
const rows = 10;
const cols = 8;
const radius = 20; // un poco más chico para que entren con espacio
const spacingFactor = 1.2; // Aumenta la separación
const dx = radius * Math.sqrt(3) * spacingFactor;
const dy = radius * 1.5 * spacingFactor;
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;
}
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
const offsetX = (row % 2) * (dx / 2);
const cx = col * dx + offsetX + 32;
const cy = row * dy + 32;
const strokeWidth = 0.5 + (row / (rows - 1)) * 3;
svg.append("polygon")
.attr("points", hexagon(cx, cy, radius))
.attr("fill", "none")
.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.
