SVG method / lengfengif | Observable

Published

Edited

May 17, 2020

svg `

<svg viewBox="0 0 70 60" >

<rect x="5" y="5" width="10" height="10" fill="green" />

<rect x="5" y="5" width="10" height="10" fill="blue" transform="translate(20)" />

<rect x="5" y="5" width="10" height="10" fill="red" transform="translate(0 20)"/>

<rect x="5" y="5" width="10" height="10" fill="pink" transform="translate(20 20)"/>

<rect x="5" y="5" width="10" height="10" stroke="yellow" transform="translate(0 40)"/>

`

svg `

<svg viewBox="0 0 70 20" >

<rect x="30" y="5" width="10" height="10" fill="green" />

<rect x="40" y="5" width="10" height="10" fill="yellow" transform="rotate(10,40,15)" />

<rect x="20" y="5" width="10" height="10" fill="red" transform="rotate(10,30,5)" />

`

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.