GordonSmith · August 8, 2018 09:00 · Aug 8, 2018 · Sep 17, 2016 · Sep 17, 2016 · Sep 17, 2016
diff --git a/README.md b/README.md
@@ -1,8 +1,28 @@
-Tutorial 3:  Switch from Pie to Column.
+__Tutorial 3__:  Switch from Pie to Column.
 
-So Pie Charts are so last year, lets switch it up to a Column Chart:
+So [Pie Charts](https://bl.ocks.org/GordonSmith/913403c91d45b11473baa82d0ba790a4) are so last year, lets switch it up to a Column Chart:
+
+__1__ - Import the required visualization:
+```javascript
+import { Column } from "@hpcc-js/chart";
 ```
-require(["src/chart/Column"], function (Column) {
-    var widget = new Column()
-  ...
+
+__2__ - Instantiate and render the visualisation:
+```javascript
+var widget = new Column()           //  Create new instance of Column
+    .target("placeholder")          //  Nominate target on web page 
+    .columns(["Subject", "Result"]) //  Set "Columns"
+    .data([                         //  Set "Data"
+        ["English", 45],
+        ["Irish", 28],
+        ["Math", 98],
+        ["Geography", 48],
+        ["Science", 82]
+    ])
+    .render()                       //  Render
+    ;
 ```
+
+Note 1:  The only difference between this example and the previous [one](https://bl.ocks.org/GordonSmith/913403c91d45b11473baa82d0ba790a4) is the change from "Pie" to "Column" this demonstrates one of the key features of the @hpcc-js visualization framework - the ability to switch easily between visualisations for a single data "shape".
+Note 2:  To discover all the available "published properties" for the `Column` Widget see:  [Dermatology-Column](https://rawgit.com/hpcc-systems/Visualization/master/demos/dermatology/index.html?src/chart/Column.simple) and enable the "Properties" view.
+
diff --git a/index.html b/index.html
@@ -1,29 +1,23 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    <title>Hello World</title>
+    <title>Column Chart</title>
     <meta charset="utf-8" />
-    <link rel="stylesheet" href="index.css">
-    <script src="http://viz.hpccsystems.com/v1.14.4/dist-amd/hpcc-viz.js"></script>
+    <link rel="stylesheet" href="./index.css">
+
+    <!--  GetLibs:  An in-browser module loader for quick demos  -->
+    <script src="https://unpkg.com/getlibs"></script>
 </head>
+
 <body>
     <div id="placeholder">
+        <!--  Placeholder for Visualization  -->
     </div>
     <script>
-        require(["src/chart/Column"], function (Column) {
-            var widget = new Column()           //  Create new instance of TextBox
-                .target("placeholder")          //  Nominate target on web page 
-                .columns(["Subject", "Result"]) //  Set "Columns"
-                .data([                         //  Set "Data"
-                    ["English", 45],
-                    ["Irish", 28],
-                    ["Math", 98],
-                    ["Geography", 48],
-                    ["Science", 82]
-                ])
-                .render()                       //  Render
-            ;
-        });
+        //  Load Example JavaScript  (via GetLibs)---
+        System.import('./index.js');
     </script>
 </body>
+
 </html>
diff --git a/index.js b/index.js
@@ -0,0 +1,14 @@
+import { Column } from "@hpcc-js/chart";
+
+var widget = new Column()           //  Create new instance of Column
+    .target("placeholder")          //  Nominate target on web page 
+    .columns(["Subject", "Result"]) //  Set "Columns"
+    .data([                         //  Set "Data"
+        ["English", 45],
+        ["Irish", 28],
+        ["Math", 98],
+        ["Geography", 48],
+        ["Science", 82]
+    ])
+    .render()                       //  Render
+    ;
diff --git a/preview.png b/preview.png
diff --git a/reademe.md → README.md b/reademe.md → README.md
diff --git a/.block b/.block
@@ -0,0 +1 @@
+license: Apache-2.0
diff --git a/Tutorial 3: Column Chart b/Tutorial 3: Column Chart
@@ -1 +0,0 @@
-Column Chart

diff --git a/index.css b/index.css
@@ -0,0 +1,10 @@
+body {
+    padding:0px; 
+    margin:0px; 
+    overflow:hidden;
+}
+
+#placeholder {
+    width:100%; 
+    height:100vh;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Hello World</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="index.css">
+    <script src="http://viz.hpccsystems.com/v1.14.4/dist-amd/hpcc-viz.js"></script>
+</head>
+<body>
+    <div id="placeholder">
+    </div>
+    <script>
+        require(["src/chart/Column"], function (Column) {
+            var widget = new Column()           //  Create new instance of TextBox
+                .target("placeholder")          //  Nominate target on web page 
+                .columns(["Subject", "Result"]) //  Set "Columns"
+                .data([                         //  Set "Data"
+                    ["English", 45],
+                    ["Irish", 28],
+                    ["Math", 98],
+                    ["Geography", 48],
+                    ["Science", 82]
+                ])
+                .render()                       //  Render
+            ;
+        });
+    </script>
+</body>
+</html>
diff --git a/reademe.md b/reademe.md
@@ -0,0 +1,8 @@
+Tutorial 3:  Switch from Pie to Column.
+
+So Pie Charts are so last year, lets switch it up to a Column Chart:
+```
+require(["src/chart/Column"], function (Column) {
+    var widget = new Column()
+  ...
+```
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/Tutorial 3: Column Chart b/Tutorial 3: Column Chart
@@ -0,0 +1 @@
+Column Chart