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