Updating README.md

xo · Jan 16, 2024 · c98318d · c98318d
1 parent 94d408a
commit c98318d
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 172 deletions.
diff --git a/README.md b/README.md
@@ -36,187 +36,73 @@ package vegagoja_test
 
 import (
 	"context"
+	"fmt"
 	"log"
 	"os"
 
 	"github.com/xo/vegagoja"
 )
 
 func Example() {
-	const spec = `{
-  "$schema": "https://vega.github.io/schema/vega/v5.json",
-  "description": "A candlestick chart inspired by an example in Protovis (http://mbostock.github.io/protovis/ex/candlestick.html)",
-  "background": "white",
-  "padding": 5,
+	vega := vegagoja.New(
+		vegagoja.WithDemoData(),
+	)
+	data, err := vega.Render(context.Background(), candlestickSpec)
+	if err != nil {
+		log.Fatal(err)
+	}
+	if err := os.WriteFile("candestick.svg", []byte(data), 0o644); err != nil {
+		log.Fatal(err)
+	}
+	// Output:
+}
+
+const candlestickSpec = `{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
   "width": 400,
-  "height": 200,
-  "style": "cell",
-  "data": [
-    {
-      "name": "source_0",
-      "url": "data/ohlc.json",
-      "format": {"type": "json", "parse": {"date": "date"}}
-    },
-    {
-      "name": "data_0",
-      "source": "source_0",
-      "transform": [
-        {
-          "type": "filter",
-          "expr": "(isDate(datum[\"date\"]) || (isValid(datum[\"date\"]) && isFinite(+datum[\"date\"]))) && isValid(datum[\"low\"]) && isFinite(+datum[\"low\"])"
-        }
-      ]
-    },
-    {
-      "name": "data_1",
-      "source": "source_0",
-      "transform": [
-        {
-          "type": "filter",
-          "expr": "(isDate(datum[\"date\"]) || (isValid(datum[\"date\"]) && isFinite(+datum[\"date\"]))) && isValid(datum[\"open\"]) && isFinite(+datum[\"open\"])"
-        }
-      ]
-    }
-  ],
-  "marks": [
-    {
-      "name": "layer_0_marks",
-      "type": "rule",
-      "style": ["rule"],
-      "from": {"data": "data_0"},
-      "encode": {
-        "update": {
-          "stroke": [
-            {"test": "datum.open < datum.close", "value": "#06982d"},
-            {"value": "#ae1325"}
-          ],
-          "description": {
-            "signal": "\"Date in 2009: \" + (timeFormat(datum[\"date\"], '%m/%d')) + \"; low: \" + (format(datum[\"low\"], \"\")) + \"; high: \" + (format(datum[\"high\"], \"\"))"
-          },
-          "x": {"scale": "x", "field": "date"},
-          "y": {"scale": "y", "field": "low"},
-          "y2": {"scale": "y", "field": "high"}
-        }
+  "description": "A candlestick chart inspired by an example in Protovis (http://mbostock.github.io/protovis/ex/candlestick.html)",
+  "data": {"url": "data/ohlc.json"},
+  "encoding": {
+    "x": {
+      "field": "date",
+      "type": "temporal",
+      "title": "Date in 2009",
+      "axis": {
+        "format": "%m/%d",
+        "labelAngle": -45,
+        "title": "Date in 2009"
       }
     },
-    {
-      "name": "layer_1_marks",
-      "type": "rect",
-      "style": ["bar"],
-      "from": {"data": "data_1"},
-      "encode": {
-        "update": {
-          "fill": [
-            {"test": "datum.open < datum.close", "value": "#06982d"},
-            {"value": "#ae1325"}
-          ],
-          "ariaRoleDescription": {"value": "bar"},
-          "description": {
-            "signal": "\"Date in 2009: \" + (timeFormat(datum[\"date\"], '%m/%d')) + \"; open: \" + (format(datum[\"open\"], \"\")) + \"; close: \" + (format(datum[\"close\"], \"\"))"
-          },
-          "xc": {"scale": "x", "field": "date"},
-          "width": {"value": 5},
-          "y": {"scale": "y", "field": "open"},
-          "y2": {"scale": "y", "field": "close"}
-        }
-      }
-    }
-  ],
-  "scales": [
-    {
-      "name": "x",
-      "type": "time",
-      "domain": {
-        "fields": [
-          {"data": "data_0", "field": "date"},
-          {"data": "data_1", "field": "date"}
-        ]
-      },
-      "range": [0, {"signal": "width"}],
-      "padding": 5
+    "y": {
+      "type": "quantitative",
+      "scale": {"zero": false},
+      "axis": {"title": "Price"}
     },
-    {
-      "name": "y",
-      "type": "linear",
-      "domain": {
-        "fields": [
-          {"data": "data_0", "field": "low"},
-          {"data": "data_0", "field": "high"},
-          {"data": "data_1", "field": "open"},
-          {"data": "data_1", "field": "close"}
-        ]
+    "color": {
+      "condition": {
+        "test": "datum.open < datum.close",
+        "value": "#06982d"
       },
-      "range": [{"signal": "height"}, 0],
-      "zero": false,
-      "nice": true
+      "value": "#ae1325"
     }
-  ],
-  "axes": [
+  },
+  "layer": [
     {
-      "scale": "x",
-      "orient": "bottom",
-      "gridScale": "y",
-      "grid": true,
-      "tickCount": {"signal": "ceil(width/40)"},
-      "domain": false,
-      "labels": false,
-      "aria": false,
-      "maxExtent": 0,
-      "minExtent": 0,
-      "ticks": false,
-      "zindex": 0
-    },
-    {
-      "scale": "y",
-      "orient": "left",
-      "gridScale": "x",
-      "grid": true,
-      "tickCount": {"signal": "ceil(height/40)"},
-      "domain": false,
-      "labels": false,
-      "aria": false,
-      "maxExtent": 0,
-      "minExtent": 0,
-      "ticks": false,
-      "zindex": 0
-    },
-    {
-      "scale": "x",
-      "orient": "bottom",
-      "grid": false,
-      "title": "Date in 2009",
-      "format": "%m/%d",
-      "labelAngle": 315,
-      "labelAlign": "right",
-      "labelBaseline": "top",
-      "labelFlush": true,
-      "labelOverlap": true,
-      "tickCount": {"signal": "ceil(width/40)"},
-      "zindex": 0
+      "mark": "rule",
+      "encoding": {
+        "y": {"field": "low"},
+        "y2": {"field": "high"}
+      }
     },
     {
-      "scale": "y",
-      "orient": "left",
-      "grid": false,
-      "title": "Price",
-      "labelOverlap": true,
-      "tickCount": {"signal": "ceil(height/40)"},
-      "zindex": 0
+      "mark": "bar",
+      "encoding": {
+        "y": {"field": "open"},
+        "y2": {"field": "close"}
+      }
     }
   ]
 }`
-	vega := vegagoja.New(
-		vegagoja.WithVegaDemoData(),
-	)
-	data, err := vega.Render(context.Background(), spec)
-	if err != nil {
-		log.Fatal(err)
-	}
-	if err := os.WriteFile("candestick.svg", []byte(data), 0o644); err != nil {
-		log.Fatal(err)
-	}
-	// Output:
-}
 ```
 
 ## TODO

diff --git a/vegagoja.go b/vegagoja.go
@@ -1,4 +1,4 @@
-// Package vegagoja renders Vega visualizations as SVGs.
+// Package vegagoja renders Vega and Vega Lite visualizations as SVGs.
 package vegagoja
 
 import (
@@ -19,15 +19,8 @@ import (
 	"github.com/dop251/goja_nodejs/require"
 )
 
-// loggerFunc is the signature for the log func.
-type loggerFunc func([]string)
-
-// renderFunc is the signature for the render func.
-type renderFunc func(logger loggerFunc, spec string, data interface{}, cb func(string)) string
-
-// Vega handles rendering Vega visualizations as SVGs.
-//
-// Wraps a goja runtime vm, and uses embedded javascript to render the Vega
+// Vega handles rendering Vega and Vega Lite visualizations as SVGs. Wraps a
+// goja runtime vm, and uses embedded javascript to render Vega and Vega Lite
 // visualizations.
 type Vega struct {
 	r           *goja.Runtime
@@ -301,6 +294,12 @@ func decodeSchema(spec string) (string, bool) {
 	return schema, strings.HasPrefix(schema, vegaSchemaPrefix) || strings.HasPrefix(schema, liteSchemaPrefix)
 }
 
+// loggerFunc is the signature for the log func.
+type loggerFunc func([]string)
+
+// renderFunc is the signature for the render func.
+type renderFunc func(logger loggerFunc, spec string, data interface{}, cb func(string)) string
+
 // vega schema prefixes.
 const (
 	vegaSchemaPrefix = "https://vega.github.io/schema/vega/"