html`
<style>
#container{
border:1px black solid;
width:600px;
height:300px
}
</style>
<svg id="container">
<g transform = translate(300,150) >
<g transform = "rotate(45) scale(2)" >
<rect width = 100 height = 100 x = -50 y = -50 />
<rect width = 75 height = 75 x = -37.5 y = -37.5 fill = orange />
<rect width = 50 height = 50 x = -37.5 y = -37.5 fill = cornflowerblue />
<rect width = 25 height = 25 x = -37.5 y = -37.5 fill = red />
<rect width = 50 height = 50 x = -12.5 y = -12.5 fill = cornflowerblue />
<rect width = 25 height = 25 x = -12.5 y = -12.5 fill = yellow />
<rect width = 25 height = 25 x = 12.5 y = 12.5 fill = green />
<line x1 = 300 y1 = 20 x2 = 300 y2 = 480 stroke = black />
</g>
</g>
<line x1 = 300 y1 = 20 x2 = 300 y2 = 290 stroke = black />
<line x1 = 175 y1 = 150 x2 = 425 y2 = 150 stroke = black />
</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.
