FM-ds.github.io/chartEmbed3_multiple.html at main · FM-ds/FM-ds.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>

<html>
<!-- Richard Davies, Data Science-->
<!-- Based on our discussion what is this page going to produce?-->


<!-- ///////////////////  HEAD //////////////////////////////////// -->
<head>
  <!--The next three lines allow the Vega embed-->
  <script src="https://cdn.jsdelivr.net/npm/vega@5.17.0"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@4.17.0"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.12.2"></script>
</head>
<!-- ///////////////////  HEAD //////////////////////////////////// -->


<!-- ///////////////////  START BODY //////////////////////////////////// -->
<body>
    <!--Divs for 6 charts-->
    <div class="chart" id="chart1"></div>
    <div class="chart" id="chart2"></div>
    <div class="chart" id="chart3"></div>
    <div class="chart" id="chart4"></div>
    <div class="chart" id="chart5"></div>
    <div class="chart" id="chart6"></div>
</body>
<!-- ///////////////////  END BODY //////////////////////////////////// -->


<!-- ///////////////////  START JS //////////////////////////////////// -->
<script>
    // Define our charts:
    var myChart1 = "chart1_covidUKRegions.json";
    var myChart2 = "chart2_ukProductivity.json";

    // Embed charts:
    vegaEmbed('#chart1', myChart1);
    vegaEmbed('#chart2', myChart2);
    vegaEmbed('#Chart3', myChart1);
    vegaEmbed('#chart4', myChart1);
    vegaEmbed('#chart5', myChart2);
</script>
<!-- ///////////////////  END JS //////////////////////////////////// -->

</html>