Difference between revisions of "Web Element: Vega Lite"
| (One intermediate revision by the same user not shown) | |||
| 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> |
| + | <h1>Template for Embedding Vega-Lite Visualization</h1> | ||
| + | <!-- Container for the visualization --> | ||
| + | <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 = { | ||
| Line 48: | Line 53: | ||
// 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> | + | </script> |
| − | </body> | + | </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
