vega-collection

<h4>Embedding Vega/Vega-Lite charts with <i>vega-element</i></h4>
<vega-element tooltip hover
  vega-spec-url="https://rawgit.com/PolymerVis/marked-vega/master/demo/barchart-vg.json"></vega-element>

<h4>Embedding Vega/Vega-Lite charts in markdown with <i>marked-vega</i> and <i>marked-element</i></h4>
<marked-element>
  <marked-vega slot="markdown-html"></marked-vega>
  <script type="text/markdown" src="https://rawgit.com/PolymerVis/marked-vega/master/demo/readme.md"></script>
</marked-element>

vega-collection is a collection of Polymer elements for Vega and Vega-Lite:

• vega-element is a Polymer (1.X, 2.X) element for rendering interactive data visualization with Vega and Vega-Lite.
• marked-vega is a Polymer 2.0 add-on element for marked-element to render Vega and Vega-Lite charts from markdown.
• gulp-marked-vega is a gulp-plugin (also has a cli) to embed base64 images into your marked-vega markdown so that any standard markdown parser can render the charts without additional plugins.
• monaco-editor is a Polymer 2.0 element for the Monaco Editor, a browser-based code editor that also powers Visual Studio Code. monaco-editor can be adapted for editing Vega and Vega-Lite spec when used together with monaco-schemas.

Vega is a visualization grammar, a declarative language for creating, saving, and sharing interactive visualization designs. With Vega, you can describe the visual appearance and interactive behavior of a visualization in a JSON format, and generate web-based views using Canvas or SVG.

Vega-Lite is a high-level grammar of interactive graphics. It provides a concise JSON syntax for rapidly generating visualizations to support analysis. Vega-Lite specifications can be compiled to Vega specifications.