jakhog/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
        <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
        <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>

        <style>
            #container {
                width: 60%;
                height: 400px;
                border: 5px solid red;
            }
            #vis {
                height: 100%;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="vis"></div>
        </div>
        <button id="toggleScrollbar">Toggle Scrollbar</button>
        <script type="text/javascript">
            const spec = {
                $schema: "https://vega.github.io/schema/vega-lite/v5.json",
                width: "container",
                height: "container",
                description: "Google's stock price over time.",
                data: { url: "https://raw.githubusercontent.com/vega/vega/main/docs/data/stocks.csv" },
                transform: [{ filter: "datum.symbol==='GOOG'" }],
                mark: "line",
                encoding: {
                    x: { field: "date", type: "temporal" },
                    y: { field: "price", type: "quantitative" }
                }
            };
            vegaEmbed("#vis", spec, { actions: false });

            document.getElementById("toggleScrollbar").addEventListener('click', () => {
                const value = document.body.style.overflowY === 'scroll' ? 'initial' : 'scroll';
                document.body.style.overflowY = value;
            });
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
	<script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
	<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>

	<style>
	#container {
	width: 60%;
	height: 400px;
	border: 5px solid red;
	}
	#vis {
	height: 100%;
	width: 100%;
	}
	</style>
	</head>
	<body>
	<div id="container">
	<div id="vis"></div>
	</div>
	<button id="toggleScrollbar">Toggle Scrollbar</button>
	<script type="text/javascript">
	const spec = {
	$schema: "https://vega.github.io/schema/vega-lite/v5.json",
	width: "container",
	height: "container",
	description: "Google's stock price over time.",
	data: { url: "https://raw.githubusercontent.com/vega/vega/main/docs/data/stocks.csv" },
	transform: [{ filter: "datum.symbol==='GOOG'" }],
	mark: "line",
	encoding: {
	x: { field: "date", type: "temporal" },
	y: { field: "price", type: "quantitative" }
	}
	};
	vegaEmbed("#vis", spec, { actions: false });

	document.getElementById("toggleScrollbar").addEventListener('click', () => {
	const value = document.body.style.overflowY === 'scroll' ? 'initial' : 'scroll';
	document.body.style.overflowY = value;
	});
	</script>
	</body>
	</html>