diff --git a/examples/0015-safety-explorer-single-page/README.md b/examples/0015-safety-explorer-single-page/README.md new file mode 100644 index 0000000..062bec8 --- /dev/null +++ b/examples/0015-safety-explorer-single-page/README.md @@ -0,0 +1,18 @@ +**Title:** Safety Explorer Suite - Single Page + +**Languages:** javascript + +**Libraries:** safety-explorer-suite, webcharts, safety-histogram, safety-results-over-time, safety-shift-plot, safety-outlier-explorer, ae-timeline, ae-explorer + +**Description:** Example of the safety explorer suite, a simple framework combining 6 interactive safety charts in to a single page. + +**Tags:** interactive, queries + +**Data:** ../../data/safetyData-queries/ + +**Code:** example.html + +**Results:** example.html + +[comment]: <> (---END OF HEADER---) +The primary advantage to loading all 6 charts on a single page, is that the data only needs to be loaded once, and can then be re-used in all relevant charts. This example loads the data from csv (by specifying loadcsv:true in the .init() method), but the data can also be passed as json. diff --git a/examples/0015-safety-explorer-single-page/Screenshot.png b/examples/0015-safety-explorer-single-page/Screenshot.png new file mode 100644 index 0000000..2e2a796 Binary files /dev/null and b/examples/0015-safety-explorer-single-page/Screenshot.png differ diff --git a/examples/0015-safety-explorer-single-page/example.html b/examples/0015-safety-explorer-single-page/example.html new file mode 100644 index 0000000..a76e867 --- /dev/null +++ b/examples/0015-safety-explorer-single-page/example.html @@ -0,0 +1,41 @@ + + + + + + + Safety Explorer Suite + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/examples/0015-safety-explorer-single-page/index.html b/examples/0015-safety-explorer-single-page/index.html new file mode 100644 index 0000000..92b76ce --- /dev/null +++ b/examples/0015-safety-explorer-single-page/index.html @@ -0,0 +1,62 @@ + + Safety Explorer Suite - Single Page + + + + + + + + + 🏠 + +

Safety Explorer Suite - Single Page

Example of the safety explorer suite, a simple framework combining 6 interactive safety charts in to a single page.
+
+
Languages javascript
Libraries safety-explorer-suite,webcharts,safety-histogram,safety-results-over-time,safety-shift-plot,safety-outlier-explorer,ae-timeline,ae-explorer
Tags interactive, queries
Data ../../data/safetyData-queries/
Results example.html

The primary advantage to loading all 6 charts on a single page, is that the data only needs to be loaded once, and can then be re-used in all relevant charts. This example loads the data from csv (by specifying loadcsv:true in the .init() method), but the data can also be passed as json.

+
+

Code

+ 
<!DOCTYPE html>
+<html>
+
+    <head>
+        <meta
+            http-equiv = 'Content-Type'
+            content = 'text/html; charset = utf-8'>
+
+        <title>Safety Explorer Suite</title>
+
+        <script type = 'text/javascript' src = 'https://d3js.org/d3.v3.min.js'></script>
+        <script src="https://rawgit.com/RhoInc/Webcharts/master/build/webcharts.js"></script>
+        <script src="https://rawgit.com/RhoInc/aeexplorer/master/build/aeTable.js"></script>
+        <script src="https://rawgit.com/RhoInc/ae-timelines/master/build/aeTimelines.js"></script>
+        <script src="https://rawgit.com/RhoInc/safety-histogram/master/build/safetyHistogram.js"></script>
+        <script src="https://rawgit.com/RhoInc/safety-outlier-explorer/master/build/safetyOutlierExplorer.js"></script>
+        <script src="https://rawgit.com/RhoInc/safety-results-over-time/master/build/safetyResultsOverTime.js"></script>
+        <script src="https://rawgit.com/RhoInc/safety-shift-plot/master/build/safetyShiftPlot.js"></script>
+
+
+        <script type = 'text/javascript' src = 'https://rawgit.com/RhoInc/safety-explorer-suite/master/build/safetyExplorerSuite.js'></script>
+
+        <link type = 'text/css' rel = 'stylesheet' href = 'https://rawgit.com/RhoInc/safety-explorer-suite/master/css/safetyExplorerSuite.css'>
+        <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/aeexplorer/master/css/aeTable.css'>
+
+    </head>
+
+    <body>
+    </body>
+
+    <script>
+    var paths = [
+       {path:'../../data/safetyData-queries/ADAE.csv', type:"AEs"},
+       {path:'../../data/safetyData-queries/ADBDS.csv', type:"Labs"}
+    ]
+    var ses = safetyExplorerSuite.createExplorer('body', {});
+    ses.init(paths, loadcsv=true)
+
+    </script>
+</html>
+
+
+ + \ No newline at end of file diff --git a/examples/0015-safety-explorer-single-page/thumb.png b/examples/0015-safety-explorer-single-page/thumb.png new file mode 100644 index 0000000..0769cb1 Binary files /dev/null and b/examples/0015-safety-explorer-single-page/thumb.png differ diff --git a/util/web/data/dataFiles.js b/util/web/data/dataFiles.js index f890df5..1e91849 100644 --- a/util/web/data/dataFiles.js +++ b/util/web/data/dataFiles.js @@ -47,22 +47,6 @@ var dataFiles = [ rows: 5000, cols: 11 }, - { - local_path: "/Users/jwildfire/Sites/github/viz-library/data/safetyData-queries/ADAE.csv", - filename: "ADAE.csv", - ext: "csv", - rel_path: "./safetyData-queries/ADAE.csv", - rows: 402, - cols: 23 - }, - { - local_path: "/Users/jwildfire/Sites/github/viz-library/data/safetyData-queries/ADBDS.csv", - filename: "ADBDS.csv", - ext: "csv", - rel_path: "./safetyData-queries/ADBDS.csv", - rows: 22695, - cols: 20 - }, { local_path: "/Users/jwildfire/Sites/github/viz-library/data/safetyData/ADAE.csv", filename: "ADAE.csv", @@ -142,5 +126,21 @@ var dataFiles = [ rel_path: "./safetyData/vitalSigns.csv", rows: 27, cols: 7 + }, + { + local_path: "/Users/jwildfire/Sites/github/viz-library/data/safetyData-queries/ADAE.csv", + filename: "ADAE.csv", + ext: "csv", + rel_path: "./safetyData-queries/ADAE.csv", + rows: 402, + cols: 23 + }, + { + local_path: "/Users/jwildfire/Sites/github/viz-library/data/safetyData-queries/ADBDS.csv", + filename: "ADBDS.csv", + ext: "csv", + rel_path: "./safetyData-queries/ADBDS.csv", + rows: 22695, + cols: 20 } ]; diff --git a/util/web/data/examples.js b/util/web/data/examples.js index 2abcd63..bad2796 100644 --- a/util/web/data/examples.js +++ b/util/web/data/examples.js @@ -464,5 +464,44 @@ var examples = [ tags: "interactive, graphics, testing", langages: ["javascript"], makeIndex: true + }, + { + dir: "0015-safety-explorer-single-page", + files: [ + "README.md", + "Screenshot.png", + "example.html", + "index.html", + "thumb.png" + ], + paths: { + root: "./examples/0015-safety-explorer-single-page/", + readme: "README.md", + index: "index.html", + thumb: "thumb.png", + data: "../../data/safetyData-queries/", + code: "example.html", + example: "example.html" + }, + readme: {}, + title: "Safety Explorer Suite - Single Page", + languages: "javascript", + libraries: [ + "safety-explorer-suite", + "webcharts", + "safety-histogram", + "safety-results-over-time", + "safety-shift-plot", + "safety-outlier-explorer", + "ae-timeline", + "ae-explorer" + ], + description: "Example of the safety explorer suite, a simple framework combining 6 interactive safety charts in to a single page.", + data: "../../data/safetyData-queries/", + code: "example.html", + results: "example.html", + tags: "interactive, queries", + langages: ["javascript"], + makeIndex: true } ];