embed_spec: Scaffold HTML/JavaScript/CSS code from 'vegalite'

In vegalite: Tools to Encode Visualizations with the 'Grammar of Graphics'-Like 'Vega-Lite' 'Spec'

Description

Create minimal necessary HTML/JavaScript/CSS code to embed a Vega-Lite spec into a web page. This assumes you have the necessary boilerplate javascript & HTML page shell defined as you see in the Vega-Lite core example.

Usage

embed_spec(vl, element_id = generate_id(), to_cb = FALSE)

Arguments

vl	a Vega-Lite object
element_id	if you don't specify one, an id will be generated. This should be descriptive, but short, and valid javascript & CSS identifier syntax as is is appended to variable names.
to_cb	if TRUE, will copy the spec to the system clipboard. Default is FALSE.

Details

If you are generating more than one object to embed into a single web page, you will need to ensure each element_id is unique. Each Vega-Lite div is classed with vldiv so you can provide both a central style (say, display:inline-block; margin-auto;) and targeted ones that use the div id.

Examples

dat <- jsonlite::fromJSON('[
    {"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}
  ]')

vegalite() %>%
  add_data(dat) %>%
  encode_x("a", "ordinal") %>%
  encode_y("b", "quantitative") %>%
  mark_bar() -> chart

embed_spec(chart)

Example output

[1] "<center><div id=\"vl4cf00c79\" class=\"vldiv\"></div></center>\n\n<script>\nvar spec_vl4cf00c79 = JSON.parse('{\"description\":\"\",\"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\"}},\"config\":[],\"embed\":{\"renderer\":\"svg\",\"actions\":{\"export\":false,\"source\":false,\"editor\":false}}}');\n\nvar embedSpec_vl4cf00c79 = { \"mode\": \"vega-lite\", \"spec\": spec_vl4cf00c79, \"renderer\": spec_vl4cf00c79.embed.renderer, \"actions\": spec_vl4cf00c79.embed.actions };\n\nvg.embed(\"#vl4cf00c79\", embedSpec_vl4cf00c79, function(error, result) {});\n</script>"

vegalite documentation built on May 2, 2019, 10:46 a.m.