Computer Graphics & Visualization @ufrj.br
37-75Introdução ao SVGIntrodução ao HtmlIntrodução às Cascading StyleSheets (CSS)Usando arquivos SVGEncapsulando um inputSorteando com probabilidades dadasHexagonal hierarchical cartogram for BrazilCategorical TreemapCoral Vivo Diorama v3Mapa do Brasil com Vega-LiteCategorical data visualization with t-SNEHierarchical Square PackingPhoto gallery with lensMapa de bairros do Rio com Vega-LiteMapa coroplético e cartograma Dorling de população dos municípios brasileirosDeformation with RBFsLane-Riesenfeld subdivision
SVG Dinâmico com D3
svg1 = {
let svg = html`<svg width=400 height=300 style="border:1px solid black"></svg>`;
let line = document.createElementNS("http://www.w3.org/2000/svg", 'line');
line.setAttribute("x1", 0);
line.setAttribute("y1", 0);
line.setAttribute("x2", 300);
line.setAttribute("y2", 300);
line.setAttribute("style", "stroke:black")
svg.appendChild(line);
return svg;
}
svg1a = {
let lines = "";
for (let i = 0; i < 300; i+= 10) {
lines += `<line x1=0 y1=0 x2=${i} y2=300 stroke=black />`;
}
return html`<svg width=400 height=300 style="border:1px solid black">
${lines}</svg>`
}
d3 = require ("d3@5")
svg2 = {
let svgNode = html`<svg width=400 height=300 style="border:1px solid black"></svg>`;
let svg = d3.select(svgNode);
for (let i = 0; i < 300; i+= 10) {
svg
.append('line')
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", i)
.attr("y2", 300)
.style("stroke", "black")
}
return svgNode;
}
svg3 = {
let data = [100,20,80,90];
let svgNode = html`<svg width=400 height=300 style="border:1px solid black"></svg>`;
let svg = d3.select(svgNode);
data.forEach((d,i) => {
svg.append("rect")
.attr("x", i*70+50)
.attr("y", 250-d)
.attr("width",70)
.attr("height",d)
.style("stroke","black")
.style("fill", "lightgray")
})
return svgNode;
}
{
let button = html`<button>Pintar todos</button>`;
button.onclick = () => {
d3.select(svg3).selectAll("rect").style("fill", rectColor);
}
return button;
}
{
let button = html`<button>Pintar ímpares</button>`;
button.onclick = () => {
d3.select(svg3).selectAll("rect").style("fill", (d,i) => {
return i%2 == 1 ? rectColor : "lightgray"
});
}
return button;
}
svg4 = html`<svg width=400 height=300 style="border:1px solid black"></svg>`
chart([100,20,90,30])
md`## Usando data join e transitions`
svg5 = html`<svg width=400 height=300 style="border:1px solid black"></svg>`
chart2([100,20,100,90])
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.
