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
}
}
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.