Engineer & Educator | Observable Ambassador | Karaoke Enthusiast
Published
Edited
Sep 30, 2021
2 stars
<!--- Create a 520x120 px SVG -->
<svg height=120 width=520 style="border: 1px solid #eeeeee">
<!--- Draw a rectangle with its top left corner at (10, 10), a width of 30, a height of 40 -->
<rect x=10 y=10 width=30 height=40 />
<!--- Draw a circle centered at (100, 100) with a radius of 10 -->
<circle r=10 cx=100 cy=100 fill="orange" />
<!--- Draw red 30px text with its middle point anchored at (80, 40) -->
<text x=80 y=40 font-size="30" text-anchor="middle" fill="red">Text</text>
<!--- Draw a straight green line from (40, 50) to (100, 100) -->
<line x1=40 y1=50 x2=100 y2=100 stroke="green" stroke-width="1" />
<!--- Draw a 5-px-wide blue polyline filled in lime connecting the given points -->
<polyline fill="lime" stroke-width="5" stroke="blue"
points="150,50 250,10 200,80"/>
<!--- Draw a polygon connecting the given points, outlined in green and filled in yellow -->
<polygon points="350, 10 370, 25, 370, 50, 350, 65 330, 50, 330, 25" stroke="green" fill="yellow" />
<!-- Draw a 3-px-wide purple path starting at (400,80) and tracing the given bezier curves (C ...) to finish at (500,80) -->
<path d="M 400, 80 C 470, 80 470, 40 450, 40 C 430, 40 430, 80 500, 80" stroke="purple" fill="transparent" stroke-width="3" />
</svg>
<svg width = ${width} height="320">
<g transform="translate(${width / 2}, 150)">
${_.range(15).map(
i =>
// Note the svg`` tag around our circle element string below!
svg`<circle cx=10 cy=10 r=${10 + i * 6} stroke="black" opacity="${1 - i / 15}" fill="transparent" />`
)}
</g>
</svg>
<svg width=${width} height="100">
<!--- Draw a series of vertical lines here! -->
</svg>
<svg width = ${width} height="320">
<g transform="translate(${width / 2}, 150)">
${_.range(num_circles).map(
i =>
svg`<circle cx=10 cy=10 r=${10 + i * 6} stroke="black" opacity="${1 - i / num_circles}" fill="transparent" />`
)}
</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.
