Hi. I'm Nicolas Lambert, research engineer in geographic information science at CNRS (France). My job is to draw maps and teach cartography at the university. I am a geographer 🌎, and not really a developer 🖥️
<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)
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.