Update README.md

README.md

@@ -1,4 +1,8 @@
-<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> 
+<script src="https://cdn.jsdelivr.net/npm/vega@5.30.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/vega-lite@5.21.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.26.0"></script>
+
+
 
 # < 👋 Hello World >
 <link rel="me" href="https://mastodon.squarecows.com/@Ric">
@@ -6,27 +10,34 @@ Hi everyone and welcome to my profile, I'm Richard Harvey (or you can call me Ri
 
 ## test chart
 
-<canvas id="myChart" style="width:100%;max-width:700px"></canvas> 
+<div id="vis"></div>
 
-<script>
+<script type="text/javascript">
-const xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
+      var yourVlSpec = {
-const yValues = [55, 49, 44, 24, 15];
+        $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
-const barColors = ["red", "green","blue","orange","brown"];
+        description: 'A simple bar chart with embedded data.',
-
+        data: {
-new Chart("myChart", {
+          values: [
-  type: "bar",
+            {a: 'A', b: 28},
-  data: {
+            {a: 'B', b: 55},
-    labels: xValues,
+            {a: 'C', b: 43},
-    datasets: [{
+            {a: 'D', b: 91},
-      backgroundColor: barColors,
+            {a: 'E', b: 81},
-      data: yValues
+            {a: 'F', b: 53},
-    }]
+            {a: 'G', b: 19},
-  },
+            {a: 'H', b: 87},
-  options: {...}
+            {a: 'I', b: 52}
-});
+          ]
+        },
+        mark: 'bar',
+        encoding: {
+          x: {field: 'a', type: 'ordinal'},
+          y: {field: 'b', type: 'quantitative'}
+        }
+      };
+      vegaEmbed('#vis', yourVlSpec);
 </script>
 
-
 ## Contact