steveharoz/index.html

## index.html
<body>
  <div id="chartDiv"></div>

  <script src="https://vega.github.io/vega/vega.min.js"></script>

  <script type="text/javascript">
    var chartSpec1 = {
        "$schema": "https://vega.github.io/schema/vega/v3.json",
        "width": 400,
        "height": 400,
        "padding": 5,
        "title": "blah blah blah blah blah blah blah blah blah",

        "data": [
            {
            "name": "table",
            "values": [
                {"x": 2000, "y": 0.28},
                {"x": 2000.5, "y": 0.49},
                {"x": 2001, "y": 0.49},
                {"x": 2001.5, "y": 0.29},
                {"x": 2002, "y": 0.32},
                {"x": 2002.5, "y": 0.36},
                {"x": 2003, "y": 0.59},
                {"x": 2003.5, "y": 0.62}
            ]
            }
        ],

        "scales": [
            {
            "name": "x",
            "type": "linear",
            "range": "width",
            "zero": false,
            "domain": [2000, 2010]
            },
            {
            "name": "y",
            "type": "linear",
            "range": "height",
            "domain": [0, 1]
            }
        ],

        "axes": [
            {"orient": "bottom", "scale": "x", "format": ".0f"},
            {"orient": "left", "scale": "y", "format": "%"}
        ],

        "marks": [
            {
            "type": "group",
            "from": {
                "facet": {
                "name": "series",
                "data": "table",
                "groupby": "c"
                }
            },
            "marks": [
                {
                "type": "line",
                "from": {"data": "series"},
                "encode": {
                    "enter": {
                    "x": {"scale": "x", "field": "x"},
                    "y": {"scale": "y", "field": "y"},
                    "stroke": {"value": "#276EB8"},
                    "strokeWidth": {"value": 4}
                    }
                }
                }
            ]
            }
        ]
    }


  </script>

  <script type="text/javascript">
    var view = new vega.View(vega.parse(chartSpec1))
        .renderer('svg')  // set renderer (canvas or svg)
        .initialize('#view') // initialize view within parent DOM container
        .run();

    function replaceChart(title, xValues, yValues) {
        // put new values into the chart spec
        chartSpec1.title = title;
        chartSpec1.data[0].values = [];
        for (let i = 0; i < xValues.length; i++) {
            chartSpec1.data[0].values.push(
                {"x": xValues[i], "y": yValues[i]}
            );
        }

        // clear out the old chart and replace with the new one
        view = new vega.View(vega.parse(chartSpec1))
            .renderer('svg')  // set renderer (canvas or svg)
            .initialize('#chartDiv') // initialize view within parent DOM container
            .run();
    }

    var years = [2000, 2000.5, 2001, 2001.5, 2002, 2002.5, 2003, 2003.5];

    // timer to replace chart with new title and random data
    setInterval( () => {
        replaceChart(
            "Title " + Date.now().toLocaleString(),
            years,
            years.map(x => Math.random()/5 + (x-2000)/10)
        )
    }, 200)

  </script>
</body>
	<body>
	<div id="chartDiv"></div>

	<script src="https://vega.github.io/vega/vega.min.js"></script>

	<script type="text/javascript">
	var chartSpec1 = {
	"$schema": "https://vega.github.io/schema/vega/v3.json",
	"width": 400,
	"height": 400,
	"padding": 5,
	"title": "blah blah blah blah blah blah blah blah blah",

	"data": [
	{
	"name": "table",
	"values": [
	{"x": 2000, "y": 0.28},
	{"x": 2000.5, "y": 0.49},
	{"x": 2001, "y": 0.49},
	{"x": 2001.5, "y": 0.29},
	{"x": 2002, "y": 0.32},
	{"x": 2002.5, "y": 0.36},
	{"x": 2003, "y": 0.59},
	{"x": 2003.5, "y": 0.62}
	]
	}
	],

	"scales": [
	{
	"name": "x",
	"type": "linear",
	"range": "width",
	"zero": false,
	"domain": [2000, 2010]
	},
	{
	"name": "y",
	"type": "linear",
	"range": "height",
	"domain": [0, 1]
	}
	],

	"axes": [
	{"orient": "bottom", "scale": "x", "format": ".0f"},
	{"orient": "left", "scale": "y", "format": "%"}
	],

	"marks": [
	{
	"type": "group",
	"from": {
	"facet": {
	"name": "series",
	"data": "table",
	"groupby": "c"
	}
	},
	"marks": [
	{
	"type": "line",
	"from": {"data": "series"},
	"encode": {
	"enter": {
	"x": {"scale": "x", "field": "x"},
	"y": {"scale": "y", "field": "y"},
	"stroke": {"value": "#276EB8"},
	"strokeWidth": {"value": 4}
	}
	}
	}
	]
	}
	]
	}


	</script>

	<script type="text/javascript">
	var view = new vega.View(vega.parse(chartSpec1))
	.renderer('svg') // set renderer (canvas or svg)
	.initialize('#view') // initialize view within parent DOM container
	.run();

	function replaceChart(title, xValues, yValues) {
	// put new values into the chart spec
	chartSpec1.title = title;
	chartSpec1.data[0].values = [];
	for (let i = 0; i < xValues.length; i++) {
	chartSpec1.data[0].values.push(
	{"x": xValues[i], "y": yValues[i]}
	);
	}

	// clear out the old chart and replace with the new one
	view = new vega.View(vega.parse(chartSpec1))
	.renderer('svg') // set renderer (canvas or svg)
	.initialize('#chartDiv') // initialize view within parent DOM container
	.run();
	}

	var years = [2000, 2000.5, 2001, 2001.5, 2002, 2002.5, 2003, 2003.5];

	// timer to replace chart with new title and random data
	setInterval( () => {
	replaceChart(
	"Title " + Date.now().toLocaleString(),
	years,
	years.map(x => Math.random()/5 + (x-2000)/10)
	)
	}, 200)

	</script>
	</body>