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>`
colA = [{ejex: 128, ejey: 128, radio: 128, color: 'green'},{ejex: 128, ejey: 128, radio: 86, color: 'purple'},{ejex: 128, ejey: 128, radio: 43, 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);
// Un cuadro de texto.
var circulos = svg.selectAll("circle") // Esta selección da vacio
.data(colA) // Estos son los datos
.enter() // Para cada entrada
.append("circle");
circulos.attr("cx", function(d){return d.ejex} ) // Centro en X
.attr("cy", function(d){return d.ejey}) // Centro en Y
.attr("r" , function(d) {return d.radio;} ) // Radio
.style("fill", function(d){return d.color}); // Color
// n. Retornamos el canvas.
return svg.node();
}
colB = {var coleccion = [];
for (let i = 0; i < 17; ++i){
for (let j = 0; j< 17; ++j){
var obj = ({ejex: 10+15*j,ejey:10+15*i,radio: 5, red: Math.floor((255*j)/16),green: Math.floor((255*i)/16), blue: 0})
coleccion.push(obj)
}
}
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);
// Un cuadro de texto.
var circulos = svg.selectAll("circle") // Esta selección da vacio
.data(colB) // Estos son los datos
.enter() // Para cada entrada
.append("circle");
circulos.attr("cx", function(d){return d.ejex} ) // Centro en X
.attr("cy", function(d){return d.ejey}) // Centro en Y
.attr("r" , function(d) {return d.radio;} ) // Radio
.style("fill", function(d){return "rgb("+ d.red +","+ d.green+","+ d.blue+")"}); // Color
// n. Retornamos el canvas.
return svg.node();
}
function distancia(i,j){
return Math.sqrt((8-i)**2 + (8-j)**2)
}
function radio(i,j){
var d = Math.max(distancia(i,j),1)
return 5/d
}
colC = {
var coleccion = []
for (let i = 0; i<17; ++i){
for (let j = 0; j<17; ++j){
var obj = ({ejex: 10 + 15*i, ejey: 10+15*j, radio: radio(i,j)})
coleccion.push(obj)
}
}
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") // Esta selección da vacio
.data(colC) // Estos son los datos
.enter() // Para cada entrada
.append("circle");
circulos.attr("cx", function(d){return d.ejex} ) // Centro en X
.attr("cy", function(d){return d.ejey}) // Centro en Y
.attr("r" , function(d) {return d.radio;} ) // Radio
return svg.node();
}
jump = 16 //Cuánto me voy a mover entre triangulos
startx=6 //punto de partida para la coordenada x
function pR1X(i,j){
return startx+jump*j
}
function pR1Y(i,j){
return jump*i
}
function pR2X(i,j){
return jump-4+startx+jump*j
}
function pR2Y(i,j){
return jump*i
}
function pR3X(i,j){
return jump/2-2+startx+jump*j
}
function pR3Y(i,j){
return jump*i+jump-4
}
function dataR(i,j){
return pR1X(i,j).toString()+','+pR1Y(i,j).toString()+' '+pR2X(i,j).toString()+','+pR2Y(i,j).toString()+' '+pR3X(i,j).toString()+','+pR3Y(i,j).toString()
}
stw = 1.25 //stroke_width
colDr = {
var coleccion = []
for (let i = 0; i < 16; ++i){
for (let j = 0; j < 17; ++j){
var obj = ({points: dataR(i,j), color: 'transparent', stroke: 'red', stroke_width:stw })
coleccion.push(obj)
}
}
return coleccion
}
start2x=-jump/2+startx
function pB1X(i,j){
return jump*j+start2x
}
function pB1Y(i,j){
return jump*i+jump-4
}
function pB2X(i,j){
return jump*j+start2x+jump-4
}
function pB2Y(i,j){
return jump*i+jump-4
}
function pB3X(i,j){
return jump*j+start2x+jump/2-2
}
function pB3Y(i,j){
return jump*i
}
function dataB(i,j){
return pB1X(i,j).toString()+','+pB1Y(i,j).toString()+' '+pB2X(i,j).toString()+','+pB2Y(i,j).toString()+' '+pB3X(i,j).toString()+','+pB3Y(i,j).toString()
}
colDb = {
var coleccion = []
for (let i = 0; i < 16; ++i){
for (let j = 0; j < 17; ++j){
var obj = ({points: dataB(i,j), color: 'yellow', stroke: 'blue', stroke_width:stw })
coleccion.push(obj)
}
}
return coleccion
}
colD = d3.merge([colDr,colDb])
{
// 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.
var triangulos = svg.selectAll("polygon") // Esta selección da vacio
.data(colD) // Estos son los datos
.enter() // Para cada entrada
.append("polygon");
triangulos.attr("points", function(d){return d.points} ) // Puntos
.attr("fill", function(d){return d.color})
.attr("stroke" , function(d) {return d.stroke;})
.attr("stroke-width", function(d) {return d.stroke_width})
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.
var polig = svg.selectAll("polygon") // Esta selección da vacio
.data(colE) // Estos son los datos
.enter() // Para cada entrada
.append("polygon");
polig.attr("points", function(d){return d.points} ) // Puntos
.attr("fill", function(d){return d.color})
.attr("stroke" , 'black')
.attr("stroke-width", function(d) {return d.stroke_width})
// 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;
}
rad = 255/16
function push(i,j){
return (-1)**(i+1)*rad/2+rad/2
}
dif = 0.4
colE = {
var coleccion = []
for (let i = 0;i<7;++i){
for (let j = 0;j<7;++j){
var corx= rad*(1+2*j) + push(i,j)
var cory = rad*(1.5+2*i)
var obj = ({points:hexagon(corx,cory,rad), color:"transparent", stroke_width: dif*(i+1)})
coleccion.push(obj)
}
}
return coleccion
}
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.
