Cleanup docs and examples to viewer.load(table)

docs/md/installation.md

@@ -73,6 +73,7 @@ Once added to your page, you can access the Javascript API through the
 `perspective` symbol:
 
 ```javascript
+// Create Perspective's Web Worker, and then create a Table using your data.
 const worker = perspective.worker();
 const table = worker.table({A: [1, 2, 3]});
 const view = table.view({sort: [["A", "desc"]]});
@@ -90,7 +91,11 @@ Or create a `<perspective-viewer>` in HTML:
       };
       // The `<perspective-viewer>` HTML element exposes the viewer API
       const el = document.getElementsByTagName("perspective-viewer")[0];
-      el.load(data);
+
+      // Create a `Table` from the Perspective worker.
+      const worker = perspective.worker();
+      const table = worker.table(data);
+      el.load(table);
     });
   </script>
 </perspective-viewer>

docs/md/js.md

@@ -572,11 +572,11 @@ These can be directly linked in your HTML:
 ### Loading data into `<perspective-viewer>`
 
 Data can be loaded into `<perspective-viewer>` in the form of a `Table()` via
-the `load()` method. 
+the `load()` method.
 
 ```javascript
 // Create a new worker, then a new table on that worker.
-var table = perspective.worker().table(data);
+const table = perspective.worker().table(data);
 
 // Bind a viewer element to this table.
 viewer.load(table);
@@ -590,18 +590,19 @@ has loaded:
 
 ```javascript
 document.addEventListener("WebComponentsReady", function() {
-    var data = [
+    const data = [
         {x: 1, y: "a", z: true},
         {x: 2, y: "b", z: false},
         {x: 3, y: "c", z: true},
         {x: 4, y: "d", z: false}
     ];
 
-    var viewer = document.getElementById("view1");
-    viewer.load(data);
+    const viewer = document.getElementById("view1");
+    const table = perspective.worker().table(data);
+    viewer.load(table);
 
     // Add new row
-    viewer.update([{x: 5, y: "e", z: true}]);
+    table.update([{x: 5, y: "e", z: true}]);
 });
 ```
 

docs/static/js/animation.js

@@ -155,7 +155,8 @@ window.addEventListener("WebComponentsReady", function() {
 
     get_arrow(function(arrow) {
         const psp1 = document.querySelector("#demo1 perspective-viewer");
-        psp1.load(arrow.slice());
+        const tbl1 = worker.table(arrow.slice());
+        psp1.load(tbl1);
         psp1.restore({
             "row-pivots": ["Sub-Category"],
             "column-pivots": ["Segment"],
@@ -164,7 +165,8 @@ window.addEventListener("WebComponentsReady", function() {
         });
 
         const psp2 = document.querySelector("#get_started perspective-viewer");
-        psp2.load(arrow);
+        const tbl2 = worker.table(arrow.slice());
+        psp2.load(tbl2);
         psp2.restore({
             plugin: "d3_heatmap",
             "row-pivots": ["Sub-Category"],

packages/perspective-bench/src/html/benchmark.html

@@ -14,6 +14,7 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 
+    <script src="perspective.js"></script>
     <script src="perspective-viewer.js"></script>
     <script src="perspective-viewer-datagrid.js"></script>
     <script src="perspective-viewer-d3fc.js"></script>
@@ -34,7 +35,9 @@
             el.restore(JSON.parse(localStorage.getItem("layout")));
             const req = await fetch("benchmark.arrow");
             const arrow = await req.arrayBuffer();
-            el.load(arrow);
+            const worker = perspective.worker();
+            const table = worker.table(arrow);
+            el.load(table);
             el.toggleConfig();
         });
     </script>

packages/perspective-viewer/src/js/viewer.js

@@ -89,7 +89,6 @@ class PerspectiveViewer extends ActionElement {
         this._register_ids();
         this._register_callbacks();
         this._register_view_options();
-        this._register_data_attribute();
         this.toggleConfig();
         this._check_loaded_table();
     }

packages/perspective-viewer/src/js/viewer/dom_element.js

@@ -504,18 +504,6 @@ export class DomElement extends PerspectiveElement {
         render(options(current_renderers), this._vis_selector);
     }
 
-    // sets state
-    _register_data_attribute() {
-        // TODO this feature needs to become a real attribute.
-        if (this.getAttribute("data")) {
-            let data = this.getAttribute("data");
-            try {
-                data = JSON.parse(data);
-            } catch (e) {}
-            this.load(data);
-        }
-    }
-
     _autocomplete_choices(json) {
         const choices = [];
         for (let i = 1; i < json.length; i++) {