html`<svg width="100" height="100">
<circle cx="40" cy="60" r="5" style="fill:black;">
</circle>`
html`<svg width="110" height="110">
<polygon points="50,5 20,99 95,39 5,39 80,99" style="fill:yellow;stroke:blue;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);
var circulos = svg.selectAll("circle")
.data(coleccion_de_circulos1)
.enter()
.append("circle");
circulos.attr("cx", 128 )
.attr("cy", 128 )
.attr("r" , function(d) {return d.radio;} )
.style("fill", function(d) { return d.color;});
// n. Retornamos el canvas.
return svg.node();
}
coleccion_de_circulos1 = [
{radio:120, color:"green"},
{radio:80, color:"purple"},
{radio:40, color:"red"},
]
{
// 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(coleccion_de_circulos2)
.enter()
.append("circle");
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();
}
coleccion_de_circulos2 = {
var coleccion = [];
for(var i = 5; i < 256; i = i+15.375) {
for(var j = 5; j < 256; j = j+15.375) {
const r = Math.floor(j);
const g = Math.floor(i);
var circle_elem = { eje_x: j, eje_y: i, radio: 5, color : `rgb(${r},${g},0)` };
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);
var circulos = svg.selectAll("circle")
.data(coleccion_de_circulos3)
.enter()
.append("circle");
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", "black");
// n. Retornamos el canvas.
return svg.node();
}
coleccion_de_circulos3 = {
const max_radius = 5;
const min_radius = 0.5;
const center_x = 128;
const center_y = 128;
var coleccion = [];
for(var i = 5; i < 256; i = i+15.375) {
for(var j = 5; j < 256; j = j+15.375) {
const x = Math.abs(center_x - j);
const y = Math.abs(center_y - i);
const t = (x + y)/256;
const rad = max_radius - (t)*(max_radius - min_radius);
var circle_elem = { eje_x: j, eje_y: i, radio: rad };
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);
var triangulos_1 = svg.selectAll("polygon.tri1")
.data(triangulos1)
.enter()
.append("polygon")
.attr("class", "tri1");
var triangulos_2 = svg.selectAll("polygon.tri2")
.data(triangulos2)
.enter()
.append("polygon")
.attr("class", "tri2");;
triangulos_1.attr("points", function(d) {return d.points;} )
.style("fill", "yellow")
.style("stroke", "blue")
.attr("stroke-width", 1.2);
triangulos_2.attr("points", function(d) {return d.points;} )
.style("fill", "white")
.style("stroke", "red")
.attr("stroke-width", 1.2);
// n. Retornamos el canvas.
return svg.node();
}
triangulos1 = {
var coleccion = [];
for(var i = 3; i < 256; i = i+16) {
for(var j = -3; j < 256; j = j+16) {
var tri_elem = { points: `${j},${i+10.5} ${j+5},${i} ${j+10},${i+10.5}` };
coleccion.push(tri_elem);
}
}
return coleccion;
}
triangulos2 = {
var coleccion = [];
for(var i = 3; i < 256; i = i+16) {
for(var j = 5; j < 256; j = j+16) {
var tri_elem = { points: `${j},${i} ${j+5},${i+10.5} ${j+10},${i}` };
coleccion.push(tri_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);
var hexagonos_1 = svg.selectAll("polygon.hex1")
.data(hexagon1)
.enter()
.append("polygon")
.attr("class", "hex1");
var hexagonos_2 = svg.selectAll("polygon.hex2")
.data(hexagon2)
.enter()
.append("polygon")
.attr("class", "hex2");;
hexagonos_1.attr("points", function(d) {return d.points;} )
.style("fill", "white")
.style("stroke", "black")
.attr("stroke-width", function(d) {return d.stroke_width;});
hexagonos_2.attr("points", function(d) {return d.points;} )
.style("fill", "white")
.style("stroke", "black")
.attr("stroke-width", function(d) {return d.stroke_width;});
// n. Retornamos el canvas.
return svg.node();
}
hexagon1 = {
var coleccion = [];
var count = 0.5
for(var i = 18; i < 250; i = i+68) {
for(var j = 18; j < 250; j = j+34) {
var hex_elem = { points: hexagon(j, i, 17) , stroke_width:count };
coleccion.push(hex_elem);
}
count += 1;
}
return coleccion;
}
hexagon2 = {
var coleccion = [];
var count = 1;
for(var i = 52; i < 250; i = i+68) {
for(var j = 36; j < 250; j = j+34) {
var hex_elem = { points: hexagon(j, i, 17) , stroke_width:count };
coleccion.push(hex_elem);
}
count += 1;
}
return coleccion;
}
// 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.
