AMP Conf 2019. April 17/18. Tokyo.
AMP

amp-viz-vega

Displays visualizations created using Vega visualization grammar.

AvailabilityExperimental
Required Script<script async custom-element="amp-viz-vega" src="https://cdn.ampproject.org/v0/amp-viz-vega-0.1.js"></script>
Supported Layoutsfill, fixed, fixed-height, flex-item, nodisplay, responsive
Examplesviz-vega.amp.html

What is Vega?

Vega is a visualization grammar, a declarative format for creating and saving interactive visualization designs. Vega's runtime uses D3 behind the scene to draw.

Please visit Vega's website to learn more and play with samples.

Example

<amp-viz-vega
    src="https://raw.githubusercontent.com/vega/vega/master/examples/bar.json"
    layout="responsive"
    width="400" height="200"></amp-viz-vega>
 <amp-viz-vega width="400" height="400" layout="responsive">
    <!-- https://github.com/vega/vega/blob/master/examples/arc.json -->
    <script type="application/json">
      {
        "width": 400,
        "height": 400,
        "data": [
          {
            "name": "table",
            "values": [12, 23, 47, 6, 52, 19],
            "transform": [{"type": "pie", "field": "data"}]
          }
        ],
        "scales": [
          {
            "name": "r",
            "type": "sqrt",
            "domain": {"data": "table", "field": "data"},
            "range": [20, 100]
          }
        ],
        "marks": [
          {
            "type": "arc",
            "from": {"data": "table"},
            "properties": {
              "enter": {
                "x": {"field": {"group": "width"}, "mult": 0.5},
                "y": {"field": {"group": "height"}, "mult": 0.5},
                "startAngle": {"field": "layout_start"},
                "endAngle": {"field": "layout_end"},
                "innerRadius": {"value": 20},
                "outerRadius": {"scale": "r", "field": "data"},
                "stroke": {"value": "#fff"}
              },
              "update": {
                "fill": {"value": "#ccc"}
              },
              "hover": {
                "fill": {"value": "pink"}
              }
            }
          },
          {
            "type": "text",
            "from": {"data": "table"},
            "properties": {
              "enter": {
                "x": {"field": {"group": "width"}, "mult": 0.5},
                "y": {"field": {"group": "height"}, "mult": 0.5},
                "radius": {"scale": "r", "field": "data", "offset": 8},
                "theta": {"field": "layout_mid"},
                "fill": {"value": "#000"},
                "align": {"value": "center"},
                "baseline": {"value": "middle"},
                "text": {"field": "data"}
              }
            }
          }
        ]
      }
      </script>
  </amp-viz-vega>

Attributes

src

This attribute can be used to load a Vega specification data file from a specified remote URL. The URL must use https scheme.

Alternatively specification data can be included in <script type="application/json"> as the only child of <amp-viz-vega>.

Only either src or <script> should be specified. Using both will result in error.

use-data-width and use-data-height

To support responsive visualization, by default <amp-viz-vega> overrides width and height values defined in the Vega specification data with the actual width and height of the <amp-viz-vega> element and re-renders when the size of the element changes (e.g. going to landscape from portrait on phones).

use-data-width and use-data-height attribute can be set to instruct <amp-viz-vega> not to override the data-defined width and height values. It is recommended to avoid using these attributes as they may result in visualizations that require vertical and/or horizontal scrolling to be fully viewable. But they can be used in certain cases where it may not be possible for the visualization to scale to fit the given width and height. For example, the World Map visualization in the examples can not realistically scale to the given width and still be usable so it use-data-width and allows user to scroll horizontally.

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub