Computer Graphics & Visualization @ufrj.br
37-75Introdução ao SVGIntrodução ao HtmlIntrodução às Cascading StyleSheets (CSS)SVG Dinâmico com D3Encapsulando 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
Usando arquivos SVG
md`# Usando arquivos SVG`
md`## 1a Opção: Imagens e canvas`
/**
* From
* "@mbostock/cross-origin-images"
**/
function fetch_image(src, cors=true) {
return new Promise((resolve, reject) => {
const image = new Image;
if (cors) image.crossOrigin = "anonymous";
image.src = src;
image.onload = () => resolve(image);
image.onerror = reject;
});
}
pillUrl = "https://www.svgrepo.com/show/41104/pill.svg"
image = fetch_image(pillUrl,false)
tintedRotatedScaledImage = function(image,tint="yellow",angle=Math.PI/3,scale=0.5) {
let w = image.width;
let h = image.height;
const ctx = DOM.context2d(w*scale,h*scale,1);
ctx.scale(scale,scale)
ctx.translate(w/2,h/2);
ctx.rotate(angle);
ctx.translate(-w/2,-h/2);
ctx.fillStyle = tint;
ctx.fillRect(0,0,w,h);
ctx.globalCompositeOperation = "destination-in";
ctx.drawImage(image, 0, 0);
return (ctx.canvas)
}
tintedRotatedScaledImage(image,"green",Math.PI/3,0.3);
{
const height = width*9/16;
const ctx = DOM.context2d(width,height,1);
const scale = 0.1;
const h = image.height * scale;
const w = image.width * scale;
for (let i = 0; i < 100; i++) {
let x = Math.random() * (width - 200) + 100 - w/2;
let y = Math.random() * (height - 200) + 100 - h/2;
let ang = Math.PI * Math.random();
let tint = `rgb(${~~(Math.random()*255)},${~~(Math.random()*255)},${~~(Math.random()*255)})`;
ctx.drawImage(tintedRotatedScaledImage(image,tint,ang,scale),x,y)
}
return ctx.canvas
}
md`## Segunda opção: usando svg inline`
pillPath = `<path id=pill xmlns="http://www.w3.org/2000/svg" d="M407.666,147.391H112.875C50.637,147.391,0,198.025,0,260.263c0,62.24,50.637,112.878,112.875,112.878h294.791 c62.229,0,112.866-50.638,112.866-112.878C520.532,198.025,469.9,147.391,407.666,147.391z M142.727,192.363 c-78.586,0-83.98,41.81-84.021,42.238c-0.618,5.739-5.467,10.001-11.121,10.001c-0.393,0-0.798-0.018-1.197-0.068 c-6.156-0.653-10.604-6.18-9.945-12.32c0.272-2.545,7.802-62.241,106.284-62.241c6.18,0,11.198,5.012,11.198,11.198 S148.913,192.363,142.727,192.363z M407.666,345.153h-95.151V175.379h95.151c46.808,0,84.885,38.083,84.885,84.884 C492.55,307.07,454.473,345.153,407.666,345.153z"/>`
comment('Coloca-se o path numa seção `<defs>` de um svg e instancia-se com `<use>`')
html`<svg width=520 height=520>
<defs>
${pillPath}
</defs>
<use xlink:href="#pill"
x="0" y="0"
fill="red"
transform="scale(0.3) rotate(35 260 260)"/>
</svg>`
{
const height = width*9/16;
const svgNode = html`<svg width=${width} height=${height}> <defs> ${pillPath} </defs> </svg>`
const svg = d3.select(svgNode);
const w = 520;
const h = 520;
const scale = 0.1;
for (let i = 0; i < 100; i++) {
let x = Math.random() * (width - 200) + 100 - w*scale/2;
let y = Math.random() * (height - 200) + 100 - h*scale/2;
let ang = 180 * Math.random();
let tint = `rgb(${~~(Math.random()*255)},${~~(Math.random()*255)},${~~(Math.random()*255)})`;
svg.append('use')
.attr("xlink:href", "#pill")
.attr("fill", tint)
.attr("transform", `translate(${x} ${y}) scale(${scale}) rotate(${ang} 260 260)`)
}
return svgNode
}
md`## Bibliotecas`
d3 = require("d3@5")
import {comment,util_style} from "@esperanc/notebook-css-utilities"
util_style
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.
