Computer Graphics
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>`
grilla_circ_conc = {
var coleccion = []; // Arreglo de datos a retornar
var cantidad_de_circulos = 6;
var rad = 100;
var cx = 100;
var cy = 100;
var color_circulo = ['green','purple','red']
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;
}
{
// 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 colección de círculos
var circulos = svg.selectAll("circle").data(grilla_circ_conc).enter().append("circle");
// 3.
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).
// 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();
}
{
// 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;
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.