Revision as of 05:27, 12 November 2020

Template for Embedding Vega-Lite Visualization

@@ Line 16: / Line 16: @@
 <div id="vis"></div>
 <script>
-      // Assign the specification to a local variable vlSpec.
+// Assign the specification to a local variable vlSpec.
-      var vlSpec = {
+var vlSpec = {
-        $schema: 'https://vega.github.io/schema/vega-lite/v4.json',
+$schema: 'https://vega.github.io/schema/vega-lite/v4.json',
-        data: {
+data: {
-          values: [
+values: [
-            {a: 'C', b: 2},
+{a: 'C', b: 2},
-            {a: 'C', b: 7},
+{a: 'C', b: 7},
-            {a: 'C', b: 4},
+{a: 'C', b: 4},
-            {a: 'D', b: 1},
+{a: 'D', b: 1},
-            {a: 'D', b: 2},
+{a: 'D', b: 2},
-            {a: 'D', b: 6},
+{a: 'D', b: 6},
-            {a: 'E', b: 8},
+{a: 'E', b: 8},
-            {a: 'E', b: 4},
+{a: 'E', b: 4},
-            {a: 'E', b: 7}
+{a: 'E', b: 7}
-          ]
+]
-        },
+},
-        mark: 'bar',
+mark: 'bar',
-        encoding: {
+encoding: {
-          y: {field: 'a', type: 'nominal'},
+y: {field: 'a', type: 'nominal'},
-          x: {
+x: {
-            aggregate: 'average',
+aggregate: 'average',
-            field: 'b',
+field: 'b',
-            type: 'quantitative',
+type: 'quantitative',
-            axis: {
+axis: {
-              title: 'Average of b'
+title: 'Average of b'
-            }
+}
-          }
+}
-        }
+}
-      };
+};
+// Embed the visualization in the container with id `vis`
-      // Embed the visualization in the container with id `vis`
+vegaEmbed('#vis', vlSpec);
-      vegaEmbed('#vis', vlSpec);
 </script>
 </body>
 </html>