Exporting Visualizations¶

A gosling visualization can be exported to either a standalone HTML file or a JSON object by calling the save function. The format of the exported visualization is determined by a file extension you specify (i.e., *.html or *.json).

HTML¶

You can save an HTML file that embeds your Gosling visualization.

vis = gos.Track(
    gos.bigwig("https://s3.amazonaws.com/gosling-lang.org/data/HFFc6_H3K4me3.bigWig")
).encode(
    x='position:G',
    y='value:Q'
).view()

vis.save('gosling.html')

The saved HTML file includes all resources that are needed to display Gosling visualization on the webpage.

<!DOCTYPE html>
<html>
<head>
    <style>.error { color: red; }</style>
    <link rel="stylesheet" href="https://esm.sh/higlass@1.11/dist/hglib.css">
</head>
<body>
    <div id="vis"></div>
    <script type="module">
        import * as gosling from "https://esm.sh/gosling.js@0.9.22?bundle&deps=react-dom@17,react@17,pixi.js@6,higlass@1.11";
        let el = document.querySelector('#vis');
        let spec = {"tracks": [{"data": {"type": "bigwig", "url": "https://s3.amazonaws.com/gosling-lang.org/data/HFFc6_H3K4me3.bigWig"}, "mark": "bar", "height": 180, "width": 800, "x": {"field": "position", "type": "genomic"}, "y": {"field": "value", "type": "quantitative"}}]};
        let opts = {"padding": 0, "theme": null};
        gosling.embed(el, spec, opts).catch(err => {
            el.innerHTML = `<div class="error">
                    <p>JavaScript Error: ${error.message}</p>
                    <p>This usually means there's a typo in your Gosling specification. See the javascript console for the full traceback.</p>
                </div>`;
            throw error;
        });
    </script>
</body>
</html>

If you open the HTML file on your browser, you will be able to see your visualization displayed on the page.

JSON¶

You can save the JSON object of your Gosling visualization.

vis = gos.Track(
    gos.bigwig("https://s3.amazonaws.com/gosling-lang.org/data/HFFc6_H3K4me3.bigWig")
).encode(
    x='position:G',
    y='value:Q'
).view()

vis.save('gosling.json')

This object is a full specification of your Gosling visualization. You can copy the object and paste it on the Gosling Editor to display your visualization.

{
    "tracks": [
        {
            "data": {
                "type": "bigwig",
                "url": "https://s3.amazonaws.com/gosling-lang.org/data/HFFc6_H3K4me3.bigWig"
            },
            "height": 180,
            "mark": "bar",
            "width": 800,
            "x": {
                "field": "position",
                "type": "genomic"
            },
            "y": {
                "field": "value",
                "type": "quantitative"
            }
        }
    ]
}