html`
<svg height="${height}" width="${width}" style="bodrder: solid red 1px" xmlns="http://www.w3.org/2000/svg">
<svg id="doily">
<circle cx="${width/2}" cy="${height/2}" r="20" />
</svg>
<svg id="navi" x="10" y="${height-100}" width="140" height="90" viewBox="0 0 140 90" class="switcheroo">
<rect x=0 y=0 width=140 height=90 fill="#0000"/>
<svg class="icon switch" y=50>
<circle cx=20 cy=20 r=20 class="bkg"/>
<path class="glphp" d="M7,20 l5,5 v-10"/>
<path class="glphp" d="M33,20 l-5,5 v-10"/>
<path class="glphp" d="M20,7 l5,5 h-10"/>
<path class="glphp" d="M20,33 l5,-5 h-10"/>
<circle class="glphp" cx=20 cy=20 r=4 />
</svg>
<svg id="navi_zoom" class="icon">
<circle cx=20 cy=20 r=20 class="bkg"/>
<path class="glph" d="M 19,21 a 5,5 0,1,1 1,-1 l 7,7" />
</svg>
<svg id="navi_scroll" class="icon hidden">
<circle cx=20 cy=20 r=20 class="bkg"/>
<path class="glphp" d="M7,20 l5,5 v-10"/>
<path class="glphp" d="M33,20 l-5,5 v-10"/>
<path class="glphp" d="M20,7 l5,5 h-10"/>
<path class="glphp" d="M20,33 l5,-5 h-10"/>
</svg>
<svg id="scroller" x=50 width = 90 height = 90 viewBox="-45 -45 90 90">
<g class="icon" transform="rotate(-45)" id="left">
<path class="bkg" d="M -2,-25 v -20 a 45,45 0,0,0 -43,43 h 20 a 25,25 0,0,1 23,-23" />
<path class="glph" d="M -28,-28 h 10 m -10,0 v 10" />
</g>
<g class="icon" transform="rotate(135)" id="right">
<path class="bkg" d="M -2,-25 v -20 a 45,45 0,0,0 -43,43 h 20 a 25,25 0,0,1 23,-23" />
<path class="glph" d="M -28,-28 h 10 m -10,0 v 10" />
</g>
<g class="icon" transform="rotate(45)" id="up">
<path class="bkg" d="M -2,-25 v -20 a 45,45 0,0,0 -43,43 h 20 a 25,25 0,0,1 23,-23" />
<path class="glph" d="M -28,-28 h 10 m -10,0 v 10" />
</g>
<g class="icon" transform="rotate(-135)" id="down">
<path class="bkg" d="M -2,-25 v -20 a 45,45 0,0,0 -43,43 h 20 a 25,25 0,0,1 23,-23" />
<path class="glph" d="M -28,-28 h 10 m -10,0 v 10" />
</g>
<g class="icon">
<circle cx=0 cy=0 r=21 class="bkg" />
<path class="glphp" d="M0,6 h6 v-9 h3 l-9,-6 l-9,6 h3 v9 h3 v-6 h3 v6 z" />
</g>
</svg>
<svg id="zoomer" class="hidden" x=50 width = 90 height = 90 viewBox="-45 -45 90 90">
<g class="icon" transform="rotate(-45)" id="rotleft">
<path class="bkg" d="M -2,-25 v -20 a 45,45 0,0,0 -43,43 h 20 a 25,25 0,0,1 23,-23" />
<path class="glph" d="M -15,-28 a 20,20 0,0,0 -13,13 l 1,-9" />
</g>
<g class="icon" transform="rotate(135)" id="rotright">
<path class="bkg" d="M -2,-25 v -20 a 45,45 0,0,0 -43,43 h 20 a 25,25 0,0,1 23,-23" />
<path class="glph" d="M -28,-15 a 20,20 0,0,1 13,-13 l -9,1" />
</g>
<g class="icon" transform="rotate(45)" id="zoom_in">
<path class="bkg" d="M -2,-25 v -20 a 45,45 0,0,0 -43,43 h 20 a 25,25 0,0,1 23,-23" />
<path class="glph" d="M -28.5,-28.5 l8,8 m-8,0 l8,-8" />
</g>
<g class="icon" transform="rotate(-135)" id="zoom_out">
<path class="bkg" d="M -2,-25 v -20 a 45,45 0,0,0 -43,43 h 20 a 25,25 0,0,1 23,-23" />
<path class="glph" d="M -28.5,-20.5 l8,-8" />
</g>
<g class="icon">
<circle cx=0 cy=0 r=21 class="bkg" />
<path class="glphp" d="M0,6 h6 v-9 h3 l-9,-6 l-9,6 h3 v9 h3 v-6 h3 v6 z" />
</g>
</svg>
</svg>
</svg>
<style>
.icon .bkg { fill: orange ; transition: 0.1s}
.icon .glph {stroke : white; fill: #0000; stroke-width: 4px; stroke-linecap: round; stroke-linejoin: round; }
.icon .glphp { fill: white; stroke-width: 0px;}
.icon:hover:not(.switch) .bkg { fill: gold}
.icon:active:not(.switch) .bkg { fill: powderblue; transition: 0s}
.icon:active:not(.switch) .glph { stroke: lightcyan; transition: 0s; transition: 0s}
.icon:active:not(.switch) .glphp { fill: lightcyan; stroke-width: 0px;}
.switcheroo :not(.switch) {
opacity: 0;
visibility: hidden;
transition: opacity 1s 0.7s, visibility 1s 0.7s;
}
.switcheroo:hover :not(.switch) {
opacity: 1;
visibility: visible;
transition: opacity 0.5s 0s, visiblitiy 0.5s 0s;
}
.switcheroo .switch * {
opacity: 1;
visibility: visible;
transition: opacity 0.5s 0.7s, visibility 0.5s 0.7s;
}
.switcheroo:hover .switch * {
opacity: 0.5;
visibility: visible;
transition: opacity 0.5s 0s, visibility 0.5s 0s, r 0.5s 0s;
}
.hidden {display: none}
</style>
`
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.
