Public
Edited
Oct 3, 2023
svg`<svg width="200" height="200" viewBox="0 0 200 300" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="200" height="200" fill="blue" />
</svg>`
svg`<svg width="200" height="200" viewBox="0 0 200 300" xmlns="http://www.w3.org/2000/svg"><g class="nodePointers" id="slow" style="transform: translate(113.19px, 30px); stroke: green; fill: green">
<line stroke-width="7.5" stroke-linecap="round" x1="0" x2="0" y1="20" y2="100"></line>
<line x1="0" y1="100" x2="16.383040885779835" y2="88.52847127297908" stroke-width="7.5"></line>
<line x1="0" y1="100" x2="-16.38304088577984" y2="88.52847127297909" stroke-width="7.5"></line>
<text fill="blue" text-anchor="middle" font-size="30">slow</text>
</g></svg>`
svg`<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- Calculate the center of the SVG element -->
<g transform="translate(150, 100) scale(2)">
<!-- Your SVG content goes here -->
<rect x="-50" y="-50" width="100" height="100" fill="blue" />
</g>
</svg>`
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.
