marked-vega

WebJar for marked-vega

License	MIT
GroupId	org.webjars.bowergithub.polymervis
ArtifactId	marked-vega
Last Version	2.0.1
Release Date	Feb 4, 2018
Type	jar
Description	marked-vega WebJar for marked-vega
Project URL	http://webjars.org
Source Code Management	https://github.com/PolymerVis/marked-vega

Download marked-vega

Filename	Size
marked-vega-2.0.1.pom
marked-vega-2.0.1.jar	83 KB
marked-vega-2.0.1-sources.jar	22 bytes
marked-vega-2.0.1-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bowergithub.polymervis/marked-vega/ -->
<dependency>
    <groupId>org.webjars.bowergithub.polymervis</groupId>
    <artifactId>marked-vega</artifactId>
    <version>2.0.1</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bowergithub.polymervis/marked-vega/
implementation 'org.webjars.bowergithub.polymervis:marked-vega:2.0.1'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bowergithub.polymervis/marked-vega/
implementation ("org.webjars.bowergithub.polymervis:marked-vega:2.0.1")

Apache Buildr

'org.webjars.bowergithub.polymervis:marked-vega:jar:2.0.1'

Apache Ivy

<dependency org="org.webjars.bowergithub.polymervis" name="marked-vega" rev="2.0.1">
  <artifact name="marked-vega" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bowergithub.polymervis', module='marked-vega', version='2.0.1')
)

Scala SBT

libraryDependencies += "org.webjars.bowergithub.polymervis" % "marked-vega" % "2.0.1"

Leiningen

[org.webjars.bowergithub.polymervis/marked-vega "2.0.1"]

Dependencies

compile (3)

Group / Artifact	Type	Version
org.webjars.bowergithub.polymer : polymer	jar	[2.0.0,3)
org.webjars.bowergithub.polymervis : vega-element	jar	[2.0.0,3)
org.webjars.bowergithub.klederson » yaml.js	jar	[0.1.5,0.2)

Project Modules

There are no modules declared in this project.

marked-vega

<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>

marked-vega is an add-on element for marked-element to render Vega and Vega-Lite charts in markdown documents with vega-element.

More API documentation and demos can be found on the web components page for marked-vega.

Disclaimer

PolymerVis is a personal project and is NOT in any way affliated with Vega, Vega-Lite, Polymer or Google.

Installation

bower install --save PolymerVis/marked-vega

Markdown Syntax

marked-vega introduces a few new markdown syntax.

1. Image markdown

Syntax

![vg|vega|vega-lite|vl](https://someurl/spec.json)

Example

![vega](barchart-vg.json)

2. Code markdown

Syntax

```vg|vega|vega-lite|vl
<Vega/Vega-Lite JSON specification>
or
<Vega/Vega-Lite JSON specification in YAML format>
```

Example - JSON specification

```vega-lite
{
  "data": {
    "values": [
      {"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}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}
  }
}
```

Example - YAML specification

```vega-lite
data:
  values:
    - x: A
      y: 13
    - x: B
      y: 55
    - x: C
      y: 43
    - x: D
      y: 91      
    - x: E
      y: 81      
    - x: F
      y: 53      
    - x: G
      y: 19      
    - x: H
      y: 87      
    - x: I
      y: 52      
mark:
  bar
encoding:
  x:
    field: x
    type: ordinal
  y:
    field: y
    type: quantitative
```

Basic usage

marked-vega enable parsing and rendering of Vega/Vega-Lite charts by updating the renderer attribute of the parent marked-element and adding a few new rules to the marked markdown parser and compiler.

The easiest way to use marked-vega is to replace it as the default slot element when using marked-element.

Before

<marked-element>
  <div slot="markdown-html"></div>
  <script type="text/markdown" src="../guidelines.md"></script>
</marked-element>

After

<marked-element>
  <marked-vega slot="markdown-html"></marked-vega>
  <script type="text/markdown" src="demo/demo.md"></script>
</marked-element>

Please look at the the webcomponents page for marked-element for other ways of using marked-element.

Custom renderer

Alternatively if you wish to use to further customize the renderer for marked-element, you can used the provided renderers:

• PolymerVis.marked.CodeRendererVega modifies the rules for the code markdown
• PolymerVis.marked.ImageRendererVega modifies the rules for the image markdown
• PolymerVis.marked.RendererVega modifies the rules for the code and image markdown

Each renderer is a function of the form function(renderer) { ... return renderer; }.

Example

this.customRenderer = function(renderer) {
  // other customized renderer codes
  ...
  // return vega renderer codes
  return PolymerVis.marked.RendererVega(renderer);
};

<marked-element renderer="[[customRenderer]]">
  <marked-vega slot="markdown-html"></marked-vega>
  <script type="text/markdown" src="demo/demo.md"></script>
</marked-element>

PolymerVis

Polymer components for Visualizations (has no affiliation with Polymer or Google).

Versions

Version
2.0.1 Feb 4, 2018