Interaction Designer, Creative Technologist, Professor and Researcher
Published
Edited
Jun 1, 2022
Ações através de botõesEscrevendo com MarkdownUsando dados de múltiplas fontesProgramando no ObservableUsando o Observable com dadosLinguagens gráficas em artefatos de alta interação V2 - Poster InterativoSlidelines Level Component DocumentationPoint & Click Adventures v.2DATAT DocumentationBACKUPDataviz em Javascript utilizando dados em tempo real de uma planilha no Google DocsLinguagens gráficas em artefatos de alta interaçãoPoint & Click AdventuresCriando, atualizando e publicando páginas web, usando o Observable como plataforma de desenvolvimentoO que se faz no Observable, não fica só no ObservableAs formas mais fáceis de se utilizar Processing no ObservableAmbiente P5 no ObservableThe easiest ways of using Processing in ObservableDiferenças na sintaxe que você está acostumado a usar em Javascript para programar no Observable
Recursos úteis na construção de SVG
Also listed in…
Creative Coding
<svg viewBox="0 0 500 500" style='width: 500px; height: 500px; border: 1px solid black;'>
<rect x=0 y=0 width=500 height=500 fill="#FF0000" />
<line x1=10 y1=10 x2=250 y2=300 stroke="#FFFFFF" stroke-width=10 />
</svg>
<svg viewBox="0 0 500 500" style='width: 500px; height: 500px; border: 1px solid black;'>
<style>
.minhalinha {
x: 10;
y: 10;
stroke: #FFFFFF;
stroke-width: 25;
}
</style>
<rect style="x: 0; y: 0; width: 500; height: 500; fill: #00FF00;" />
<line x2=300 y2=400 class="minhalinha" />
</svg>
<svg viewBox="0 20 500 330" style="width: 500; height: 350;">
<style>
.pontos {
stroke: black;
stroke-width: 3;
fill: black;
}
.letras {
font-family: Helvetica, Arial, sans-serif;
font-size: 30;
fill: black;
stroke: none;
text-anchor: middle;
}
</style>
<path id="AB" d="M 100 350 l 150 -300" stroke="red" stroke-width=3 fill="none" />
<path id="BC" d="M 250 50 l 150 300" stroke="red" stroke-width=3 fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width=3 fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width=5 fill="none" />
<!-- Pontos -->
<circle class="pontos" id="pontoA" cx=100 cy=350 r=3 />
<circle class="pontos" id="pontoB" cx=250 cy=50 r=3 />
<circle class="pontos" id="pontoC" cx=400 cy=350 r=3 />
<!-- Letras -->
<text class="letras" x=100 y=350 dx=-30>A</text>
<text class="letras" x=250 y=50 dy=-10>B</text>
<text class="letras" x=400 y=350 dx=30>C</text>
</svg>
<style>
@keyframes vaievolta {
0% {
x: 10;
y: 30;
fill: red;
}
50% {
x: 200;
y: 10;
fill: yellow;
}
100% {
x: 10;
y: 30;
fill: red;
}
}
.anima {
animation-name: vaievolta;
animation-duration: 4s;
animation-iteration-count: infinite;
}
</style>
<svg viewBox="0 0 500 100" style='width: 500px; height: 100px; border: 1px solid black;'>
<rect class="anima" width=60 height=60 />
</svg>
<svg onmousemove="move(event)" viewBox="0 0 500 500" style='width: 500px; border: 1px solid black'>
<rect id='teste' style="width: 250; x: 100; y: 50; height:100; fill: #FF0000" />
</svg>
<script>
function move(event) {
document.getElementById('teste').style.x = event.clientX;
document.getElementById('teste').style.y = event.clientY;
}
</script>
<svg id="meusvg" viewBox="0 0 500 500" style='width: 500px; height: 500px; border: 1px solid black;'>
</svg>
<script>
let conteudo = "";
for (let k = 0; k < 5; k++) {
conteudo += `<rect x=` + (Math.random() * 400) + ` y=` + (Math.random() * 400) +
` width=100 height=100 stroke='#FF0000' stroke-width=2 fill="none" />`;
}
document.getElementById('meusvg').innerHTML = conteudo;
</script>
injectsvg = function () {
let conteudo = `<svg viewBox="0 0 500 500" style='width: 500px; height: 500px; border: 1px solid black;'>`;
for (let k = 0; k < 5; k++) {
conteudo +=
`<rect x=` +
Math.random() * 400 +
` y=` +
Math.random() * 400 +
` width=100 height=100 stroke='#FF0000' stroke-width=2 fill="none" />`;
}
conteudo += `</svg>`;
return conteudo;
}
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.
