Computer Graphics & Visualization @ufrj.br
<svg width=300 height=200 style="border:1px solid black">
</svg>
html`<svg width=300 height=200 style="border:1px solid black">
</svg>`
<svg width=300 height=200 style="border:1px solid black">
<rect x=20 y=20 width=100 height=100 stroke=blue stroke-width=3 fill=green />
</svg>
<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x=10 y=10 width="30" height="30" stroke=black fill=transparent stroke-width=5 />
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
<circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
<ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="purple" stroke-width="5"/>
<line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
<polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
stroke="orange" fill="transparent" stroke-width="5"/>
<polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
stroke="green" fill="yellow" stroke-width="5"/>
<path d="M20,230 Q40,205 50,230 T90,230 T100,190" fill="none" stroke="blue" stroke-width="5"/>
</svg>
theSVG = {
let theSVG = html`<svg width=300 height=200 style="border:1px solid black">
</svg>`;
theSVG.append(svg`<rect x=10 y=20 width=30 height=20 fill=gray id=grayrect />`);
return theSVG;
}
{
let button = html`<button>Add Circle</button>`;
button.onclick = (e) => {
let x = Math.random() * 300;
let y = Math.random() * 200;
theSVG.append(svg`<circle cx=${x} cy=${y} r=10 fill=cyan />`);
};
return button;
}
{
let button = html`<button>Move Gray Rect</button>`;
button.onclick = (e) => {
let rect = theSVG.getElementById("grayrect");
let x = Math.random() * 300;
let y = Math.random() * 200;
rect.setAttribute("x", x);
rect.setAttribute("y", y);
};
return button;
}
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.
