Update demo scripts to load documents locally (visgl#167)

* Update demo scripts to load documents locally
forestofrain · Nov 3, 2016 · c6b27ce · c6b27ce
1 parent db8e5be
commit c6b27ce
Show file tree

Hide file tree

Showing 20 changed files with 254 additions and 224 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 dist/*
+dist-demo/*
 demo/dist/*
 build/*
 example/bundle.js

diff --git a/demo/src/javascripts/components/home.js b/demo/src/javascripts/components/home.js
@@ -119,25 +119,39 @@ class Home extends Component {
         <section id="features">
           <div className="container">
             <div>
-              <h2>deck.gl is a WebGL-powered framework for visual exploratory data analysis of large datasets.</h2>
+              <h2>
+                deck.gl is a WebGL-powered framework for visual exploratory
+                data analysis of large datasets.
+              </h2>
               <hr className="short" />
 
               <h3>A Layered Approach to Visualization</h3>
-              <p>Based on the notion of layers and instancing deck.gl is suitable to reason about and display data, perform
+              <p>
+              Based on the notion of layers and instancing deck.gl is
+              suitable to reason about and display data, perform
               on-the-fly aggregations and visually explore large datasets.
               </p>
 
-              <h3>High-precision computations in the GPU</h3>
-              <p>By emulating float64 computations in the GPU we support rendering datasets with unparalleled accuracy and performance.
+              <h3>Growing Layer Catalog</h3>
+              <p>
+              deck.gl defines an architecture for packaging high performance
+              WebGL visualizations as reusable JavaScript layers. We already
+              offer a catalog of proven layers and we have many more in the
+              works.
               </p>
 
-              <h3>Robust Architecture</h3>
-              <p>deck.gl is built using the latest JavaScript standards, including ES2016 and a rich ecosystem of libraries and settings that enable easy debugging and profiling of WebGL applications.
+              <h3>Interoperability with Mapbox</h3>
+              <p>
+              deck.gl is interoperable with Mapbox GL. We coordinate
+              with the Mapbox camera system to provide compelling 2D and 3D
+              visualizations on top of your Mapbox based maps.
               </p>
 
-              <h3>Interoperability with Mapbox</h3>
+              <h3>Strong React Integration</h3>
               <p>
-              deck.gl is interoperable with MapboxGL-js. We coordinate with Mapbox's camera system to provide compelling 2D and 3D visualizations on top of Mapbox's camera system.
+              deck.gl is a particularly good match with React, supporting
+              efficient WebGL rendering under the Reactive programming
+              paradigm.
               </p>
             </div>
           </div>
@@ -154,34 +168,36 @@ class Home extends Component {
               <div className="col-1-3">
                 <img src="images/Icon-1.svg" />
                 <h5>WebGL rendered</h5>
-                <p>Tested, highly performant layers for core data
-                   visualization use cases such as scatterplots, choropleths,
-                   and more, as well as support for custom WebGL layers.
+                <p>
+                Tested, highly performant layers for core data
+                visualization use cases such as scatterplots, choropleths,
+                and more, as well as support for custom WebGL layers.
                 </p>
               </div>
 
               <div className="col-1-3">
                 <img src="images/Icon-2.svg" />
-                <h5>React and MapboxGL friendly</h5>
-                <p>Comes with strong React and MapboxGL integrations.
-                   deck.gl is a particularly good match with React, supporting
-                   efficient WebGL rendering in "data flow architecture"
-                   applications.
+                <h5>Robust Architecture</h5>
+                <p>
+                deck.gl is built using the latest JavaScript standards,
+                including ES2016 and a rich ecosystem of libraries and
+                settings that enable easy debugging and profiling of
+                WebGL applications.
                 </p>
               </div>
 
-
               <div className="col-1-3">
                 <img src="images/Icon-3.svg" />
-                <h5>Automatic WebGL Buffer Management</h5>
-                <p>Special focus on buffer management, allowing both automatic
-                   buffer updates but also full application control of buffer
-                   allocation and management.
+                <h5>High-precision computations in the GPU</h5>
+                <p>
+                By emulating float64 computations in the GPU we support
+                rendering datasets with unparalleled accuracy and performance.
                 </p>
               </div>
             </div>
           </div>
         </section>
+
         <section id="footer">
           <div className="container text-center">
             <div className="logo">deck.gl</div>
@@ -192,7 +208,7 @@ class Home extends Component {
         </section>
 
       </div>
-    )
+    );
   }
 }
 

diff --git a/demo/src/javascripts/constants/pages.js b/demo/src/javascripts/constants/pages.js
@@ -1,5 +1,6 @@
-function getGithubUrl(filename) {
-  return `https://raw.githubusercontent.com/uber/deck.gl/dev/docs/${filename}`;
+function getDocUrl(filename) {
+  // return `https://raw.githubusercontent.com/uber/deck.gl/dev/docs/${filename}`;
+  return `docs/${filename}`;
 }
 
 function generatePath(tree) {
@@ -24,35 +25,35 @@ export const examplePages = generatePath([
     name: 'ScatterplotLayer',
     content: {
       demo: 'ScatterplotDemo',
-      code: 'docs/scatterplot.md'
+      code: 'code-markdown/scatterplot.md'
     }
   },
   {
     name: 'ArcLayer',
     content: {
       demo: 'ArcDemo',
-      code: 'docs/arc.md'
+      code: 'code-markdown/arc.md'
     }
   },
   {
     name: 'ChoroplethLayer',
     content: {
       demo: 'ChoroplethDemo',
-      code: 'docs/choropleth.md'
+      code: 'code-markdown/choropleth.md'
     }
   },
   {
     name: 'ScreenGridLayer',
     content: {
       demo: 'GridDemo',
-      code: 'docs/grid.md'
+      code: 'code-markdown/grid.md'
     }
   },
   {
     name: 'Trip Routes',
     content: {
       demo: 'HeroDemo',
-      code: 'docs/trips.md'
+      code: 'code-markdown/trips.md'
     }
   }
 ]);
@@ -63,36 +64,40 @@ export const docPages = generatePath([
     children: [
       {
         name: 'Introduction',
-        content: getGithubUrl('README.md')
+        content: getDocUrl('README.md')
       },
       {
         name: 'Getting Started',
-        content: getGithubUrl('getting-started.md')
+        content: getDocUrl('getting-started.md')
       },
       {
-        name: 'Using Layers',
-        content: getGithubUrl('using-layers.md')
+        name: 'What\'s New',
+        content: getDocUrl('whats-new.md')
       }
     ]
   },
   {
     name: 'Usage',
     children: [
+      {
+        name: 'Using Layers',
+        content: getDocUrl('using-layers.md')
+      },
       {
         name: 'Using With React',
-        content: getGithubUrl('using-with-react.md')
+        content: getDocUrl('using-with-react.md')
       },
       {
         name: 'Using With Mapbox GL',
-        content: getGithubUrl('using-with-mapbox-gl.md')
+        content: getDocUrl('using-with-mapbox-gl.md')
       },
       {
         name: 'Using Standalone',
-        content: getGithubUrl('using-standalone.md')
+        content: getDocUrl('using-standalone.md')
       },
       {
         name: 'Tips and Tricks',
-        content: getGithubUrl('tips-and-tricks.md')
+        content: getDocUrl('tips-and-tricks.md')
       }
     ]
   },
@@ -101,20 +106,20 @@ export const docPages = generatePath([
     children: [
       {
         name: 'Custom Layers',
-        content: getGithubUrl('custom-layers.md')
+        content: getDocUrl('custom-layers.md')
       },
       {
         name: 'Layer Lifecycle',
-        content: getGithubUrl('layer-lifecycle.md')
+        content: getDocUrl('layer-lifecycle.md')
       },
       {
         name: 'Attribute Management',
-        content: getGithubUrl('attribute-management.md')
+        content: getDocUrl('attribute-management.md')
       }
       // WIP
       // {
       //   name: 'Writing Shaders',
-      //   content: getGithubUrl('writing-shaders.md')
+      //   content: getDocUrl('writing-shaders.md')
       // }
     ]
   },
@@ -123,15 +128,15 @@ export const docPages = generatePath([
     children: [
       {
         name: 'Coordinate Systems',
-        content: getGithubUrl('coordinate-systems.md')
+        content: getDocUrl('coordinate-systems.md')
       },
       {
         name: 'Performance',
-        content: getGithubUrl('performance.md')
+        content: getDocUrl('performance.md')
       },
       {
         name: '64 bit Layers',
-        content: getGithubUrl('64-bits.md')
+        content: getDocUrl('64-bits.md')
       }
     ]
   }
@@ -141,7 +146,7 @@ export const docPages = generatePath([
   //   children: [
   //     {
   //       name: 'Release History',
-  //       content: getGithubUrl('release-history.md')
+  //       content: getDocUrl('release-history.md')
   //     }
   //   ]
   // }
@@ -153,7 +158,7 @@ export const layerDocPages = generatePath([
     children: [
       {
         name: 'Overview',
-        content: getGithubUrl('layers/README.md')
+        content: getDocUrl('layers/README.md')
       }
     ]
   },
@@ -162,7 +167,7 @@ export const layerDocPages = generatePath([
     children: [
       {
         name: 'Layer',
-        content: getGithubUrl('layers/base-layer.md')
+        content: getDocUrl('layers/base-layer.md')
       }
     ]
   },
@@ -171,23 +176,23 @@ export const layerDocPages = generatePath([
     children: [
       {
         name: 'ArcLayer',
-        content: getGithubUrl('layers/arc-layer.md')
+        content: getDocUrl('layers/arc-layer.md')
       },
       {
         name: 'ChoroplethLayer',
-        content: getGithubUrl('layers/choropleth-layer.md')
+        content: getDocUrl('layers/choropleth-layer.md')
       },
       {
         name: 'LineLayer',
-        content: getGithubUrl('layers/line-layer.md')
+        content: getDocUrl('layers/line-layer.md')
       },
       {
         name: 'ScatterplotLayer',
-        content: getGithubUrl('layers/scatterplot-layer.md')
+        content: getDocUrl('layers/scatterplot-layer.md')
       },
       {
         name: 'ScreenGridLayer',
-        content: getGithubUrl('layers/screen-grid-layer.md')
+        content: getDocUrl('layers/screen-grid-layer.md')
       }
     ]
   },
@@ -196,19 +201,19 @@ export const layerDocPages = generatePath([
     children: [
       {
         name: 'ArcLayer64',
-        content: getGithubUrl('layers/arc-layer-64.md')
+        content: getDocUrl('layers/arc-layer-64.md')
       },
       {
         name: 'ChoroplethLayer64',
-        content: getGithubUrl('layers/choropleth-layer-64.md')
+        content: getDocUrl('layers/choropleth-layer-64.md')
       },
       {
         name: 'LineLayer64',
-        content: getGithubUrl('layers/line-layer-64.md')
+        content: getDocUrl('layers/line-layer-64.md')
       },
       {
         name: 'ScatterplotLayer64',
-        content: getGithubUrl('layers/scatterplot-layer-64.md')
+        content: getDocUrl('layers/scatterplot-layer-64.md')
       }
     ]
   },
@@ -217,7 +222,7 @@ export const layerDocPages = generatePath([
     children: [
       {
         name: 'ExtrudedChoroplethLayer',
-        content: getGithubUrl('layers/extruded-choropleth-layer.md')
+        content: getDocUrl('layers/extruded-choropleth-layer.md')
       }
     ]
   }

diff --git a/demo/src/static/docs/arc.md → demo/src/static/code-markdown/arc.md b/demo/src/static/docs/arc.md → demo/src/static/code-markdown/arc.md
diff --git a/demo/src/static/docs/choropleth.md → demo/src/static/code-markdown/choropleth.md b/demo/src/static/docs/choropleth.md → demo/src/static/code-markdown/choropleth.md
diff --git a/demo/src/static/docs/examples.md → demo/src/static/code-markdown/examples.md b/demo/src/static/docs/examples.md → demo/src/static/code-markdown/examples.md
diff --git a/demo/src/static/docs/grid.md → demo/src/static/code-markdown/grid.md b/demo/src/static/docs/grid.md → demo/src/static/code-markdown/grid.md
diff --git a/demo/src/static/docs/overview.md → demo/src/static/code-markdown/overview.md b/demo/src/static/docs/overview.md → demo/src/static/code-markdown/overview.md
diff --git a/demo/src/static/docs/scatterplot.md → demo/src/static/code-markdown/scatterplot.md b/demo/src/static/docs/scatterplot.md → demo/src/static/code-markdown/scatterplot.md
diff --git a/demo/src/static/docs/trips.md → demo/src/static/code-markdown/trips.md b/demo/src/static/docs/trips.md → demo/src/static/code-markdown/trips.md
diff --git a/docs/64-bits.md b/docs/64-bits.md
@@ -1,13 +1,15 @@
-### On 64-bit Layers and their performance
+# About 64-bit Layers
 
 From version `3.0.0`, deck.gl begins to provide basic 64-bit math support
 in GPU shaders. 64-bit maths are used in various 64-bit layers that are provided
 with deck.gl. Please find the sample usage of them in the examples section.
 
+## Precision
+
 Using 64-bit layers, deck.gl is able to visualize data with extremely high
 dynamic range interactively. Points covering a whole city and accurate down
 to centimeter level at the same time can be processed and drawn to canvas
-on-th-fly. Since WebGL does not expose native 64-bit floating point number
+on-the-fly. Since WebGL does not expose native 64-bit floating point number
 support of certain modern desktop GPUs to developers, deck.gl uses two 32-bit
 native floating point number to extend and perserve significant digits and
 uses algorithms similar to those used in many multiple precision math libraries
@@ -28,6 +30,9 @@ Exponential: ~2.6 ulps
 Logarithm: ~11.6 ulps (depends on the accuracy of native log() function)
 Trigonometry: ~5 ulps
 ```
+Note: `ulp` = [unit of least precision](https://en.wikipedia.org/wiki/Unit_in_the_last_place)
+
+## Performance Implications
 
 Since the 64-bit floating point maths are emulated using the multiple precision
 arithmetics, it costs much more GPU cycles than native 32-bit math (more than an
@@ -47,5 +52,7 @@ If your data sets are modest in size (<100K) you will are unlikely to run into
 performance issues with 64-bit layers on modern GPUs, but if you have larger data
 sets you may want to do some testing before moving to 64-bit layers.
 
+## References
+
 - http://crd-legacy.lbl.gov/~dhbailey/mpdist
 - https://gmplib.org