Allow inline spec, add compact stringify lib.

Author: domoritz

_config.yml

@@ -16,7 +16,7 @@ description: Vega-Lite - a high-level grammar for statistical graphics.
 
 baseurl: "" # the subpath of your site, e.g. /blog/
 url: "http://vega.github.io/vega-lite/" # the base hostname & protocol for your site
-exclude: [bin, coverage, examples/_original, examples/_output, examples/_diff, Gemfile, Gemfile.lock, gulp, lib, node_modules, scripts, test, typings, package.json, bower.json, src, tsconfig.json, tslint.json, nodemon.json, CONTRIBUTING.md, README.md, LICENSE]
+exclude: [bin, coverage, examples/_original, examples/_output, examples/_diff, Gemfile, Gemfile.lock, gulp, lib/schema.json, node_modules, scripts, test, typings, package.json, bower.json, src, tsconfig.json, tslint.json, nodemon.json, CONTRIBUTING.md, README.md, LICENSE]
 
 # Build settings
 markdown: redcarpet # use redcarpet to enable backtick code

_layouts/default.html

@@ -13,8 +13,12 @@
     <script src="{{site.baseurl}}/vega-lite.min.js"></script>
     <script src="{{site.baseurl}}/bower_components/vega-embed/vega-embed.js" charset="utf-8"></script>
     <script src="{{site.baseurl}}/bower_components/highlightjs/highlight.pack.js" charset="utf-8"></script>
+    <script src="{{site.baseurl}}/lib/json3-compactstringify.js"></script>
 
-    <script>var BASEURL = "{{site.baseurl}}";</script>
+    <script>
+      JSON3 = JSON3.noConflict();
+      var BASEURL = "{{site.baseurl}}";
+    </script>
     <script src="{{site.baseurl}}/site/static/docs.js" charset="utf-8"></script>
 
     <title> {{site.title}}: {{page.title}} </title>

lib/json3-compactstringify.js

@@ -48,4 +48,4 @@ The following specification creates a Histogram.
 Basically, the bar marks show count of the number of data in each `bin`.
 
 <div id="ex-histogram" class="side"></div>
-<script>example("histogram", "")</script>
+<script>example("histogram")</script>

site/docs/bin.md

@@ -32,7 +32,7 @@ Inline Data can be specified using `values` property.
 For example, a data table with two rows and two columns (`a` and `b`) in a spec might look like this:
 
 <div id="ex-bar" class="side"></div>
-<script>example("bar", '', {class: 'side'})</script>
+<script>example("bar")</script>
 
 
 ## Data from URL

site/docs/data.md

@@ -46,12 +46,12 @@ Mapping a field to either only `x` (or only `y`) of `point` mark creates a dot p
 Mapping fields to both the `x` and `y` dimensions creates a scatter plot.
 
 <div id="ex-scatter" class="side"></div>
-<script>example("scatter", "")</script>
+<script>example("scatter")</script>
 
 By mapping a third field to the `size` channel in the [scatter plot](#scatter), we can create a bubble plot instead.
 
 <div id="ex-scatter_bubble" class="side"></div>
-<script>example("scatter_bubble", "")</script>
+<script>example("scatter_bubble")</script>
 
 
 <a id="ex-scatter_color_shape"></a>
@@ -129,7 +129,7 @@ This produces a layered bar chart.
 To make it clear that bars are layered, we can make marks semi-transparent by setting the `opacity` to 0.6.
 
 <div id="ex-bar_layered_transparent" class="side"><div class="example-vis" style="min-width: 500px"></div></div>
-<script>example("bar_layered_transparent", "")</script>
+<script>example("bar_layered_transparent")</script>
 
 <!-- [Faceting](#encoding.md) a bar chart can produce a grouped bar chart. -->
 <!--
@@ -145,7 +145,7 @@ Using `line` with one dimension (typically on `x`) and one measure (typically on
 
 
 <div id="ex-line" class="side"></div>
-<script>example("line", "")</script>
+<script>example("line")</script>
 
 
 We can add create multiple lines by grouping along different attributes, such as `color` or `detail`.
@@ -154,7 +154,7 @@ In the example below, we group points using a new field mapped to `color`. This
 
 
 <div id="ex-line_color" class="side"></div>
-<script>example("line_color", "")</script>
+<script>example("line_color")</script>
 
 
 Alternatively, we can map the same field to `detail`, creating multiple lines, but with the same color instead.

site/docs/mark.md

@@ -36,4 +36,4 @@ Currently supported values are: `'year'`, `'month'`, `'day'`, `'date'`, `'hours'
 This example shows temperature in Seattle over the months.
 
 <div id="ex-line_month" class="side"></div>
-<script>example("line_month", "")</script>
+<script>example("line_month")</script>

site/docs/timeunit.md

@@ -43,7 +43,7 @@ __Examples__
 This example use `calculate` to derive a new field, then `filter` data based on the new field.  
 
 <div id="ex-bar_filter_calc" class="side"></div>
-<script>example("bar_filter_calc", "")</script>
+<script>example("bar_filter_calc")</script>
 
 
 <!-- TODO population use calc to derive Male / Female -->

site/docs/transform.md

@@ -12,6 +12,27 @@ Vega-Lite specifications consist of simple mappings of variables in a data set t
 This documentation outlines the syntax and semantics of Vega-Lite specifications, and how you can embed Vega-Lite visualizations in your applications.
 
 
+<div id="ex-point_1d" class="side"></div>
+<script>
+var vlSpec = {
+      "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": {"type": "ordinal","field": "a"},
+        "y": {"type": "quantitative","field": "b"}
+      }
+    };
+
+example("point_1d", vlSpec)
+</script>
+
+
 Want to learn more? [Read the getting started tutorial]({{site.baseurl}}/tutorial.html).
 
 ## Basic usage

site/index.md

@@ -1,37 +1,54 @@
-/* tslint:disable */
+/* tslint:disable:no-unused-variable */
 
 declare const BASEURL, hljs;
 
-function example(name, dir) {
-  const fullUrl = BASEURL + '/examples/' + (dir ? (dir + '/') : '') + name + '.json';
+function renderExample(name: string, text: string) {
+  const target = '#ex-' + name.replace('/', '-');
+  const $target = d3.select(target);
+  $target.classed('example', true);
 
-  d3.text(fullUrl, function(error, text) {
-    const target = '#ex-' + name.replace('/', '-');
-    const $target = d3.select(target);
-    $target.classed('example', true);
+  const code = $target.insert('pre', 'div.example-vis').attr('class', 'example-code')
+    .append('code').attr('class', 'json').text(text);
+  hljs.highlightBlock(code.node());
 
-    const code = $target.insert('pre', "div.example-vis").attr('class', 'example-code')
-      .append('code').attr('class', 'json').text(text);
-    hljs.highlightBlock(code.node());
+  let vis = $target.select('div.example-vis');
+  if (vis.empty()) {
+    vis = $target.append('div').attr('class', 'example-vis');
+  }
 
-    let vis = $target.select('div.example-vis');
-    if (vis.empty()) {
-      vis = $target.append('div').attr('class', 'example-vis');
-    }
+  const spec = JSON.parse(text);
+  if (spec.data.url) {
+    spec.data.url = BASEURL + '/' + spec.data.url;
+  }
 
-    const spec = JSON.parse(text);
-    if (spec.data.url) {
-      spec.data.url = BASEURL + '/' + spec.data.url;
+  vg.embed(vis.node(), {
+    mode: 'vega-lite',
+    spec: spec,
+    renderer: 'svg',
+    actions: {
+      source: false,
+      export: false
     }
+  });
+}
 
-    vg.embed(vis.node(), {
-      mode: 'vega-lite',
-      spec: spec,
-      renderer: 'svg',
-      actions: {
-        source: false,
-        export: false
+/**
+ * Show example in the decs. Provide the name of the example or a spec.
+ */
+function example(name: string, dirOrSpec) {
+  if (dirOrSpec !== null && typeof dirOrSpec === 'object') {
+    const spec = JSON3.stringify(dirOrSpec, null, 2, 80);
+    renderExample(name, spec);
+  } else {
+    const dir = dirOrSpec;
+    const fullUrl = BASEURL + '/examples/' + (dir ? (dir + '/') : '') + name + '.json';
+
+    d3.text(fullUrl, function(error, text) {
+      if (error) {
+        console.error(error);
+      } else {
+        renderExample(name, text);
       }
     });
-  });
+  }
 }