html`<svg width="720" height="120"> # HTML me provee un componente SVG
<circle cx="40" cy="60" r="10"></circle>
<circle cx="80" cy="60" r="10"></circle>
<circle cx="120" cy="60" r="10"></circle>
</svg>` // cx,cy son las coordenadas de cada círculo y r su radio
html`<svg width="720" height="120">
<circle cx="40" cy="60" r="20" style="fill:red;"></circle>
<circle cx="80" cy="60" r="20" style="fill:red;"></circle>
<circle cx="120" cy="60" r="20" style="fill:red;"></circle>
</svg>`
arreglo = [25,10,25] // probá cambiar los valores para ver como se actualiza la visualización
html`<svg width="720" height="120">
<circle cx="40" cy="60" r=${arreglo[0]} style="fill:red;"></circle>
<circle cx="80" cy="60" r=${arreglo[1]} style="fill:red;"></circle>
<circle cx="120" cy="60" r=${arreglo[2]} style="fill:red;"></circle>
</svg>`
d3 = require("d3@5") //D3v5
{
// 1. Creación de un área de dibujo (512x90 pixeles)
return d3.create("svg").attr("width",512).attr("height",90).node()
}
{
// 1. Creación de un área de dibujo (512x90 pixeles)
const svg = d3.create("svg")
.attr("width",512)
.attr("height",90)
// 2. Asociamos la colección de círculos a componentes gráficos "circle"
var circulos = svg.selectAll("circle") // Esta selección da vacio
.data(arreglo) // Estos son los datos
.enter() // Para cada entrada
.append("circle"); // Agregá un círculo
// 3. Le decimos a d3 cómo utilizar la información disponible en el arreglo
circulos.attr("cx", 30 ) // Centro en X
.attr("cy", 30) // Centro en Y
.attr("r" , function(d) {return d;} ) // Radio
.style("fill", "red"); // Color
return svg.node()
}
coleccion_de_circulos = [
{eje_x:50 , eje_y:45, radio:10, color:"#ffbe0b"},
{eje_x:150, eje_y:45, radio:14, color:"#fb5607"},
{eje_x:250, eje_y:45, radio:18, color:"#ff006e"},
{eje_x:350, eje_y:45, radio:22, color:"#8338ec"},
{eje_x:450, eje_y:45, radio:26, color:"#3a86ff"}
];
{
// 1. Creación de un área de dibujo (512x90 pixeles)
const svg = d3.create("svg")
.attr("width",512)
.attr("height",90);
// 2. Asociamos la colección de círculos a componentes gráficos "circle"
var circulos = svg.selectAll("circle") // Esta selección da vacio
.data(coleccion_de_circulos) // Estos son los datos
.enter() // Para cada entrada
.append("circle"); // Agregá un círculo
// 3. Le decimos a d3 cómo utilizar la información disponible en el arreglo
// para setear las propiedades cx, cy, r y fill del componente HTML 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;});
// 4. Retornamos el canvas
return svg.node();
}
dibujar = function(coleccion) {
// 1. Creación de un área de dibujo (512x90 pixeles)
const svg = d3.create("svg")
.attr("width",512)
.attr("height",90);
// 2. Asociamos la colección de círculos a componentes gráficos "circle"
var circulos = svg.selectAll("circle")
.data(coleccion)
.enter()
.append("circle");
// 3. Le decimos a d3 cómo utilizar la información disponible en el arreglo
// para setear las propiedades cx, cy, r y fill del componente HTML 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;});
// 4. Retornamos el canvas
return svg.node();
}
coleccion_ciclos = {
var coleccion = []; // Arreglo de datos a retornar
for(var it = 0; it < 5; it = it+1) {
var circle_elem = {
eje_x: (it*100)+50,
eje_y: 45,
radio: (it*4)+10,
color: "#ff006e"
};
coleccion.push(circle_elem);
}
return coleccion;
}
dibujar(coleccion_ciclos)
coleccion_animada = [
{eje_x:50 , eje_y:45, radio:10, color:"#ffbe0b"},
{eje_x:150, eje_y:45, radio:14, color:"#fb5607"},
{eje_x:250, eje_y:45, radio:18, color:"#ff006e"},
{eje_x:350, eje_y:45, radio:22, color:"#8338ec"},
{eje_x:450, eje_y:45, radio:26, color:"#3a86ff"}
];
dibujar(coleccion_animada)
{
var up_or_down = [1,1,1,1,1] // Dirección (+1 o -1 a cada radio)
while(true) { // Ciclo infinito
for(var it = 0; it < 5; it = it+1) { // Para cada elemento del arreglo
if(coleccion_animada[it].radio > 30) // Si llego al máximo de crecimiento (30px)
up_or_down[it] = -1 // Decremento el radio
else if(coleccion_animada[it].radio == 0) // Sino, lo incremento
up_or_down[it] = 1
coleccion_animada[it].radio += up_or_down[it] // Actualizo con la dirección computada
}
yield dibujar(coleccion_animada); // Dibujo los círculos en su estado actual
}
}
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.
