I clicked through all of the tabs in the following two viz-library examples and none of them would load.

https://rhoinc.github.io/viz-library/examples/0008-safetyExplorer-default/

https://rhoinc.github.io/viz-library/examples/0011-safetyExplorer-queries/

Need to make sure all test-pages pull data from data-library instead of viz-library\data, and that they use jsdelivr instead of rawgit

• - webcharts
• - safety-outlier-explorer
• - ae-timelines
• - aeexplorer
• - clinical-timelines
• - crf-heat-map
• - dashboard-charts
• - dashboard-framework
• - paneled-outlier-explorer
• - participant-visit-listing
• - PopulationExplorer
• - Query-overview
• - safety-explorer-suite
• - safety-histogram
• - safety-results-over-time
• - safety-shift-plot
• - spike-histogram
• - web-codebook

Requires manual review. Run npm audit.

AE and ADAE were both tried, got 404 errors for both

https://rhoinc.github.io/viz-library/data/safetyData-queries/ADAE.csv
vs.
https://rhoinc.github.io/viz-library/safetyData-queries/ADAE.csv

Leaning towards allowing an arbitrary number of subfolders for any given example each of which is 'built' using the same process for the root project folder. The person who creates the example will be responsible for providing a way to navigate between the folders ... at least at first.

fa fa-github instead of fab fa-github

example 8 and example 11 need updates.

Files need to be converted to utf-8 to work better in our proprietary systems

Use https (instead of http) in all <script> calls under bin/gists/oden/ (like here)

Otherwise you get this error when viewing the example on github.io:

Need to make a gist list

Problems

• The example pages look 🤢
• Tracking metadata in a custom readme header is 😖

Proposed refactor

Refactor the example build and appearance to:

• Get rid of the ugly header and just use a simple 2-level nav. Top nav is the same as the front page. Second nav gives basic info about the example with links to more detail.
• Get rid of iframes and use a simple templated header on example pages instead.
• Track meta data using example-level package.json instead of inventing our own custom metadata tracking format.

Updated Example Requirements

Once the core content for an example has been created (index.html, image files, readme.md, etc), the user must create an independent package.json for the example. The information from package.json will be used to format the header for the example when the viz-library website is created (via npm run build).

The parameters for the package.json are:

• homepage required - The path to your example that they user should see when the page is loaded. This can be an image or an html file.
• main required: The path the script that created your working example. Most typically an R or js file in our case.
• name required - A short name for your example
• version required - use semantic versioning for each example.
• label - A nicely formatted version of name above (e.g. "simple-barchart" -> "Simple Barchart"). Note that this is a custom field that isn't in the npm package.json spec
• license
• author
• description
• keywords - include the programming language(s) (e.g. "R" or "js")
• dependencies - Links to any npm packages used to create the example
• rDependencies - References to any r packages used to create the example. Note that this is a custom field that isn't in the npm package.json spec, but follows the typical name:version format for npm dependencies.
• dataDependencies - Array to data files used to create the example. Note that this is a custom field that isn't in the npm package.json spec, but uses a simple array of data paths instead of the typical name:version format for npm dependencies.

Example package.json

A typical pacakge.json for an example might look like this:

{
  "homepage":"./example.html",
  "main": "simpleBarChart.js",
  "name": "simple-barchart-webcharts",
  "version": "1.0.0",
  "description": "This is a simple bar chart showing counts of medals won by country at the 2012 summer Olympics. Made with Webcharts.",
  "author": "Rho, Inc.",
  "license": "MIT",
  "keywords":["javascript","interactive","bar chart"],
  "dependencies": {
    "d3": "~3",
    "webcharts":"~1"
  },
  "dataDependecies":["./OlympicMedals2012.csv"]
}

since it lives in webcharts now.

Heather Kopetskie noticed that the Query Overview example in viz-library is no longer loading. We need to figure out a fix.

https://rhoinc.github.io/viz-library/examples/0013-query-overview/

The nav bar on the Safety Explorer Chart examples in the Viz Library (Default and Query Data versions) don't appear to be working. Chrome renders nothing when I click on one of the other charts. Firefox spits out: "301 Moved Permanently"

• 2-level title
• code -> github

Need a way to add a description for interactive graphics (basically, similar to how bl.ock.org processes a gist). Could use something like this? Or maybe just link to the github page?

Let users easily flip through the example pages

Use bin/gists/oden_dow_jones_practice Instead of bin/gists/oden/dow_jones_practice

Not 100% obvious that it's a clickable control now.

Examples 1 through 6

Migrate the following 5 examples

• Example 12 -> https://rhoinc.github.io/web-codebook/test-page/explorer/
• Example 11 -> https://rhoinc.github.io/safety-explorer-suite/test-page/queries/
• Example 16 -> https://rhoinc.github.io/safety-outlier-explorer/test-page/hyslaw/
• Example 17 -> https://rhoinc.github.io/safety-outlier-explorer/PopulationExplorer/testpage
• Example 18 -> https://bl.ocks.org/jwildfire/raw/f2bd58b09852a37dcb131ba43507fab4/

• Studies/LEAP/AES -> test page
• Studies/LEAP/Figure3 -> new repo
• Studies/PROSE/Subgroups -> new repo
• Tools/Labnormal -> new repo?
• Tools/OpenFDA -> archived - tool is broken - note added to readme
• Tools/AEExplorer/exampleX -> Test page
• Tools/Beeswarm -> new repo
• Tools/AxisMacro -> test page
• Tools/Sankeybarchart -> test page

render the readme.md as readme.html and add link to example page.

Manual intervention? or tweak script?

example 12 not renderering with refactor.

The following prototypes are not displaying and need to be fixed:

• Movies With Friends
• Safety Outlier Explorer - Example
• D3 Formatting Example
• Baseball Statistics Histogram III - Webcharts-templates
• Baseball Statistics Histogram II - Webcharts-templates
• Baseball Statistics Histogram - Webcharts-templates

Simple js redirects seems to work fine. Just update index.html as shown below and then delete other files:

<html lang="en"><head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
  This page has moved. You will be redirected to the <a href="https://rhoinc.github.io/r-library/examples/0006-precip-levelplot-lattice/">new location</a> momentarily ...
</body>
  <script>
    window.location.replace("https://rhoinc.github.io/r-library/examples/0006-precip-levelplot-lattice/");
  </script>
</html>

Migration checklist

• example 1 - R
• example 2 - R
• example 3 - R
• example 4 - R
• example 5 - R
• example 6 - R
• example 7 - webcharts
• example 8 - safetyExplorerSuite
• example 9 - webcodebook
• example 10 - spike histogram
• example 11 - safetyExplorerSuite
• example 12 - web-codebook
• example 13 - queryoverview
• example 15 - safetyexplorersuite
• example 16 - safetyexplorersuite
• example 17 - population explorer
• example 18 - scatterplot matrix
• example 19 - paneled outlier explorer
• example 20 - webcharts
• example 21 - webcharts
• example 22 - clinicaltimelines

The following charts have links to download data that either point you back to the Viz Library homepage or show an error "file not found" message:

Ordered Precipitation Heatmap
Spike Histogram Demo
Web Codebook Demo
Interactive Scatter Plot Lattice with Viral Signs Data
Unemployment Trends with a Multivariate Time Series
Simple Interactive Bar Chart (results data = null)
Safety Explorer Suite - Single Page
Web Codebook Explorer
Safety Explorer - Default Configuration