Unlisted
Edited
Dec 18
Importers
1 star
htmlToImage = import("https://cdn.skypack.dev/html-to-image@1.11.1?min")
image(chart)
image = async (node) => {
const n = d3.select(node);
const pb = n.style("padding-bottom");
const bg = n.style("background-color");
if (node.nodeName === "FIGURE") {
n.style("padding-bottom", ".4em");
n.style("background-color", "white");
}
const im = await htmlToImage.toCanvas(node, { pixelRatio: 2 });
im.style = `width: ${im.width >> 1}px`;
if (pb) n.style("padding-bottom", pb); // restores the original styles.
if (bg) n.style("background-color", bg);
return im;
}
import {plotca} from "@observablehq/plot-raster"
plotca1 = plotca
image(plotca1)
import {winds} from "@observablehq/plot-mapping"
winds1 = winds
image(winds1)
image(d3.select("h1").node())
import { chart as sankey } from "@d3/sankey/2"
sankeychart = sankey
image(sankeychart)
sankeychart2 = sankeychart.cloneNode(true)
image2(sankeychart2)
image2 = async (node) => {
const n = d3.select(node);
const pb = n.style("padding-bottom");
const bg = n.style("background-color");
if (node.nodeName === "FIGURE") {
n.style("padding-bottom", ".4em");
n.style("background-color", "white");
}
const colorUrlMap = fixColorUrl(n);
const im = await htmlToImage.toCanvas(node, { pixelRatio: 2 });
im.style = `width: ${im.width >> 1}px`;
if (pb) n.style("padding-bottom", pb); // restores the original styles.
if (bg) n.style("background-color", bg);
for (const [d, kind, v] of colorUrlMap) d.style[kind] = v;
return im;
// Fixes attributes and styles such as stroke="url(https://worker.url#id)"
function fixColorUrl(n) {
const re = new RegExp(
`^url[(]['"]?${document.location.href.replaceAll(
/[|\\{}()[\]^$+*?.]/g,
"\\$&"
)}(#.*?)['"]?[)]$`
);
const colorUrlMap = [];
for (const d of node.querySelectorAll("*")) {
const styles = getComputedStyle(d);
for (const kind of ["stroke", "fill"]) {
const st = styles[kind];
if (st && re.test(st)) {
colorUrlMap.push([d, kind, d.style[kind]]);
d.style[kind] = st.replace(re, 'url("$1")');
}
}
}
return colorUrlMap;
}
}
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.
