JHawk · July 15, 2019 16:45 · May 28, 2019 · Apr 15, 2019 · Apr 15, 2019 · Apr 15, 2019
diff --git a/index.html b/index.html
@@ -5,23 +5,23 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 
-    <script src="https://unpkg.com/@jpmorganchase/perspective/build/perspective.js"></script>
-    <script src="https://unpkg.com/@jpmorganchase/perspective-viewer/build/perspective.view.js"></script>
-    <script src="https://unpkg.com/@jpmorganchase/perspective-viewer-hypergrid/build/hypergrid.plugin.js"></script>
-    <script src="https://unpkg.com/@jpmorganchase/perspective-viewer-highcharts/build/highcharts.plugin.js"></script>
+    <script src="https://unpkg.com/@finos/perspective/build/perspective.js"></script>
+    <script src="https://unpkg.com/@finos/perspective-viewer/build/perspective.view.js"></script>
+    <script src="https://unpkg.com/@finos/perspective-viewer-hypergrid/build/hypergrid.plugin.js"></script>
+    <script src="https://unpkg.com/@finos/perspective-viewer-d3fc/build/d3fc.plugin.js"></script>
 
     <script src="example.js"></script>
 
     <link rel='stylesheet' href="index.css">
-    <link rel='stylesheet' href="https://unpkg.com/@jpmorganchase/perspective-viewer/build/material.css" is="custom-style">
+    <link rel='stylesheet' href="https://unpkg.com/@finos/perspective-viewer/build/material.css" is="custom-style">
 
 </head>
 
 <body>
 
     <div id="grid">
         <perspective-viewer row-pivots='["Region","State","City"]' sort='[["Profit","desc"]]' columns='["Sales", "Profit"]'></perspective-viewer>
-        <perspective-viewer view="sunburst" row-pivots='["Category","Sub-Category","Segment"]' sort='[["Profit","desc"]]' columns='["Sales", "Profit"]'></perspective-viewer>
+        <perspective-viewer view="d3_sunburst" row-pivots='["Category","Sub-Category","Segment"]' sort='[["Profit","desc"]]' columns='["Sales", "Profit"]'></perspective-viewer>
     </div>
 
 </body>

diff --git a/index.html b/index.html
@@ -20,8 +20,8 @@
 <body>
 
     <div id="grid">
-        <perspective-viewer row-pivots='["Sub-Category","Region","Segment"]' sort='[["Profit","desc"]]' columns='["Sales", "Profit"]'></perspective-viewer>
-        <perspective-viewer view="sunburst" row-pivots='["Sub-Category","Region","Segment"]' sort='[["Profit","desc"]]' columns='["Sales", "Profit"]'></perspective-viewer>
+        <perspective-viewer row-pivots='["Region","State","City"]' sort='[["Profit","desc"]]' columns='["Sales", "Profit"]'></perspective-viewer>
+        <perspective-viewer view="sunburst" row-pivots='["Category","Sub-Category","Segment"]' sort='[["Profit","desc"]]' columns='["Sales", "Profit"]'></perspective-viewer>
     </div>
 
 </body>

diff --git a/.block b/.block
@@ -1 +1,2 @@
-license: apache-2.0
+license: apache-2.0
+height: 1200
diff --git a/example.js b/example.js
@@ -1,8 +1,10 @@
+const ARROW = "https://unpkg.com/@jpmorganchase/perspective-examples/build/superstore.arrow";
+
 window.addEventListener('WebComponentsReady', function() {
 
     // Fetch and load arrow data.
     var xhr = new XMLHttpRequest();
-    xhr.open('GET', 'superstore.arrow', true);
+    xhr.open('GET', ARROW, true);
     xhr.responseType = "arraybuffer"
     xhr.onload = function() {
 

diff --git a/README.md b/README.md
@@ -1 +1 @@
-A demo of linked `<perspective-viewer>`'s using `superstore.arrow`.
+A demo of linked `<perspective-viewer>`s using `superstore.arrow`.
diff --git a/superstore.arrow b/superstore.arrow
diff --git a/superstore.arrow b/superstore.arrow
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+A demo of linked `<perspective-viewer>`'s using `superstore.arrow`.
diff --git a/example.js b/example.js
@@ -0,0 +1,29 @@
+window.addEventListener('WebComponentsReady', function() {
+
+    // Fetch and load arrow data.
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', 'superstore.arrow', true);
+    xhr.responseType = "arraybuffer"
+    xhr.onload = function() {
+
+        // Get `<perspective-viewer>`s from the DOM.
+        var el1 = document.getElementsByTagName('perspective-viewer')[0];
+        var el2 = document.getElementsByTagName('perspective-viewer')[1];
+
+        // Create a `table()` using the arrow response.
+        var table = perspective.shared_worker().table(xhr.response);
+
+        // Load the table in each of the `<perspective-viewer>`s DOM reference.
+        el1.load(table);
+        el2.load(table);
+
+        // Add an event listener to the first `<perspective-viewer>`.
+        el1.addEventListener("perspective-click", e => {
+
+            // Update the second `<perspective-viewer>`, filtering to the row 
+            // clicked on in the first `<perspective-viewer>`.
+            el2.restore(e.detail.config)
+        });
+    }
+    xhr.send(null);
+});
diff --git a/index.css b/index.css
@@ -1,7 +1,14 @@
-perspective-viewer {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
+#grid {
+    display: flex;
+    max-width: 600px;
+    max-height: 1200px;
+    margin: auto;
+    flex-direction: column;
+}
+
+#grid perspective-viewer {
+    height: 600px;
+    width: 600px;
+    flex: 1;
+    display: block;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+
+    <script src="https://unpkg.com/@jpmorganchase/perspective/build/perspective.js"></script>
+    <script src="https://unpkg.com/@jpmorganchase/perspective-viewer/build/perspective.view.js"></script>
+    <script src="https://unpkg.com/@jpmorganchase/perspective-viewer-hypergrid/build/hypergrid.plugin.js"></script>
+    <script src="https://unpkg.com/@jpmorganchase/perspective-viewer-highcharts/build/highcharts.plugin.js"></script>
+
+    <script src="example.js"></script>
+
+    <link rel='stylesheet' href="index.css">
+    <link rel='stylesheet' href="https://unpkg.com/@jpmorganchase/perspective-viewer/build/material.css" is="custom-style">
+
+</head>
+
+<body>
+
+    <div id="grid">
+        <perspective-viewer row-pivots='["Sub-Category","Region","Segment"]' sort='[["Profit","desc"]]' columns='["Sales", "Profit"]'></perspective-viewer>
+        <perspective-viewer view="sunburst" row-pivots='["Sub-Category","Region","Segment"]' sort='[["Profit","desc"]]' columns='["Sales", "Profit"]'></perspective-viewer>
+    </div>
+
+</body>
+
+</html>
diff --git a/.block b/.block
@@ -0,0 +1 @@
+license: apache-2.0
diff --git a/index.css b/index.css
@@ -0,0 +1,7 @@
+perspective-viewer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		A demo of linked `<perspective-viewer>`'s using `superstore.arrow`.
		A demo of linked `<perspective-viewer>`s using `superstore.arrow`.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		A demo of linked `<perspective-viewer>`'s using `superstore.arrow`.