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" style="fill:blue;stroke:red;stroke-width:5;fill-rule:evenodd;" />
</circle>`
html`<svg width="2560" height="256">
<circle cx="100" cy="128" r="100" style="fill:green;"></circle>
<circle cx="100" cy="128" r="70" style="fill:violet;"></circle>
<circle cx="100" cy="128" r="40" style="fill:red;"></circle>
</svg>`
viewof svg = {
const cols = 17;
const rows = 17;
const size = 20;
const width = cols * size;
const height = rows * size;
const svg = DOM.svg(width, height);
const context = d3.select(svg);
const colorX = d3.scaleLinear().domain([0, cols - 1]).range(["green", "red"]);
const colorY = d3.scaleLinear().domain([0, rows - 1]).range(["black", "yellow"]);
for (let y = 0; y < rows; y++) {
for (let x = 0; x < cols; x++) {
const cx = x * size + size / 2;
const cy = y * size + size / 2;
const c1 = d3.color(colorX(x));
const c2 = d3.color(colorY(y));
const mixed = d3.rgb(
(c1.r + c2.r) / 2,
(c1.g + c2.g) / 2,
(c1.b + c2.b) / 2
);
const final = d3.rgb(mixed);
context.append("circle")
.attr("cx", cx)
.attr("cy", cy)
.attr("r", 6)
.attr("fill", mixed);
}
}
return svg;
}
{
// 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();
}
triangleUp = html`<svg width="28" height="28">
<polygon points="14,2.5 5,25 23,25"
style="fill:yellow;stroke:blue;stroke-width:2;fill-rule:evenodd;" />
</svg>`
triangleDown = html`<svg width="28" height="28">
<polygon points="5,2.5 23,2.5 14,25"
style="fill:white;stroke:red;stroke-width:2;fill-rule:evenodd;" />
</svg>`
triangleArray = {
const cols = 21;
const rows = 16;
const dx = 15;
const dy = 25;
const data = [];
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
const offsetX = col * dx;
const offsetY = row * dy;
data[data.length] = {
triangle: (row + col) % 2 === 0 ? triangleUp : triangleDown,
x: offsetX,
y: offsetY
};
}
}
return data;
}
viewof triangleFinal = {
const svg = d3.create("svg")
.attr("width", 560)
.attr("height", 448)
const context = d3.select(svg.node());
for (const { triangle, x, y } of triangleArray) {
const coleccion = triangle.cloneNode(true);
d3.select(coleccion)
.attr("x", x)
.attr("y", y)
.attr("transform", `translate(${x}, ${y})`);
svg.node().appendChild(coleccion);
}
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;
}
grilla_circ_conc = {
var coleccion = [];
var cantidad_de_circulos = 6;
var rad = 100;
var cx = 100;
var cy = 100;
var color_circulo = ['green','purple','red'] //Aca solo podemos hacer tres circulos porque nos quedamos sin colores sino
//for (var r = 1; r < cantidad_de_circulos+1; r = r+1) {
//var circle_elem = {eje_x: cx, eje_y: cy, radio: rad, color:color_circulo[r-1]};
//rad = rad - 0.25*rad // arrancamos en 100 en la definicion y le vamos restando porque cambia el radio de los circulos
//Si hacemos mas de tres circulos que superan la cantidad de colores, las funciones son: var circle_elem = {eje_x: cx, eje_y: cy, radio: rad, color:color_circulo[(r-1)%3]} --> nos quedamos con el resto de la división por tres, usamos los restos como indices en vez del índice en si.
for (var r = 1; r < cantidad_de_circulos+1; r = r+1) {
var circle_elem = {eje_x: cx, eje_y: cy, radio: rad, color:color_circulo[(r-1)%3]};
rad = rad - 0.25*rad
coleccion.push(circle_elem);
}
return coleccion;
}
// color circulo va con r-1 porque empiezan en la posición cero los colores
{
const svg = d3.create("svg").attr("width",256).attr("height",256);
var circulos = svg.selectAll("circle").data(grilla_circ_conc).enter().append("circle");
// le pedimos que cree un circulo por cada entrada de la data
// no sabe los atributos del elemento a cual corresponden de la primitiva
circulos.attr("cx", function(d) {return d.eje_x;}) //hacemos el mapeo de atributos
.attr("cy", function(d) {return d.eje_y;})
.attr("r", function(d) {return d.radio;})
.style("fill", function(d) {return d.color;})
// n. retomamos el canvas.
return svg.node()
}
//Tenemos que operar con el rgb aca, ya no nos sirve ir color por color
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.
