Agricultural economics · Thünen Institute of Farm Economics / University Bonn
// This function converts svg strings into base64 png urls
// which you can use for creating patterns in mapbox
function rasterize(svgString, size = 50, interpolation = 1) {
const svg = html`${svgString}`;
svg.setAttribute('width', size * interpolation);
svg.setAttribute('height', size * interpolation);
let resolve, reject;
const promise = new Promise((y, n) => ((resolve = y), (reject = n)));
const image = new Image();
image.onerror = reject;
image.onload = () => {
const context = DOM.context2d(size * interpolation, size * interpolation);
for (let i = 0; i < interpolation; i++) {
for (let j = 0; j < interpolation; j++) {
context.drawImage(image, i * size, j * size, size, size);
}
}
resolve(context.canvas.toDataURL("image/png"));
};
const serializedSVG = new XMLSerializer().serializeToString(svg);
const base64Data = window.btoa(serializedSVG);
const imgsrc = `data:image/svg+xml;base64,${base64Data}`;
image.src = imgsrc;
return promise;
}
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.
