html`
<style>
#container{
border: 1px black solid;
width: 600px;
height: 300px
}
</style>
<svg id ="container">
<g transform = translate(300,150)>
<rect width = 600 height = 300 x = -300 y = -150 fill = lightcyan stroke = lightcyan />
<rect width = 20 height = 250 x = -200 y = -130 fill = grey stroke = black />
<rect width = 600 height = 50 x =-300 y = 100 fill = forestgreen stroke = green />
<rect width = 200 height = 125 x = -180 y = -120 fill = blue stroke = black />
<rect width = 200 height = 30 x = -180 y = -80 fill = yellow stroke = yellow />
<rect width = 30 height = 125 x = -125 y = -120 fill = yellow stroke = yellow />
</g>
<circle r = 100 cx = 600 fill = gold stroke=black />
<circle r = 12 cx = 110 cy = 15 fill = grey stroke =black />
<g transform = translate(450,175)>
<circle r =20 cy = -10 fill = black stroke = black />
<circle r = 20 fill = wheat stroke = black />
<circle r = 3 cx = 7 cy = -5 fill = blue stroke = black />
<circle r = 3 cx = -7 cy = -5 fill = blue stroke = black />
<circle r = 3 cy = 10 fill = salmon stroke = black />
<rect width = 15 height =35 x = -7 y = 20 fill = powderblue stroke = black />
<rect width = 5 height =20 x = -7 y = 55 fill = steelblue stroke = black />
<rect width = 5 height =20 x = 3 y = 55 fill = steelblue stroke = black />
<rect width = 60 height =10 x = -30 y = 25 fill = powderblue stroke = />
</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.
