{"id":3977,"date":"2016-02-27T11:18:17","date_gmt":"2016-02-27T16:18:17","guid":{"rendered":"http:\/\/rud.is\/b\/?p=3977"},"modified":"2018-03-07T16:43:06","modified_gmt":"2018-03-07T21:43:06","slug":"create-vega-lite-specs-widgets-with-the-vegalite-package","status":"publish","type":"post","link":"https:\/\/rud.is\/b\/2016\/02\/27\/create-vega-lite-specs-widgets-with-the-vegalite-package\/","title":{"rendered":"Create Vega-Lite specs &#038; widgets with the vegalite package"},"content":{"rendered":"<p>[Vega-Lite](http:\/\/vega.github.io\/vega-lite\/) 1.0 was [released this past week](https:\/\/medium.com\/@uwdata\/introducing-vega-lite-438f9215f09e#.yfkl0tp1c). I had been meaning to play with it for a while but I&#8217;ve been burned before by working with unstable APIs and was waiting for this to bake to a stable release. Thankfully, there were no new shows in the Fire TV, Apple TV or Netflix queues, enabling some fast-paced nocturnal coding to make an [R `htmlwidget`s interface](https:\/\/github.com\/hrbrmstr\/vegalite) to the Vega-Lite code before the week was out. <\/p>\n<p>What is &#8220;Vega&#8221; and why &#8220;-Lite&#8221;? [Vega](http:\/\/vega.github.io\/) is _&#8221;a full declarative visualization grammar, suitable for expressive custom interactive visualization design and programmatic generation.&#8221;_ Vega-Lite _&#8221;provides a higher-level grammar for visual analysis, comparable to ggplot or Tableau, that generates complete Vega specifications.&#8221;_ Vega-Lite compiles to Vega and is more compact and accessible than Vega (IMO). Both are just JSON data files with a particular schema that let you encode the data, encodings and aesthetics for statistical charts.<\/p>\n<p>Even <b>I<\/b> don&#8217;t like to write JSON by hand and I can&#8217;t imagine anyone really wanting to do that. I see Vega and Vega-Lite as amazing ways to serialize statistical charts from ggplot2 or even Tableau (or any Grammar of Graphics-friendly creation tool) and to pass around for use in other programs\u2014like [Voyager](http:\/\/vega.github.io\/voyager\/) or [Pole\u2605](http:\/\/vega.github.io\/polestar\/)\u2014or directly on the web. It is &#8220;glued&#8221; to D3 (given the way data transformations are encoded and colors are specified) but it&#8217;s a pretty weak glue and one could make a Vega or Vega-Lite spec render to anything given some elbow grease.<\/p>\n<p>But, enough words! Here&#8217;s how to make a simple Vega-Lite bar chart using `vegalite`:<\/p>\n<pre lang=\"rsplus\"># devtools::install_github(\"hrbrmstr\/vegalite\")\r\nlibrary(vegalite)\r\n\r\ndat <- jsonlite::fromJSON('[\r\n    {\"a\": \"A\",\"b\": 28}, {\"a\": \"B\",\"b\": 55}, {\"a\": \"C\",\"b\": 43},\r\n    {\"a\": \"D\",\"b\": 91}, {\"a\": \"E\",\"b\": 81}, {\"a\": \"F\",\"b\": 53},\r\n    {\"a\": \"G\",\"b\": 19}, {\"a\": \"H\",\"b\": 87}, {\"a\": \"I\",\"b\": 52}\r\n  ]')\r\n\r\nvegalite() %>% \r\n  add_data(dat) %>%\r\n  encode_x(\"a\", \"ordinal\") %>%\r\n  encode_y(\"b\", \"quantitative\") %>%\r\n  mark_bar()<\/pre>\n<style media=\"screen\">.wpvegadiv { display:inline-block; margin:auto }<\/style>\n<p><center><\/p>\n<div id=\"vlvis1\" class=\"wpvegadiv\"><\/div>\n<p><\/center><\/p>\n<p><script>\nvar spec1 = 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}}} ');<\/p>\n<p>var embedSpec = { \"mode\": \"vega-lite\", \"spec\": spec1, \"renderer\": spec1.embed.renderer, \"actions\": spec1.embed.actions };<\/p>\n<p>vg.embed(\"#vlvis1\", embedSpec, function(error, result) {});\n<\/script><\/p>\n<p>Note that bar graph you see above is _not_ a PNG file or `iframe`d widget. If you `view-source:` you&#8217;ll see that I was able to take the Vega-Lite generated spec for that widget code (done by piping the widget to `to_spec()`) and just insert it into this post via:<\/p>\n<pre lang=\"html\"><style media=\"screen\">.wpvegadiv { display:inline-block; margin:auto }<\/style>\r\n\r\n<center><div id=\"vlvis1\" class=\"wpvegadiv\"><\/div><\/center>\r\n\r\n<script>\r\nvar spec1 = 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}}} ');\r\n\r\nvar embedSpec = { \"mode\": \"vega-lite\", \"spec\": spec1, \"renderer\": spec1.embed.renderer, \"actions\": spec1.embed.actions };\r\n\r\nvg.embed(\"#vlvis1\", embedSpec, function(error, result) {});\r\n<\/script><\/pre>\n<p>I did have have all the necessary js libs pre-loaded like you see [in this example](http:\/\/vega.github.io\/vega-lite\/tutorials\/getting_started.html#embed). You can use the `embed_spec()` function to generate most of that for you, too.<\/p>\n<p>This means you can use R to gather, clean, tidy and analyze data. Then, generate a visualization based on that data with `vegalite`. _Then_ generate a lightweight JSON spec from it and easily embed it anywhere without having to rig up a way to get a widget working or ship giant R markdown created files (like [this one](http:\/\/rud.is\/projects\/vegalite01.html) which has many full `vegalite` widgets on it).<\/p>\n<p>One powerful feature of Vega\/Vega-Lite is that the data does not have to be embedded in the spec. <\/p>\n<p>Take this streamgraph visualization about unemployment levels across various industries over time:<\/p>\n<pre lang=\"rsplus\">vegalite() %>%\r\n  cell_size(500, 300) %>%\r\n  add_data(\"https:\/\/vega.github.io\/vega-editor\/app\/data\/unemployment-across-industries.json\") %>%\r\n  encode_x(\"date\", \"temporal\") %>%\r\n  encode_y(\"count\", \"quantitative\", aggregate=\"sum\") %>%\r\n  encode_color(\"series\", \"nominal\") %>%\r\n  scale_color_nominal(range=\"category20b\") %>%\r\n  timeunit_x(\"yearmonth\") %>%\r\n  scale_x_time(nice=\"month\") %>%\r\n  axis_x(axisWidth=0, format=\"%Y\", labelAngle=0) %>%\r\n  mark_area(interpolate=\"basis\", stack=\"center\")<\/pre>\n<p><center><\/p>\n<div id=\"vlvis2\" class=\"wpvegadiv\"><\/div>\n<p><\/center><\/p>\n<p><script>\nvar spec1 = JSON.parse('{\"description\":\"\",\"data\":{\"url\":\"https:\/\/vega.github.io\/vega-editor\/app\/data\/unemployment-across-industries.json\"},\"mark\":\"area\",\"encoding\":{\"x\":{\"field\":\"date\",\"type\":\"temporal\",\"timeUnit\":\"yearmonth\",\"scale\":{\"nice\":\"month\"},\"axis\":{\"axisWidth\":0,\"labels\":true,\"labelAngle\":0,\"labelMaxLength\":25,\"title\":\"\",\"characterWidth\":6,\"format\":\"%Y\"}},\"y\":{\"field\":\"count\",\"type\":\"quantitative\",\"aggregate\":\"sum\"},\"color\":{\"field\":\"series\",\"type\":\"nominal\",\"scale\":{\"range\":\"category20b\"}}},\"config\":{\"cell\":{\"width\":500,\"height\":300},\"mark\":{\"stacked\":\"center\",\"interpolate\":\"basis\"}},\"embed\":{\"renderer\":\"svg\",\"actions\":{\"export\":false,\"source\":false,\"editor\":false}}}');<\/p>\n<p>var embedSpec2 = { \"mode\": \"vega-lite\", \"spec\": spec1, \"renderer\": spec1.embed.renderer, \"actions\": spec1.embed.actions };<\/p>\n<p>vg.embed(\"#vlvis2\", embedSpec2, function(error, result) {});\n<\/script><\/p>\n<p>The URL you see in the R code is placed into the JSON spec. That means whenever that data changes and the visualization is refreshed, you see updated content without going back to R (or js code).<\/p>\n<p>Now, dynamically-created visualizations are great, but what if you want to actually let your viewers have a copy of it? With Vega\/Vega-Lite, you don&#8217;t need to resort to hackish bookmarklets, just change a configuration option to enable an export link:<\/p>\n<pre lang=\"rsplus\">vegalite(export=TRUE) %>%\r\n  add_data(\"https:\/\/vega.github.io\/vega-editor\/app\/data\/seattle-weather.csv\") %>%\r\n  encode_x(\"date\", \"temporal\") %>%\r\n  encode_y(\"*\", \"quantitative\", aggregate=\"count\") %>%\r\n  encode_color(\"weather\", \"nominal\") %>%\r\n  scale_color_nominal(domain=c(\"sun\",\"fog\",\"drizzle\",\"rain\",\"snow\"),\r\n                      range=c(\"#e7ba52\",\"#c7c7c7\",\"#aec7e8\",\"#1f77b4\",\"#9467bd\")) %>%\r\n  timeunit_x(\"month\") %>%\r\n  axis_x(title=\"Month\") %>% \r\n  mark_bar()<\/pre>\n<p><center><\/p>\n<div id=\"vlvis3\" class=\"wpvegadiv\"><\/div>\n<p><\/center><\/p>\n<p><script>\nvar spec1 = JSON.parse('{\"description\":\"\",\"data\":{\"url\":\"https:\/\/vega.github.io\/vega-editor\/app\/data\/seattle-weather.csv\"},\"mark\":\"bar\",\"encoding\":{\"x\":{\"field\":\"date\",\"type\":\"temporal\",\"timeUnit\":\"month\",\"axis\":{\"labels\":true,\"labelMaxLength\":25,\"title\":\"Month\",\"characterWidth\":6}},\"y\":{\"field\":\"*\",\"type\":\"quantitative\",\"aggregate\":\"count\"},\"color\":{\"field\":\"weather\",\"type\":\"nominal\",\"scale\":{\"domain\":[\"sun\",\"fog\",\"drizzle\",\"rain\",\"snow\"],\"range\":[\"#e7ba52\",\"#c7c7c7\",\"#aec7e8\",\"#1f77b4\",\"#9467bd\"]}}},\"config\":[],\"embed\":{\"renderer\":\"svg\",\"actions\":{\"export\":true,\"source\":false,\"editor\":false}}}');<\/p>\n<p>var embedSpec3 = { \"mode\": \"vega-lite\", \"spec\": spec1, \"renderer\": spec1.embed.renderer, \"actions\": spec1.embed.actions };<\/p>\n<p>vg.embed(\"#vlvis3\", embedSpec3, function(error, result) {});\n<\/script><\/p>\n<p>(You can style\/place that link however\/wherever you want. It&#8217;s a simple classed `<\/p>\n<div>`.)<\/p>\n<p>If you choose a `canvas` renderer, the &#8220;export&#8221; option will be PNG vs SVG.<\/p>\n<p>The package is nearly (~98%) feature complete to the 1.0 Vega-Lite standard. There are some tedious bits from the Vega-Lite spec remaining to be encoded. I&#8217;ve transcribed much of the Vega-Lite documentation to R function &#038; package documentation with links back to the Vega-Lite sources if you need more detail.<\/p>\n<p>I&#8217;m hoping to be able to code up an &#8220;`as_spec()`&#8221; function to enable quick conversion of ggplot2-created graphics to Vega-Lite (and support converting a ggplot2 object to a Vega-Lite spec in `to_spec()`) but that won&#8217;t be for a while unless someone wants to jump on board and implement an Vega expression creator\/parser in R for me :-)<\/p>\n<p>You can work with the current code [on github](https:\/\/github.com\/hrbrmstr\/vegalite) and\/or jump on board to help with package development or file an issue with an idea or a bug. Please note that this package is under _heavy development_ and the function interface is very likely to change as I and others work with it and develop more streamlined ways to handle the encodings. Check back to the github repo often to find out what&#8217;s different (there will be a `NEWS` file posted soon and maintained as well).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[Vega-Lite](http:\/\/vega.github.io\/vega-lite\/) 1.0 was [released this past week](https:\/\/medium.com\/@uwdata\/introducing-vega-lite-438f9215f09e#.yfkl0tp1c). I had been meaning to play with it for a while but I&#8217;ve been burned before by working with unstable APIs and was waiting for this to bake to a stable release. Thankfully, there were no new shows in the Fire TV, Apple TV or Netflix queues, enabling [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4021,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[666,678,673,674,36,765,15,91,769,770],"tags":[810],"class_list":["post-3977","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-d3","category-data-visualization","category-datavis-2","category-dataviz","category-html5","category-htmlwidgets","category-javascript","category-r","category-vega","category-vega-lite","tag-post"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Create Vega-Lite specs &amp; widgets with the vegalite package - rud.is<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rud.is\/b\/2016\/02\/27\/create-vega-lite-specs-widgets-with-the-vegalite-package\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Vega-Lite specs &amp; widgets with the vegalite package - rud.is\" \/>\n<meta property=\"og:description\" content=\"[Vega-Lite](http:\/\/vega.github.io\/vega-lite\/) 1.0 was [released this past week](https:\/\/medium.com\/@uwdata\/introducing-vega-lite-438f9215f09e#.yfkl0tp1c). I had been meaning to play with it for a while but I&#8217;ve been burned before by working with unstable APIs and was waiting for this to bake to a stable release. Thankfully, there were no new shows in the Fire TV, Apple TV or Netflix queues, enabling [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rud.is\/b\/2016\/02\/27\/create-vega-lite-specs-widgets-with-the-vegalite-package\/\" \/>\n<meta property=\"og:site_name\" content=\"rud.is\" \/>\n<meta property=\"article:published_time\" content=\"2016-02-27T16:18:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-03-07T21:43:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/02\/gallery.png?fit=1896%2C940&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1896\" \/>\n\t<meta property=\"og:image:height\" content=\"940\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"hrbrmstr\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"hrbrmstr\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2016\\\/02\\\/27\\\/create-vega-lite-specs-widgets-with-the-vegalite-package\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2016\\\/02\\\/27\\\/create-vega-lite-specs-widgets-with-the-vegalite-package\\\/\"},\"author\":{\"name\":\"hrbrmstr\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#\\\/schema\\\/person\\\/d7cb7487ab0527447f7fda5c423ff886\"},\"headline\":\"Create Vega-Lite specs &#038; widgets with the vegalite package\",\"datePublished\":\"2016-02-27T16:18:17+00:00\",\"dateModified\":\"2018-03-07T21:43:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2016\\\/02\\\/27\\\/create-vega-lite-specs-widgets-with-the-vegalite-package\\\/\"},\"wordCount\":819,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#\\\/schema\\\/person\\\/d7cb7487ab0527447f7fda5c423ff886\"},\"image\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2016\\\/02\\\/27\\\/create-vega-lite-specs-widgets-with-the-vegalite-package\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2016\\\/02\\\/gallery.png?fit=1896%2C940&ssl=1\",\"keywords\":[\"post\"],\"articleSection\":[\"d3\",\"Data Visualization\",\"DataVis\",\"DataViz\",\"HTML5\",\"htmlwidgets\",\"Javascript\",\"R\",\"vega\",\"vega-lite\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/rud.is\\\/b\\\/2016\\\/02\\\/27\\\/create-vega-lite-specs-widgets-with-the-vegalite-package\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2016\\\/02\\\/27\\\/create-vega-lite-specs-widgets-with-the-vegalite-package\\\/\",\"url\":\"https:\\\/\\\/rud.is\\\/b\\\/2016\\\/02\\\/27\\\/create-vega-lite-specs-widgets-with-the-vegalite-package\\\/\",\"name\":\"Create Vega-Lite specs & widgets with the vegalite package - rud.is\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2016\\\/02\\\/27\\\/create-vega-lite-specs-widgets-with-the-vegalite-package\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2016\\\/02\\\/27\\\/create-vega-lite-specs-widgets-with-the-vegalite-package\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2016\\\/02\\\/gallery.png?fit=1896%2C940&ssl=1\",\"datePublished\":\"2016-02-27T16:18:17+00:00\",\"dateModified\":\"2018-03-07T21:43:06+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2016\\\/02\\\/27\\\/create-vega-lite-specs-widgets-with-the-vegalite-package\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rud.is\\\/b\\\/2016\\\/02\\\/27\\\/create-vega-lite-specs-widgets-with-the-vegalite-package\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2016\\\/02\\\/27\\\/create-vega-lite-specs-widgets-with-the-vegalite-package\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2016\\\/02\\\/gallery.png?fit=1896%2C940&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2016\\\/02\\\/gallery.png?fit=1896%2C940&ssl=1\",\"width\":1896,\"height\":940},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2016\\\/02\\\/27\\\/create-vega-lite-specs-widgets-with-the-vegalite-package\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/rud.is\\\/b\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Vega-Lite specs &#038; widgets with the vegalite package\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#website\",\"url\":\"https:\\\/\\\/rud.is\\\/b\\\/\",\"name\":\"rud.is\",\"description\":\"&quot;In God we trust. All others must bring data&quot;\",\"publisher\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#\\\/schema\\\/person\\\/d7cb7487ab0527447f7fda5c423ff886\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rud.is\\\/b\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#\\\/schema\\\/person\\\/d7cb7487ab0527447f7fda5c423ff886\",\"name\":\"hrbrmstr\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/ukr-shield.png?fit=460%2C460&ssl=1\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/ukr-shield.png?fit=460%2C460&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/ukr-shield.png?fit=460%2C460&ssl=1\",\"width\":460,\"height\":460,\"caption\":\"hrbrmstr\"},\"logo\":{\"@id\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/ukr-shield.png?fit=460%2C460&ssl=1\"},\"description\":\"Don't look at me\u2026I do what he does \u2014 just slower. #rstats avuncular \u2022 ?Resistance Fighter \u2022 Cook \u2022 Christian \u2022 [Master] Chef des Donn\u00e9es de S\u00e9curit\u00e9 @ @rapid7\",\"sameAs\":[\"http:\\\/\\\/rud.is\"],\"url\":\"https:\\\/\\\/rud.is\\\/b\\\/author\\\/hrbrmstr\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create Vega-Lite specs & widgets with the vegalite package - rud.is","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rud.is\/b\/2016\/02\/27\/create-vega-lite-specs-widgets-with-the-vegalite-package\/","og_locale":"en_US","og_type":"article","og_title":"Create Vega-Lite specs & widgets with the vegalite package - rud.is","og_description":"[Vega-Lite](http:\/\/vega.github.io\/vega-lite\/) 1.0 was [released this past week](https:\/\/medium.com\/@uwdata\/introducing-vega-lite-438f9215f09e#.yfkl0tp1c). I had been meaning to play with it for a while but I&#8217;ve been burned before by working with unstable APIs and was waiting for this to bake to a stable release. Thankfully, there were no new shows in the Fire TV, Apple TV or Netflix queues, enabling [&hellip;]","og_url":"https:\/\/rud.is\/b\/2016\/02\/27\/create-vega-lite-specs-widgets-with-the-vegalite-package\/","og_site_name":"rud.is","article_published_time":"2016-02-27T16:18:17+00:00","article_modified_time":"2018-03-07T21:43:06+00:00","og_image":[{"width":1896,"height":940,"url":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/02\/gallery.png?fit=1896%2C940&ssl=1","type":"image\/png"}],"author":"hrbrmstr","twitter_card":"summary_large_image","twitter_misc":{"Written by":"hrbrmstr","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rud.is\/b\/2016\/02\/27\/create-vega-lite-specs-widgets-with-the-vegalite-package\/#article","isPartOf":{"@id":"https:\/\/rud.is\/b\/2016\/02\/27\/create-vega-lite-specs-widgets-with-the-vegalite-package\/"},"author":{"name":"hrbrmstr","@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886"},"headline":"Create Vega-Lite specs &#038; widgets with the vegalite package","datePublished":"2016-02-27T16:18:17+00:00","dateModified":"2018-03-07T21:43:06+00:00","mainEntityOfPage":{"@id":"https:\/\/rud.is\/b\/2016\/02\/27\/create-vega-lite-specs-widgets-with-the-vegalite-package\/"},"wordCount":819,"commentCount":3,"publisher":{"@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886"},"image":{"@id":"https:\/\/rud.is\/b\/2016\/02\/27\/create-vega-lite-specs-widgets-with-the-vegalite-package\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/02\/gallery.png?fit=1896%2C940&ssl=1","keywords":["post"],"articleSection":["d3","Data Visualization","DataVis","DataViz","HTML5","htmlwidgets","Javascript","R","vega","vega-lite"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/rud.is\/b\/2016\/02\/27\/create-vega-lite-specs-widgets-with-the-vegalite-package\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/rud.is\/b\/2016\/02\/27\/create-vega-lite-specs-widgets-with-the-vegalite-package\/","url":"https:\/\/rud.is\/b\/2016\/02\/27\/create-vega-lite-specs-widgets-with-the-vegalite-package\/","name":"Create Vega-Lite specs & widgets with the vegalite package - rud.is","isPartOf":{"@id":"https:\/\/rud.is\/b\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rud.is\/b\/2016\/02\/27\/create-vega-lite-specs-widgets-with-the-vegalite-package\/#primaryimage"},"image":{"@id":"https:\/\/rud.is\/b\/2016\/02\/27\/create-vega-lite-specs-widgets-with-the-vegalite-package\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/02\/gallery.png?fit=1896%2C940&ssl=1","datePublished":"2016-02-27T16:18:17+00:00","dateModified":"2018-03-07T21:43:06+00:00","breadcrumb":{"@id":"https:\/\/rud.is\/b\/2016\/02\/27\/create-vega-lite-specs-widgets-with-the-vegalite-package\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rud.is\/b\/2016\/02\/27\/create-vega-lite-specs-widgets-with-the-vegalite-package\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rud.is\/b\/2016\/02\/27\/create-vega-lite-specs-widgets-with-the-vegalite-package\/#primaryimage","url":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/02\/gallery.png?fit=1896%2C940&ssl=1","contentUrl":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/02\/gallery.png?fit=1896%2C940&ssl=1","width":1896,"height":940},{"@type":"BreadcrumbList","@id":"https:\/\/rud.is\/b\/2016\/02\/27\/create-vega-lite-specs-widgets-with-the-vegalite-package\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rud.is\/b\/"},{"@type":"ListItem","position":2,"name":"Create Vega-Lite specs &#038; widgets with the vegalite package"}]},{"@type":"WebSite","@id":"https:\/\/rud.is\/b\/#website","url":"https:\/\/rud.is\/b\/","name":"rud.is","description":"&quot;In God we trust. All others must bring data&quot;","publisher":{"@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rud.is\/b\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886","name":"hrbrmstr","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1","url":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1","contentUrl":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1","width":460,"height":460,"caption":"hrbrmstr"},"logo":{"@id":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1"},"description":"Don't look at me\u2026I do what he does \u2014 just slower. #rstats avuncular \u2022 ?Resistance Fighter \u2022 Cook \u2022 Christian \u2022 [Master] Chef des Donn\u00e9es de S\u00e9curit\u00e9 @ @rapid7","sameAs":["http:\/\/rud.is"],"url":"https:\/\/rud.is\/b\/author\/hrbrmstr\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/02\/gallery.png?fit=1896%2C940&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p23idr-129","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":4027,"url":"https:\/\/rud.is\/b\/2016\/02\/28\/a-tale-of-two-charting-paradigms-vega-lite-vs-rggplot2\/","url_meta":{"origin":3977,"position":0},"title":"A Tale of Two Charting Paradigms: Vega-Lite vs R+ggplot2","author":"hrbrmstr","date":"2016-02-28","format":false,"excerpt":"This post comes hot off the heels of the [nigh-feature-complete release of `vegalite`](http:\/\/rud.is\/b\/2016\/02\/27\/create-vega-lite-specs-widgets-with-the-vegalite-package\/) (virtually all the components of Vega-Lite are now implemented and just need real-world user testing). I've had a few and seen a few questions about \"why Vega-Lite\"? I _think_ my previous post gave some good answers to\u2026","rel":"","context":"In &quot;d3&quot;","block_context":{"text":"d3","link":"https:\/\/rud.is\/b\/category\/d3\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2590,"url":"https:\/\/rud.is\/b\/2013\/08\/21\/zeroaccess-bots-desperately-seeking-freedom-visualization\/","url_meta":{"origin":3977,"position":1},"title":"ZeroAccess Bots Desperately Seeking Freedom (Visualization)","author":"hrbrmstr","date":"2013-08-21","format":false,"excerpt":"I've been doing a bit of graphing (with real, non-honeypot network data) as part of the research for the book I'm writing with @jayjacobs and thought one of the images was worth sharing (especially since it may not make it into the book :-). Click image for larger view This\u2026","rel":"","context":"In &quot;Data Visualization&quot;","block_context":{"text":"Data Visualization","link":"https:\/\/rud.is\/b\/category\/data-visualization\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13773,"url":"https:\/\/rud.is\/b\/2023\/03\/09\/webr-is-here\/","url_meta":{"origin":3977,"position":2},"title":"WebR IS HERE!","author":"hrbrmstr","date":"2023-03-09","format":false,"excerpt":"WebR 0.1.0 was released! I had been git-stalking George (the absolute genius who we all must thank for this) for a while and noticed the GH org and repos being updated earlier this week, So, I was already pretty excited. It dropped today, and you can hit that link for\u2026","rel":"","context":"In &quot;d3&quot;","block_context":{"text":"d3","link":"https:\/\/rud.is\/b\/category\/d3\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3158,"url":"https:\/\/rud.is\/b\/2014\/12\/29\/making-static-interactive-maps-with-ggvis-using-ggvis-maps-wshiny\/","url_meta":{"origin":3977,"position":3},"title":"Making Static &#038; Interactive Maps With ggvis (+ using ggvis maps w\/shiny)","author":"hrbrmstr","date":"2014-12-29","format":false,"excerpt":"Even though it's still at version `0.4`, the `ggvis` package has quite a bit of functionality and is highly useful for exploratory data analysis (EDA). I wanted to see how geographical visualizations would work under it, so I put together six examples that show how to use various features of\u2026","rel":"","context":"In &quot;cartography&quot;","block_context":{"text":"cartography","link":"https:\/\/rud.is\/b\/category\/cartography\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2190,"url":"https:\/\/rud.is\/b\/2013\/02\/27\/follow-upresources-grc-t18-data-analysis-and-visualization-for-security-professionals-rsac\/","url_meta":{"origin":3977,"position":4},"title":"Follow up\/Resources :: GRC-T18 \u2013 Data Analysis and Visualization for Security Professionals #RSAC","author":"hrbrmstr","date":"2013-02-27","format":false,"excerpt":"Many thanks to all who attended the talk @jayjacobs & I gave at RSA on Tuesday, February 26, 2013. It was really great to be able to talk to so many of you afterwards as well. We've enumerated quite a bit of non-slide-but-in-presentation information that we wanted to aggregate into\u2026","rel":"","context":"In &quot;Charts &amp; Graphs&quot;","block_context":{"text":"Charts &amp; Graphs","link":"https:\/\/rud.is\/b\/category\/charts-graphs\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2499,"url":"https:\/\/rud.is\/b\/2013\/05\/15\/secure360\/","url_meta":{"origin":3977,"position":5},"title":"Secure360 (@Secure360) Data Analysis &#038; Visualization Talk Resources #Sec360","author":"hrbrmstr","date":"2013-05-15","format":false,"excerpt":"Many thanks to all who attended the talk @jayjacobs & I gave at @Secure360 on Wednesday, May 15, 2013. As promised, here are the [slides](https:\/\/dl.dropboxusercontent.com\/u\/43553\/Secure360-2013.pdf). We've enumerated quite a bit of non-slide-but-in-presentation information that we wanted to aggregate into a blog post so you can vi[sz] along at home. If\u2026","rel":"","context":"In &quot;Charts &amp; Graphs&quot;","block_context":{"text":"Charts &amp; Graphs","link":"https:\/\/rud.is\/b\/category\/charts-graphs\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/posts\/3977","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/comments?post=3977"}],"version-history":[{"count":0,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/posts\/3977\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/media\/4021"}],"wp:attachment":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/media?parent=3977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/categories?post=3977"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/tags?post=3977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}