big graph to picture for wall - printing help

New To Observable
1

Hi dears! I am looking the way to print the big genesis graph on big wall banner - unfortunalely any attempt to make screenshot of export result to png of tiff - faces size limitations - could anyone please help me - how to make it?

here is the graph - use pan and zoom to observe:

2

If you want to print an image of that size youā€™ll need to keep it as a vector image instead of rasterizing it.

You can use the browserā€™s developer tools to inspect the SVG and copy its outerHTML:

image
image1920Ɨ930 101 KB

Save the copied markup to a new text file and give it an .svg extension. Afterwards youā€™ll likely need to edit the viewBox attribute until all of the graph is within the visible bounds.

Whatever service you use for printing may be able to handle SVGs directly, but just to be safe youā€™ll likely want to convert it to a PDF.

1 Like
3

Thank you for solution! It is great - however there is no portrait pictures within - the next question is - how to add pictures?

image
image1814Ɨ1080 119 KB

4

You will likely have to inline all the images. One thing you can do is to run the following snippet in the developer console to turn all image URLs into data URLs:

await Promise.all([...$$("image")].map(async n => new Promise(async(resolve, reject) => {
    const url = n.getAttribute("href");
    if(!url) return resolve(false);
    const reader = new FileReader();
    reader.addEventListener("load", () => {
        n.setAttribute("href", reader.result);
        resolve(true);
    });
    reader.readAsDataURL(await fetch(url).then(r => r.blob()));
})))

Unfortunately youā€™ll end up with a 50+ MB document. Since most of these images are placeholders it would probably be wise to extend the script above to declare these as <defs> and then replace the actual images with <use> references.

1 Like
5

Thank U so much, bro! Iā€™ve done with my task!

1 Like