Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/swissmanu/vega-chart-viewer
https://github.com/swissmanu/vega-chart-viewer
Last synced: 10 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/swissmanu/vega-chart-viewer
- Owner: swissmanu
- Created: 2023-08-17T14:55:27.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-22T09:01:15.000Z (over 1 year ago)
- Last Synced: 2024-12-09T09:18:19.334Z (18 days ago)
- Language: HTML
- Homepage:
- Size: 8.79 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vega-chart-viewer
A simple way to render Vega-based visualizations.
## Basic Usage
1. Create a chart with Vega. For demonstration purposes, use [this bar chart from the Vega examples library](https://vega.github.io/editor/#/examples/vega/bar-chart).
2. Base 64-encode your charts JSON chart spec. Make sure you use [URL-safe base 64 encoding](https://www.rfc-editor.org/rfc/rfc4648#section-5).
3. Pass the encoded chart spec using the `d` query parameter to `vega-chart-viewer`: [https://swissmanu.github.io/vega-chart-viewer/?d=ewog...](https://swissmanu.github.io/vega-chart-viewer/?d=ewogICIkc2NoZW1hIjogImh0dHBzOi8vdmVnYS5naXRodWIuaW8vc2NoZW1hL3ZlZ2EvdjUuanNvbiIsCiAgImRlc2NyaXB0aW9uIjogIkEgYmFzaWMgYmFyIGNoYXJ0IGV4YW1wbGUsIHdpdGggdmFsdWUgbGFiZWxzIHNob3duIHVwb24gbW91c2UgaG92ZXIuIiwKICAid2lkdGgiOiA0MDAsCiAgImhlaWdodCI6IDIwMCwKICAicGFkZGluZyI6IDUsCgogICJkYXRhIjogWwogICAgewogICAgICAibmFtZSI6ICJ0YWJsZSIsCiAgICAgICJ2YWx1ZXMiOiBbCiAgICAgICAgeyJjYXRlZ29yeSI6ICJBIiwgImFtb3VudCI6IDI4fSwKICAgICAgICB7ImNhdGVnb3J5IjogIkIiLCAiYW1vdW50IjogNTV9LAogICAgICAgIHsiY2F0ZWdvcnkiOiAiQyIsICJhbW91bnQiOiA0M30sCiAgICAgICAgeyJjYXRlZ29yeSI6ICJEIiwgImFtb3VudCI6IDkxfSwKICAgICAgICB7ImNhdGVnb3J5IjogIkUiLCAiYW1vdW50IjogODF9LAogICAgICAgIHsiY2F0ZWdvcnkiOiAiRiIsICJhbW91bnQiOiA1M30sCiAgICAgICAgeyJjYXRlZ29yeSI6ICJHIiwgImFtb3VudCI6IDE5fSwKICAgICAgICB7ImNhdGVnb3J5IjogIkgiLCAiYW1vdW50IjogODd9CiAgICAgIF0KICAgIH0KICBdLAoKICAic2lnbmFscyI6IFsKICAgIHsKICAgICAgIm5hbWUiOiAidG9vbHRpcCIsCiAgICAgICJ2YWx1ZSI6IHt9LAogICAgICAib24iOiBbCiAgICAgICAgeyJldmVudHMiOiAicmVjdDptb3VzZW92ZXIiLCAidXBkYXRlIjogImRhdHVtIn0sCiAgICAgICAgeyJldmVudHMiOiAicmVjdDptb3VzZW91dCIsICAidXBkYXRlIjogInt9In0KICAgICAgXQogICAgfQogIF0sCgogICJzY2FsZXMiOiBbCiAgICB7CiAgICAgICJuYW1lIjogInhzY2FsZSIsCiAgICAgICJ0eXBlIjogImJhbmQiLAogICAgICAiZG9tYWluIjogeyJkYXRhIjogInRhYmxlIiwgImZpZWxkIjogImNhdGVnb3J5In0sCiAgICAgICJyYW5nZSI6ICJ3aWR0aCIsCiAgICAgICJwYWRkaW5nIjogMC4wNSwKICAgICAgInJvdW5kIjogdHJ1ZQogICAgfSwKICAgIHsKICAgICAgIm5hbWUiOiAieXNjYWxlIiwKICAgICAgImRvbWFpbiI6IHsiZGF0YSI6ICJ0YWJsZSIsICJmaWVsZCI6ICJhbW91bnQifSwKICAgICAgIm5pY2UiOiB0cnVlLAogICAgICAicmFuZ2UiOiAiaGVpZ2h0IgogICAgfQogIF0sCgogICJheGVzIjogWwogICAgeyAib3JpZW50IjogImJvdHRvbSIsICJzY2FsZSI6ICJ4c2NhbGUiIH0sCiAgICB7ICJvcmllbnQiOiAibGVmdCIsICJzY2FsZSI6ICJ5c2NhbGUiIH0KICBdLAoKICAibWFya3MiOiBbCiAgICB7CiAgICAgICJ0eXBlIjogInJlY3QiLAogICAgICAiZnJvbSI6IHsiZGF0YSI6InRhYmxlIn0sCiAgICAgICJlbmNvZGUiOiB7CiAgICAgICAgImVudGVyIjogewogICAgICAgICAgIngiOiB7InNjYWxlIjogInhzY2FsZSIsICJmaWVsZCI6ICJjYXRlZ29yeSJ9LAogICAgICAgICAgIndpZHRoIjogeyJzY2FsZSI6ICJ4c2NhbGUiLCAiYmFuZCI6IDF9LAogICAgICAgICAgInkiOiB7InNjYWxlIjogInlzY2FsZSIsICJmaWVsZCI6ICJhbW91bnQifSwKICAgICAgICAgICJ5MiI6IHsic2NhbGUiOiAieXNjYWxlIiwgInZhbHVlIjogMH0KICAgICAgICB9LAogICAgICAgICJ1cGRhdGUiOiB7CiAgICAgICAgICAiZmlsbCI6IHsidmFsdWUiOiAic3RlZWxibHVlIn0KICAgICAgICB9LAogICAgICAgICJob3ZlciI6IHsKICAgICAgICAgICJmaWxsIjogeyJ2YWx1ZSI6ICJyZWQifQogICAgICAgIH0KICAgICAgfQogICAgfSwKICAgIHsKICAgICAgInR5cGUiOiAidGV4dCIsCiAgICAgICJlbmNvZGUiOiB7CiAgICAgICAgImVudGVyIjogewogICAgICAgICAgImFsaWduIjogeyJ2YWx1ZSI6ICJjZW50ZXIifSwKICAgICAgICAgICJiYXNlbGluZSI6IHsidmFsdWUiOiAiYm90dG9tIn0sCiAgICAgICAgICAiZmlsbCI6IHsidmFsdWUiOiAiIzMzMyJ9CiAgICAgICAgfSwKICAgICAgICAidXBkYXRlIjogewogICAgICAgICAgIngiOiB7InNjYWxlIjogInhzY2FsZSIsICJzaWduYWwiOiAidG9vbHRpcC5jYXRlZ29yeSIsICJiYW5kIjogMC41fSwKICAgICAgICAgICJ5IjogeyJzY2FsZSI6ICJ5c2NhbGUiLCAic2lnbmFsIjogInRvb2x0aXAuYW1vdW50IiwgIm9mZnNldCI6IC0yfSwKICAgICAgICAgICJ0ZXh0IjogeyJzaWduYWwiOiAidG9vbHRpcC5hbW91bnQifSwKICAgICAgICAgICJmaWxsT3BhY2l0eSI6IFsKICAgICAgICAgICAgeyJ0ZXN0IjogImRhdHVtID09PSB0b29sdGlwIiwgInZhbHVlIjogMH0sCiAgICAgICAgICAgIHsidmFsdWUiOiAxfQogICAgICAgICAgXQogICAgICAgIH0KICAgICAgfQogICAgfQogIF0KfQo)
## Advanced Usage
The number of characters allowed in a URL is limited. As Vega chart specs tend to exceed this limit fast, `vega-chart-viewer` supports gzipped chart specs, too:
1. Create a chart with Vega.
2. Gzip the JSON chart spec.
3. Encode the gzipped data using URL-safe base 64.
4. Pass the gzipped chart spec using the `d` query parameter to `vega-chart-viewer`.