Computer Graphics & Visualization @ufrj.br
37-75Introdução ao HtmlIntrodução às Cascading StyleSheets (CSS)SVG Dinâmico com D3Usando 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
Introdução ao SVG
html`<svg width=400 height=300 style="border:2px dotted gray">
<rect x=10 y=10 width=100 height=80 fill=red stroke=blue stroke-width="5px"/>
<line x1=10 y1=250 x2=300 y2=80 stroke=green stroke-width=3 />
<circle cx=300 cy=200 r=100 fill=rgb(100,40,100) stroke=darkgreen stroke-width=4 />
</svg>`
html`<svg width=400 height=300 style="border:2px solid gray">
<line class=A x1=10 y1=250 x2=300 y2=80 />
<rect class=A x=10 y=10 width=100 height=80 fill=red style="stroke:blue"/>
<circle class=A cx=300 cy=200 r=100 />
</svg>
<style>
.A {
fill:orange;
stroke:brown;
stroke-width:4px;
}
circle.A {
fill:pink;
}
</style>`
html`<svg width=400 height=300 style="border:2px solid gray">
<path class="A" d="M 10 10 L 50 50 H 10 Z"/>
<path class="A" d="M 100 100 L 200 50 H 300 V 200 H200 Z"/>
</svg>
`
html`<svg width=400 height=300 style="border:2px solid gray">
<circle cx=100 cy=100 r="3px"/>
<circle cx=250 cy=150 r="3px"/>
<circle cx=100 cy=200 r="3px"/>
<circle cx=300 cy=200 r="3px"/>
<circle cx=300 cy=100 r="3px"/>
<path d="M100 100 Q 250,150 100,200 T 100,100" stroke="black" fill="none"/>
<path d="M100 100 C 100,200 250,150 300,200 S 300,100 100,100" stroke="blue" fill="none" />
</svg>
`
html`<svg width=400 height=300 style="border:2px solid gray">
<path class="A" d="M 100,100 l 100,100 h -100 v -100 Z"/>
</svg>`
html`<svg width=400 height=300 style="border:2px solid gray">
<g fill="none" stroke="black" stroke-width=2>
<circle cx=120 cy=150 r=5 /> <circle cx=280 cy=150 r=5 />
<path d="M120,150 A 100,70 0 0 0 280,150 "/>
<path d="M120,150 A 100,70 0 1 1 280,150 "/>
</g>
</svg>`
md`### Texto`
html`<svg width=400 height=300 style="border:2px solid gray">
<path d="M100,0 L100,300" stroke="red"/>
<g style="font-family:cursive;font-size:18pt">
<text x=100 y=100>Texto Simples</text>
<text x=100 y=140 style="text-anchor:middle">Centralizado</text>
</g>
</svg>`
md`### Conteúdo variável usando reatividade`
html`<svg width=400 height=300 style="border:2px solid gray">
${desenho}
</svg>`
desenho = `<rect x=100 y=10 width=100 height=100 />`
md`### Desenho a partir de dados`
html`<svg width=400 height=300 style="border:2px solid gray">
<g stroke=darkgray fill=gray stroke-width="2px">
${desenho2}
</g>
</svg>`
dados = [100,250,10,100,200,140]
desenho2 =
{
let rects = "";
let y = 30;
for (let w of dados) {
rects += `<rect x=50 y=${y} width=${w} height=30 />`;
y += 30;
}
return rects;
}
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.
