extract-vega-pixels.html

<!doctype html>
<html>
    <head>
        <title>Extract Pixels from Vega</title>
    </head>
    <body>
        <p>The extractor uses an in-memory dummy canvas. Image data will be printed in the console.</p>

        <script src="dist/bundle.js" type="text/javascript"></script>
        <script>
            let spec = {
                "$schema": "https://vega.github.io/schema/vega-lite/v2.0.json",
                "description": "A simple bar chart with embedded data.",
                "data": {
                    "values": [
                        {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
                        {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
                        {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
                    ]
                },
                "mark": "bar",
                "encoding": {
                    "x": {"field": "a", "type": "ordinal"},
                    "y": {"field": "b", "type": "quantitative"}
                },
                "config": {
                    "axis": {
                        "labelFont": "serif",
                        "labelFontSize": 16,
                        "tickWidth": 3,
                        "tickColor": "red"
                    }
                }
            }
            
            MCS.extract(spec).then((imageData) => {
                console.log(imageData);
            })
        </script>
    </body>
</html>