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