DataViz, Dashboard, Observable Ambassador and Notion Certified
<svg width="200" height="100" style="border: solid 1px red">
<rect x="1" y="1" width="100" height="100"></rect>
</svg>
<svg viewBox="0 0 400 200" width="200" height="100" style="border: solid 1px red">
<rect x="1" y="1" width="100" height="100"></rect>
</svg>
<svg width="600" height="400">
<circle cx="100" cy="50" r="40" fill="green"></circle>
<ellipse cx="200" cy="50" rx="20" ry="10" fill="orange" fill-opacity="0.5"></ellipse>
<line x1="300" y1="90" x2="440" y2="200" stroke="red"></line>
<line x1="0" y1="120" x2="220" y2="200" stroke="black" stroke-width="5" stroke-dasharray="10 2 5 2"></line>
<text x="20" y="200">Hey !</text>
<rect x="20" y="260" width="50" height="20" fill="darkblue" stroke="orange" stroke-width="3px"></rect>
</svg>
<svg width="200" height="100">
<path d="M 0 90 L 100 0 L 200 90" fill="none" stroke="steelblue"></path>
</svg>
<svg width="200" height="100">
<path d="M 0 90 L 100 0 L 200 90 Z" fill="none" stroke="steelblue"></path>
</svg>
<svg width="200" height="100">
<path d="M 20 20 L 180 20" fill="none" stroke="steelblue"></path> <!-- Chemin sans courbe de bézier -->
<path d="M 20 20 C 40 50 160 50 180 20" fill="none" stroke="indianred"></path> <!-- Chemin avec courbe de Bézier -->
<!-- Affichage des points de contrôle - ceci est seulement utile ici pour les visualiser : -->
<circle cx="40" cy="50" r="2" fill="red"></circle>
<circle cx="160" cy="50" r="2" fill="red"></circle>
</svg>
<svg width="200" height="100">
<!-- Polygone obtenu avec un chemin fermé et avec un valeur pour l'attribut fill -->
<path d="M 20 20 L 40 50 L 160 50 L 180 20 Z" fill="lightgrey" stroke="red"></path>
</svg>
<svg width="1500" height="150">
<image
xlink:href="https://upload.wikimedia.org/wikipedia/commons/6/63/Playfair-piechart.jpg"
x="25"
y="25"
width="100"
height="106"
></image>
</svg>
<svg width="300" height="100">
<g fill="crimson" stroke="darkblue" stroke-width="2.5">
<ellipse cx="50" cy="30" rx="40" ry="20"></ellipse>
<rect x="40" y="40" width="60" height="30"></rect>
<text x="110" y="80" font-size="50">Yo !</text>
</g>
</svg>
<svg width="200" height="100">
<g fill="crimson" stroke="darkblue" stroke-width="2.5" transform="translate(-40, 20)">
<ellipse cx="50" cy="30" rx="40" ry="20"></ellipse>
<rect x="40" y="40" width="60" height="30"></rect>
<text x="110" y="80" font-size="50">Yo !</text>
</g>
</svg>
<svg width="200" height="100">
<g fill="crimson" stroke="darkblue" stroke-width="2.5" transform="scale(2)">
<ellipse cx="50" cy="30" rx="40" ry="20"></ellipse>
<rect x="40" y="40" width="60" height="30"></rect>
<text x="110" y="80" font-size="50">Yo !</text>
</g>
</svg>
<svg width="200" height="100">
<g fill="crimson" stroke="darkblue" stroke-width="2.5" transform="rotate(30, 100, 100)">
<ellipse cx="50" cy="30" rx="40" ry="20"></ellipse>
<rect x="40" y="40" width="60" height="30"></rect>
<text x="110" y="80" font-size="50">Yo !</text>
</g>
</svg>
<svg width="200" height="100">
<g fill="crimson" stroke="darkblue" stroke-width="2.5" transform="rotate(80, 190, 60) scale(4)">
<ellipse cx="50" cy="30" rx="40" ry="20"></ellipse>
<rect x="40" y="40" width="60" height="30"></rect>
<text x="110" y="80" font-size="50">Yo !</text>
</g>
</svg>
<svg width="300" height="100">
<style>
g.my-group {
fill: pink;
stroke: black;
stroke-width: 2;
font-family: Menlo, Consolas, monospace;
}
</style>
<g class="my-group">
<ellipse cx="50" cy="30" rx="40" ry="20"></ellipse>
<rect x="40" y="40" width="60" height="30"></rect>
<text x="110" y="80" font-size="50">Yo !</text>
</g>
</svg>
<svg width="200" height="100" id="figure">
<g
fill="crimson"
stroke="darkblue"
stroke-width="0.5"
onclick="this.setAttribute('stroke-width', +this.getAttribute('stroke-width') + 1)"
>
<ellipse cx="50" cy="30" rx="40" ry="20"></ellipse>
<rect x="40" y="40" width="60" height="30"></rect>
<text x="110" y="80" font-size="50">Yo !</text>
</g>
</svg>
function changeColor() {
const elem = document.querySelector('#figure > g');
const color = `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`;
elem.setAttribute('fill', color)
}
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.
