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);
// Un cuadro de texto.
svg.append("text")
.attr("x", 50)
.attr("y", 128)
.text("Área de dibujo vacía");
// n. Retornamos el canvas.
return svg.node();
}
// Me tira error en const!
// 1. Creación de un área de dibujo (256x256 pixeles).
const svg = d3.create("svg")
.attr("width", 256)
.attr("height", 256);
// 2. Definimos el número de filas y columnas.
const rows = 16;
const cols = 16;
const circleRadius = 8; // Radio de los círculos
const colorScale = d3.scaleLinear()
.domain([0, rows * cols])
.range(["#ff0000", "#00ff00"]); // Degradado de rojo a verde
// 3. Dibujamos los círculos en una cuadrícula.
for (let i = 0; i < rows; i++) {
for (let j = 0; j < cols; j++) {
const colorIndex = i * cols + j;
svg.append("circle")
.attr("cx", (j + 0.5) * (256 / cols)) // Posición X
.attr("cy", (i + 0.5) * (256 / rows)) // Posición Y
.attr("r", circleRadius) // Radio del círculo
.attr("fill", colorScale(colorIndex)); // Color basado en el índice
}
}
// 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);
// Un cuadro de texto.
svg.append("text")
.attr("x", 50)
.attr("y", 128)
.text("Área de dibujo vacía");
// 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);
// Un cuadro de texto.
svg.append("text")
.attr("x", 50)
.attr("y", 128)
.text("Área de dibujo vacía");
// n. Retornamos el canvas.
return svg.node();
}
// Me tira error en const!
// 1. Creación de un área de dibujo (256x256 pixeles).
const svg = d3.create("svg")
.attr("width", 256)
.attr("height", 256);
// 2. Definimos las dimensiones y el número de filas y columnas.
const rows = 8; // Número de filas
const cols = 8; // Número de columnas
const triangleSize = 32; // Tamaño de cada triángulo
// 3. Función para dibujar un triángulo.
function drawTriangle(x, y, color) {
svg.append("polygon")
.attr("points", `${x},${y} ${x + triangleSize},${y} ${x + triangleSize / 2},${y - triangleSize}`)
.attr("fill", color)
.attr("stroke", "black")
.attr("stroke-width", 1);
}
// 4. Colores para los triángulos.
const colors = ["red", "orange", "yellow", "green", "blue", "purple"];
// 5. Dibujo de los triángulos en un patrón.
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
const x = col *triangleSize;
const y = row * triangleSize;
const colorIndex = (row + col) % colors.length; // Alternar colores
drawTriangle(x, y, colors[colorIndex]);
}
}
// 6. 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);
// Un cuadro de texto.
svg.append("text")
.attr("x", 50)
.attr("y", 128)
.text("Área de dibujo vacía");
// 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);
// Un cuadro de texto.
svg.append("text")
.attr("x", 50)
.attr("y", 128)
.text("Área de dibujo vacía");
// 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.
