Merge pull request #253 from RhoInc/v1.4.0-dev

web-codebook v1.4.0
RhoInc · Jun 12, 2018 · 1eb2e42 · 1eb2e42
2 parents f569df4 + 856b5d6
commit 1eb2e42
Show file tree

Hide file tree

Showing 80 changed files with 4,814 additions and 1,134 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 ## Overview
 
-The web codebook is a javascript library that provides a concise summary of every variable in a dataset. The codebook includes interactive features such as real-time filters and requires minimal user configuration.
+The web codebook is a JavaScript library that provides a concise summary of every variable in a dataset. The codebook includes interactive features such as real-time filters and requires minimal user configuration.
  [Click here for a live demo](https://rhoinc.github.io/viz-library/examples/0009-web-codebook-demo/example.html). When the page loads, the user sees a "codebook" providing a graphical data summary for each data column.
 
 
@@ -13,16 +13,16 @@ The web codebook is a javascript library that provides a concise summary of ever
 
 ## Background
 
-The web-codebook is inspired Frank Harrell's excellent `summarize` method from the [hmisc R package](https://cran.r-project.org/web/packages/Hmisc/Hmisc.pdf). `summarize` creates concise data summaries with minimal user configuration. Further,  [Agustin Calatroni](http://graphics.rhoworld.com/pubs/SCT2007_Calatroni.pdf) and  [Shane Rosanbalm](https://github.com/RhoInc/sas-codebook) have created SAS data summary methods at Rho in recent years.  Our goal here is to create a web-based data summary that uses the same general principles (concise data display, minimal configuration), but with added interactivity (filters, paneled displays, data listings) that is not possible in the static displays created by hmisc or in SAS. 
+The web-codebook is inspired Frank Harrell's excellent `summarize` method from the [Hmisc R package](https://cran.r-project.org/web/packages/Hmisc/Hmisc.pdf). `summarize` creates concise data summaries with minimal user configuration. Further,  [Agustin Calatroni](http://graphics.rhoworld.com/pubs/SCT2007_Calatroni.pdf) and  [Shane Rosanbalm](https://github.com/RhoInc/sas-codebook) have created SAS data summary methods at Rho in recent years.  Our goal here is to create a web-based data summary that uses the same general principles (concise data display, minimal configuration), but with added interactivity (filters, paneled displays, data listings) that is not possible in the static displays created by Hmisc or in SAS. 
 
 ## Typical Usage
-Generally speaking, no configuration is needed to create a web-codebook. Just [load a json data set](https://github.com/RhoInc/web-codebook/wiki/Data-Guidelines) and the tool will automatically create a user interface (filters, etc.) based on the data set loaded. Initialize the chart like so: 
+Generally speaking, no configuration is needed to create a web-codebook. Just [load a JSON data set](https://github.com/RhoInc/web-codebook/wiki/Data-Guidelines) and the tool will automatically create a user interface (filters, etc.) based on the data set loaded. Initialize the chart like so: 
 
 ```javascript
 webcodebook.createChart('#chartLocation', {}).init(data);
 ```
 
-See the [API](https://github.com/RhoInc/web-codebook/wiki/API) and [configuration](https://github.com/RhoInc/web-codebook/wiki/Codebook-Configuration) pages for more details about custom configurations. 
+See the [API](https://github.com/RhoInc/web-codebook/wiki/API) and [Configuration](https://github.com/RhoInc/web-codebook/wiki/Codebook-Configuration) pages for more details about custom configurations. 
 
 ## Links 
 

diff --git a/build/test-page/explorer-local.html b/build/test-page/explorer-local.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Web Codebook</title>
+        <meta http-equiv = 'Content-Type' content = 'text/html; charset = utf-8'>
+
+        <script type = 'text/javascript' src = 'https://d3js.org/d3.v3.min.js'></script>
+        <script type = 'text/javascript' src = 'https://rawgit.com/RhoInc/Webcharts/master/build/webcharts.js'></script>
+        <script type = 'text/javascript' src = '../webcodebook.js'></script>
+        <script src="https://rawgit.com/RhoInc/viz-library/master/util/web/data/dataFiles.js"></script>
+
+        <link type = 'text/css' rel = 'stylesheet' href = 'https://rawgit.com/RhoInc/Webcharts/master/css/webcharts.css'>
+        <link type = 'text/css' rel = 'stylesheet' href = '../../css/webcodebook.css'>
+        <link type = 'text/css' rel = 'stylesheet' href = './index.css'>
+    </head>
+
+    <body>
+        <div id = 'title'>Web Codebook - Explorer</div>
+        <div id = 'subtitle'>Test Page</div>
+        <div id = 'container'></div>
+    </body>
+
+    <script type = 'text/javascript' src = './explorer.js' defer></script>
+</html>
diff --git a/build/test-page/explorer.html b/build/test-page/explorer.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Web Codebook</title>
+        <meta http-equiv = 'Content-Type' content = 'text/html; charset = utf-8'>
+
+        <script type = 'text/javascript' src = 'https://d3js.org/d3.v3.min.js'></script>
+        <script type = 'text/javascript' src = 'https://rawgit.com/RhoInc/Webcharts/master/build/webcharts.js'></script>
+        <script type = 'text/javascript' src = 'https://rawgit.com/RhoInc/web-codebook/master/build/webcodebook.js'></script>
+        <script src="https://rawgit.com/RhoInc/viz-library/master/util/web/data/dataFiles.js"></script>
+
+        <link type = 'text/css' rel = 'stylesheet' href = 'https://rawgit.com/RhoInc/Webcharts/master/css/webcharts.css'>
+        <link type = 'text/css' rel = 'stylesheet' href = 'https://rawgit.com/RhoInc/web-codebook/master/css/webcodebook.css'>
+        <link type = 'text/css' rel = 'stylesheet' href = './index.css'>
+    </head>
+
+    <body>
+        <div id = 'title'>Web Codebook - Explorer</div>
+        <div id = 'subtitle'>Test Page</div>
+        <div id = 'container'></div>
+    </body>
+
+    <script type = 'text/javascript' src = './explorer.js' defer></script>
+</html>
diff --git a/build/test-page/explorer.js b/build/test-page/explorer.js
@@ -0,0 +1,65 @@
+document.onreadystatechange = function () {
+    if (document.readyState === 'complete') {
+        //Load local build if in local environment.
+        if (window.origin !== 'https://rhoinc.github.io') {
+            var head = document.getElementsByTagName('head')[0];
+
+        //...load local build.
+            var script = document.createElement('script');
+            script.type = 'text/javascript';
+            script.src = '../webcodebook.js';
+            head.appendChild(script);
+
+        //...load local stylesheet.
+            for (var i = 0; i < document.styleSheets.length; i++) {
+                var styleSheet = document.styleSheets[i];
+                if (styleSheet.href.indexOf('webcodebook') > -1)
+                    styleSheet.disabled = true;
+            }
+            var link = document.createElement('link');
+            link.type = 'text/css';
+            link.rel = 'stylesheet';
+            link.href = '../../css/webcodebook.css';
+            head.appendChild(link);
+        }
+
+        function initExplorer(fileList){
+        //  console.log(fileList)
+        var metaFiles = ["AE","DM","LB"] //list of files to add meta data
+        d3.csv("https://rawgit.com/RhoInc/viz-library/master/data/safetyData/variableMetaData.csv",function(error,meta){
+            meta.forEach(function(f){
+            f.file = f.Form+".csv"
+            f.label = f.Label
+        //    console.log(f)
+            })
+            var fileList_clean = fileList.map(function(f){
+                f.path = "https://rawgit.com/RhoInc/viz-library/master"+f.rel_path.slice(1);
+            f.shortname = f.filename.replace(/\.[^/.]+$/, "")
+            if(metaFiles.indexOf(f.shortname)>-1){
+                f.meta = meta.filter(m=>m.Form == f.shortname)
+                .map(function(m){
+                m.value_col = m.Variable;
+                return m;
+                })
+                f["Metadata included?"] = "Yes"
+            }else{
+                f["Metadata included?"] = "No"
+            }
+                return f;
+            })
+
+            var settings = {
+                labelColumn:"filename",
+                ignoredColumns: ["local_path","rel_path","path"],
+                files:fileList_clean,
+            meta:meta
+            };
+            console.log(settings)
+            var explorer = webcodebook.createExplorer("#container", settings).init();
+        })
+
+        }
+
+        initExplorer(dataFiles)
+    }
+}
diff --git a/build/test-page/index.css b/build/test-page/index.css
@@ -0,0 +1,25 @@
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
+* {
+    padding: 0;
+    margin: 0;
+    font-family: 'Open Sans';
+}
+#title {
+    width: 96%;
+    padding: 0 0 1% 0;
+    border-bottom: 2px solid lightgray;
+    margin: 2% 2% 1% 2%;
+    font-size: 32px;
+    font-weight: normal;
+}
+#subtitle {
+    width: 96%;
+    margin: 0 2% 1% 2%;
+    font-size: 24px;
+    font-weight: lighter;
+}
+#container {
+    width: 96%;
+    margin: 1% 2%;
+    display: inline-block;
+}
diff --git a/build/test-page/index.html b/build/test-page/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Web Codebook</title>
+        <meta http-equiv = 'Content-Type' content = 'text/html; charset = utf-8'>
+
+        <script type = 'text/javascript' src = 'https://d3js.org/d3.v3.min.js'></script>
+        <script type = 'text/javascript' src = 'https://rawgit.com/RhoInc/Webcharts/master/build/webcharts.js'></script>
+        <script type = 'text/javascript' src = 'https://rawgit.com/RhoInc/web-codebook/master/build/webcodebook.js'></script>
+
+        <link type = 'text/css' rel = 'stylesheet' href = 'https://rawgit.com/RhoInc/Webcharts/master/css/webcharts.css'>
+        <link type = 'text/css' rel = 'stylesheet' href = 'https://rawgit.com/RhoInc/web-codebook/master/css/webcodebook.css'>
+        <link type = 'text/css' rel = 'stylesheet' href = './index.css'>
+    </head>
+
+    <body>
+        <div id = 'title'>Web Codebook</div>
+        <div id = 'subtitle'>Test Page</div>
+        <div id = 'container'></div>
+    </body>
+
+    <script type = 'text/javascript' src = './index.js'></script>
+</html>
diff --git a/build/test-page/index.js b/build/test-page/index.js
@@ -0,0 +1,50 @@
+document.onreadystatechange = function () {
+    if (document.readyState === 'complete') {
+        //Load local build if in local environment.
+        if (window.origin !== 'https://rhoinc.github.io') {
+            var head = document.getElementsByTagName('head')[0];
+
+        //...load local build.
+            var script = document.createElement('script');
+            script.type = 'text/javascript';
+            script.src = '../webcodebook.js';
+            head.appendChild(script);
+
+        //...load local stylesheet.
+            for (var i = 0; i < document.styleSheets.length; i++) {
+                var styleSheet = document.styleSheets[i];
+                if (styleSheet.href.indexOf('webcodebook') > -1)
+                    styleSheet.disabled = true;
+            }
+            var link = document.createElement('link');
+            link.type = 'text/css';
+            link.rel = 'stylesheet';
+            link.href = '../../css/webcodebook.css';
+            head.appendChild(link);   head.appendChild(script);
+        }
+
+        d3.csv(
+            'https://rawgit.com/RhoInc/viz-library/master/data/testData/ADTIMELINES_partialMissing.csv',
+            function(error,data) {
+                if (error)
+                    console.log(error);
+
+                var settings = {
+                //    chartVisibility: 'hidden',
+                    meta:[
+                    {
+                        value_col:"USUBJID",
+                        label:"Subject ID",
+                        description: "Unique Identifier"
+                    }
+                    ]
+                };
+                var instance = webcodebook.createCodebook(
+                    '#container',
+                    settings
+                );
+                instance.init(data);
+            }
+        );
+    };
+}
diff --git a/build/test-page/local.html b/build/test-page/local.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Web Codebook</title>
+        <meta http-equiv = 'Content-Type' content = 'text/html; charset = utf-8'>
+
+        <script type = 'text/javascript' src = 'https://d3js.org/d3.v3.min.js'></script>
+        <script type = 'text/javascript' src = 'https://rawgit.com/RhoInc/Webcharts/master/build/webcharts.js'></script>
+        <script type = 'text/javascript' src = '../webcodebook.js'></script>
+
+        <link type = 'text/css' rel = 'stylesheet' href = 'https://rawgit.com/RhoInc/Webcharts/master/css/webcharts.css'>
+        <link type = 'text/css' rel = 'stylesheet' href = '../../css/webcodebook.css'>
+        <link type = 'text/css' rel = 'stylesheet' href = './index.css'>
+        <script type = 'text/javascript' src = './index.js'></script>
+
+    </head>
+
+    <body>
+        <div id = 'title'>Web Codebook</div>
+        <div id = 'subtitle'>Test Page</div>
+        <div id = 'container'></div>
+    </body>
+
+</html>