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).
const svg = d3.create("svg")
.attr("width", 256)
.attr("height", 256);
// Definimos los radios de los círculos
const outerRadius = 120;
const middleRadius = 80;
const innerRadius = 40;
// Dibujamos los círculos concéntricos
svg.append("circle")
.attr("cx", 128)
.attr("cy", 128)
.attr("r", outerRadius)
.attr("fill", "green");
svg.append("circle")
.attr("cx", 128)
.attr("cy", 128)
.attr("r", middleRadius)
.attr("fill", "purple");
svg.append("circle")
.attr("cx", 128)
.attr("cy", 128)
.attr("r", innerRadius)
.attr("fill", "red");
// n. Retornamos el canvas.
return svg.node();
}
grilla_circ_conc = {
var coleccion = [] // Arreglo de datos a retornar
var cant_de_circulos = 90;
var radio = 100;
var cx = 100
var cy = 100
var color_circ = ['green','purple','red','blue','orange']
for (var r=1; r < cant_de_circulos+1; r = r+1){
var circle_elem = {eje_x:cx,eje_y:cy, radio:radio, color:color_circ[[r-1]%5]};
radio = radio*0.8;
coleccion.push(circle_elem);
}
return coleccion;
}
{
// 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 coleccion a los circulos
var circulos = svg.selectAll("circle").data(grilla_circ_conc).enter().append('circle') //aca le estoy diciendo que cree circulos con los datos de la grilla anterior.
//3. Definimos los atributos
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();
}
{
// 1. Creación de un área de dibujo (256x256 pixeles).
const svg = d3.create("svg")
.attr("width", 256)
.attr("height", 256);
// Definimos el tamaño de la cuadrícula, el radio de los círculos y el espacio entre ellos
const gridSize = 17;
const circleRadius = 6;
const circleSpacing = 5;
// Función para generar un color interpolado entre cuatro colores
function interpolateColor(x, y, gridSize) {
const topLeft = { r: 80, g: 80, b: 255 }; // Azul
const topRight = { r: 255, g: 0, b: 0 }; // Rojo
const bottomLeft = { r: 80, g: 255, b: 80 }; // Verde
const bottomRight = { r: 255, g: 255, b: 0 }; // Amarillo
const ratioX = x / (gridSize - 1);
const ratioY = y / (gridSize - 1);
const top = {
r: topLeft.r + (topRight.r - topLeft.r) * ratioX,
g: topLeft.g + (topRight.g - topLeft.g) * ratioX,
b: topLeft.b + (topRight.b - topLeft.b) * ratioX
};
const bottom = {
r: bottomLeft.r + (bottomRight.r - bottomLeft.r) * ratioX,
g: bottomLeft.g + (bottomRight.g - bottomLeft.g) * ratioX,
b: bottomLeft.b + (bottomRight.b - bottomLeft.b) * ratioX
};
const final = {
r: top.r + (bottom.r - top.r) * ratioY,
g: top.g + (bottom.g - top.g) * ratioY,
b: top.b + (bottom.b - top.b) * ratioY
};
return `rgb(${Math.round(final.r)}, ${Math.round(final.g)}, ${Math.round(final.b)})`;
}
// Generamos los datos para los círculos
const data = Array.from({ length: gridSize * gridSize }, (_, i) => ({
x: (i % gridSize) * (circleRadius * 2 + circleSpacing) + circleRadius + circleSpacing / 2,
y: Math.floor(i / gridSize) * (circleRadius * 2 + circleSpacing) + circleRadius + circleSpacing / 2,
color: interpolateColor(i % gridSize, Math.floor(i / gridSize), gridSize),
}));
// Agregamos los círculos al SVG
svg.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", circleRadius)
.attr("fill", d => d.color);
// n. Retornamos el canvas.
return svg.node();
}
grilla_circulos = {
var collection = [];
}
{
// 1. Creación de un área de dibujo (256x256 pixeles).
const svg = d3.create("svg")
.attr("width", 256)
.attr("height", 256);
// Definimos el tamaño de la cuadrícula y el radio de los círculos
const gridSize = 22; // Ajustamos el tamaño para que quepa en el lienzo
const circleRadius = 3;
// Función para calcular el radio de los círculos en el centro
function calculateRadius(x, y, centerX, centerY) {
const distance = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2);
if (distance < 30) {
return 6; // Radio más grande en el centro
} else {
return circleRadius; // Radio pequeño en el resto
}
}
// Dibujamos los círculos en la cuadrícula
for (let i = 0; i < gridSize; i++) {
for (let j = 0; j < gridSize; j++) {
const x = j * 20 + 10; // Ajustamos la posición para centrar los círculos
const y = i * 20 + 10; // Ajustamos la posición para centrar los círculos
const radius = calculateRadius(x, y, 128, 128); // Calculamos el radio
svg.append("circle")
.attr("cx", x)
.attr("cy", y)
.attr("r", radius)
.attr("fill", "black");
}
}
// n. 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);
// Definimos el tamaño de la cuadrícula, el tamaño de los triángulos y el espacio entre filas
const gridSize = 32;
const triangleSize = 12;
const rowSpacing = 6; // Espacio adicional entre las filas
// Función para dibujar un triángulo
function drawTriangle(x, y, strokeColor, fillColor, direction) {
let points;
if (direction === "up") {
points = `${x},${y + triangleSize} ${x + triangleSize},${y + triangleSize} ${x + triangleSize / 2},${y}`;
} else {
points = `${x},${y} ${x + triangleSize},${y} ${x + triangleSize / 2},${y + triangleSize}`;
}
svg.append("polygon")
.attr("points", points)
.attr("stroke", strokeColor)
.attr("stroke-width", 2)
.attr("fill", fillColor);
}
// Dibujamos los triángulos en la cuadrícula
for (let i = 0; i < gridSize; i++) {
for (let j = 0; j < gridSize; j++) {
const x = j * triangleSize;
const y = i * (triangleSize + rowSpacing); // Ajuste aquí
let strokeColor, fillColor, direction;
// Determinamos los colores y la dirección basados en la posición
if (i % 2 === 0) { // Alternar dirección en cada fila
if (j % 2 === 0) {
strokeColor = "pink";
fillColor = "white";
direction = "down";
} else {
strokeColor = "blue";
fillColor = "yellow";
direction = "up";
}
} else { // Alternar dirección en cada fila
if (j % 2 === 0) {
strokeColor = "blue";
fillColor = "yellow";
direction = "up";
} else {
strokeColor = "pink";
fillColor = "white";
direction = "down";
}
}
drawTriangle(x, y, strokeColor, fillColor, direction);
}
}
// 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.
