/* function renderZoomButtons(container, Graph) {
const buttons = html`
<div id="zoom-controls">
<div name="plus" id="filter" button class="c-button">
<svg transform="scale(0.8)" fill="rgba(0, 0, 0, 0.4)" viewBox="64 64 896 896" width="25px" height="25px" fill="currentColor" aria-hidden="true"><path d="M880.1 154H143.9c-24.5 0-39.8 26.7-27.5 48L349 597.4V838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V597.4L907.7 202c12.2-21.3-3.1-48-27.6-48zM603.4 798H420.6V642h182.9v156zm9.6-236.6l-9.5 16.6h-183l-9.5-16.6L212.7 226h598.6L613 561.4z"></path></svg>
</div>
<div name="plus" id="center" button class="c-button">
<svg
id="center-svg"
width="25"
height="25"
viewBox="0 0 25 25"
fill="rgba(0, 0, 0, 0.4)"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M3 3H9V5H5V9H3V3Z" />
<path d="M3 21H9V19H5V15H3V21Z" />
<path d="M15 21H21V15H19V19H15V21Z" />
<path d="M21 3H15V5H19V9H21V3Z" />
</svg>
</div>
<div name="plus" id="in" button class="c-button">
<svg id="plus-svg" width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 11.5v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4z" fill="rgba(0, 0, 0, 0.4)" fill-rule="evenodd"/></svg>
</div>
<div name="minus" id="out" button class="c-button">
<svg id="minus-svg" width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"><title>Minus</title><path d="M11.5 7.5h2v10h-2z" fill="rgba(0, 0, 0, 0.4)" fill-rule="evenodd"/></svg>
</div>
</div>
`
const styles = html`
<style type="text/css">
#zoom-controls {
width: 25px;
height: 100px;
position: absolute;
bottom: 0px;
right: 0px;
margin: 0px;
border-radius: 2px;
overflow: hidden;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);
transition: all 200ms ease-out;
transform: scale(1.3);
}
#filter {
width: 25px;
height: 25px;
position: relative;
background: #fff;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
overflow: hidden;
transform: scale(0.8);
}
#filter:hover {
cursor: pointer;
fill: #000;
}
#center {
width: 25px;
height: 25px;
position: relative;
background: #fff;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
overflow: hidden;
transform: scale(0.8);
}
#center:hover {
cursor: pointer;
fill: #000;
}
#in {
width: 25px;
height: 25px;
position: relative;
background: #fff;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
overflow: hidden;
}
#in:hover {
cursor: pointer;
fill: #000;
}
#out {
width: 25px;
height: 25px;
position: relative;
background: #fff;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
overflow: hidden;
}
#out:hover {
cursor: pointer;
}
#minus-svg {
transform: rotate(90deg);
}
#center-svg:hover path {
fill: #444;
}
#minus-svg:hover path {
fill: #444;
}
#plus-svg:hover path {
fill: #444;
}
#minus-svg path,
#center-svg path,
#plus-svg path {
transition: all 200ms ease-out;
}
</style>
`
buttons.querySelector("#filter").addEventListener("click", () => {
filterButtonClick()
})
buttons.querySelector("#in").addEventListener("click", () => {
Graph.zoom(currentZoom.k * 1.4, 250)
mutable currentZoom.k = currentZoom.k * 1.4
})
buttons.querySelector("#out").addEventListener("click", () => {
Graph.zoom(currentZoom.k * 0.6, 250)
mutable currentZoom.k = currentZoom.k * 0.6
})
buttons.querySelector("#center").addEventListener("click", () => {
Graph.zoomToFit(250, 50)
mutable currentZoom.k = 1
})
container.appendChild(buttons)
container.appendChild(styles)
}
*/
mutable canvasBGColor = "#cccccc"
mutable lightblue = "#11b8f0"
mutable dotscolor = "#cc44fc"
mutable bgcolor = "ccad00"
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.
