Software developer and power user
viewer = createViewer(container, tileSource)
tileSourceInfo = fetch(tileSource).then(response => response.json())
tileSource = {
const url = "https://free.iiifhosting.com/iiif/e065703b1dd13632b66e85ef9731bafcb78884a2c4e2aab3a3cfe6ae4d7ef9c7/";
return `${url}info.json`;
}
createContainer = () => html`<div id="viewer" style="width: ${width}px; height: ${height}px;" />`
height = Math.round(width / widthToHeightRatio)
widthToHeightRatio = {
const defaultWidth = 954;
const correspondingHeight = 796; // source image resized to the default width maintaining the aspect ratio
return defaultWidth / correspondingHeight;
}
createViewer = (container, tileSource) => {
const options = {
constrainDuringPan: true,
element: container,
minZoomLevel: 1,
prefixUrl: "https://openseadragon.github.io/openseadragon/images/",
showNavigator: true,
tileSources: [tileSource],
visibilityRatio: 1,
};
return OpenSeadragon(options);
}
OpenSeadragon = {
const OpenSeadragon = await require("openseadragon@2");
OpenSeadragon.setString("Tooltips.Home", "Reset zoom");
OpenSeadragon.setString("Tooltips.FullPage","View in full screen");
return OpenSeadragon;
}
{
viewer.setDebugMode(debugMode);
return debugMode;
}
format = {
const usingGroupSeparator = ","; // such as comma for thousands
return d3.format(usingGroupSeparator);
}
d3 = require("d3-format")
html`<style>
code {
background-color: #efefef;
padding-left: 3px;
padding-right: 3px;
}
</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.
