Difference between revisions of "Web Element: Vega Lite"
| Line 1: | Line 1: | ||
<html> | <html> | ||
| − | <head> | + | <head> |
| − | <script src="https://cdn.jsdelivr.net/npm/vega@5.17.0"></script> | + | <title>Vega-Lite Bar Chart</title> |
| − | <script src="https://cdn.jsdelivr.net/npm/vega-lite@4.17.0"></script> | + | <meta charset="utf-8" /> |
| − | <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.12.2"></script> | + | |
| − | <style media="screen"> | + | <script src="https://cdn.jsdelivr.net/npm/vega@5.17.0"></script> |
| − | /* Add space between Vega-Embed links */ | + | <script src="https://cdn.jsdelivr.net/npm/vega-lite@4.17.0"></script> |
| − | .vega-actions a { | + | <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.12.2"></script> |
| − | margin-right: 5px; | + | |
| − | } | + | <style media="screen"> |
| − | </style> | + | /* Add space between Vega-Embed links */ |
| − | </head> | + | .vega-actions a { |
| − | <body> | + | margin-right: 5px; |
| − | <h1>Template for Embedding Vega-Lite Visualization</h1> | + | } |
| − | <!-- Container for the visualization --> | + | </style> |
| − | <div id="vis"></div> | + | </head> |
| − | <script> | + | <body> |
| − | // Assign the specification to a local variable vlSpec. | + | <h1>Template for Embedding Vega-Lite Visualization</h1> |
| − | var vlSpec = { | + | <!-- Container for the visualization --> |
| − | $schema: 'https://vega.github.io/schema/vega-lite/v4.json', | + | <div id="vis"></div> |
| − | data: { | + | |
| − | values: [ | + | <script> |
| − | {a: 'C', b: 2}, | + | // Assign the specification to a local variable vlSpec. |
| − | {a: 'C', b: 7}, | + | var vlSpec = { |
| − | {a: 'C', b: 4}, | + | $schema: 'https://vega.github.io/schema/vega-lite/v4.json', |
| − | {a: 'D', b: 1}, | + | data: { |
| − | {a: 'D', b: 2}, | + | values: [ |
| − | {a: 'D', b: 6}, | + | {a: 'C', b: 2}, |
| − | {a: 'E', b: 8}, | + | {a: 'C', b: 7}, |
| − | {a: 'E', b: 4}, | + | {a: 'C', b: 4}, |
| − | {a: 'E', b: 7} | + | {a: 'D', b: 1}, |
| − | ] | + | {a: 'D', b: 2}, |
| − | }, | + | {a: 'D', b: 6}, |
| − | mark: 'bar', | + | {a: 'E', b: 8}, |
| − | encoding: { | + | {a: 'E', b: 4}, |
| − | y: {field: 'a', type: 'nominal'}, | + | {a: 'E', b: 7} |
| − | x: { | + | ] |
| − | aggregate: 'average', | + | }, |
| − | field: 'b', | + | mark: 'bar', |
| − | type: 'quantitative', | + | encoding: { |
| − | axis: { | + | y: {field: 'a', type: 'nominal'}, |
| − | title: 'Average of b' | + | x: { |
| − | } | + | aggregate: 'average', |
| − | } | + | field: 'b', |
| − | } | + | type: 'quantitative', |
| − | }; | + | axis: { |
| − | // Embed the visualization in the container with id `vis` | + | title: 'Average of b' |
| − | vegaEmbed('#vis', vlSpec); | + | } |
| − | </script> | + | } |
| − | </body> | + | } |
| + | }; | ||
| + | |||
| + | // Embed the visualization in the container with id `vis` | ||
| + | vegaEmbed('#vis', vlSpec); | ||
| + | </script> | ||
| + | </body> | ||
</html> | </html> | ||
hkilter.com by H. K. Ilter is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License
© 2020 H. K. Ilter
