| license: mit |
A very simple example of how to run the wonderful JavaScript API for vega-lite directly in the browser. This one uses vegaEmbed to render the chart. The key is to use the api to generate the spec, and then vegaEmbed to render it.
Built with blockbuilder.org
forked from john-guerra's block: vega-lite JavaScript API browser example
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| </head> | |
| <body> | |
| <div id="chart"></div> | |
| <script src="https://cdn.jsdelivr.net/npm/vega@5.7.2"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vega-lite@4.0.0-beta.10"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vega-embed@5.1.3"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vega-lite-api@0.1.0"></script> | |
| <script> | |
| const chartSpec = vl | |
| .markBar() | |
| .data([ | |
| {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43}, | |
| {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53}, | |
| {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52} | |
| ]) | |
| .encode( | |
| vl.x().fieldQ("b"), | |
| vl.y().fieldN("a"), | |
| vl.tooltip(["b", "a"]) | |
| ) | |
| .toJSON(); | |
| vegaEmbed("#chart", chartSpec); | |
| </script> | |
| </body> | |
| </html> |