Computer Graphics
Published
Edited
Sep 11, 2021
Mi visualización
4 * 6 + 2 // esto es un comentario
{
var x = 0;
for (let i = 1; i <= 100; i++)
{
x += 1;
}
return x;
}
saludar("Susana")
html`<svg width="720" height="120">
<circle cx="40" cy="60" r="20" style="fill:red" > </circle>
<circle cx="80" cy="60" r="20" > </circle>
<circle cx="120" cy="60" r="20" > </circle>
</svg>`
arreglo = [12,20,15,25,18]
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]} > </circle>
<circle cx="120" cy="60" r=${arreglo[2]} > </circle>
</svg>`
d3 = require("d3@5")
{
// 1. Creación de área de dibujo
const svg = d3.create("svg")
.attr("width",512)
.attr("height",90)
// 2.
var circulos = svg.selectAll("circle")
.data(arreglo)
.enter()
.append("circle");
circulos.attr("cx",30).attr("cy",30).attr("r", function(d) {return d;} )
// Retorno el nodo
return svg.node()
}
coleccion_de_circulos = [
{eje_x: 50, eje_y: 50,radio: 29, color:"#ffbe0b"},
{eje_x: 150,eje_y: 50,radio: 20, color:"#fb5607"},
{eje_x: 250,eje_y: 50,radio: 28, color:"#fb5607"},
{eje_x: 350,eje_y: 50,radio: 28, color:"#fb5607"},
{eje_x: 450,eje_y: 50,radio: 18, color:"#fb5607"},
]
{
// 1. Creación de área de dibujo
const svg = d3.create("svg")
.attr("width",512)
.attr("height",90)
// 2.
var circulos = svg.selectAll("circle")
.data(coleccion_de_circulos)
.enter()
.append("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;})
// Retorno el nodo
return svg.node()
}
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.
