Simple Vega in HTML replaced by new chart by steveharoz

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>