This repository is a work in progress. The OWF team is evaluating the best way to develop D3.js-based Gapminder that can be used stand-alone and with Angular applications. Challenges include:
Open Water Foundation (OWF) GapMinder web application visualizes time series as animated D3.js "bubble plot" with multiple data variables.
This repository contains the files for developing and deploying the OWF "Gapminder" application. The Gapminder is an implementation of the Gapminder.org tool developed using the D3.js JavaScript library. A D3 approach was taken because no suitable solution was available at the time and D3 provided a dynamic option, and even today there may not be an appropriate solution from Gapminder.org that can be used (may need to evaluate this).
A previous iteration of this software is saved in the owf-lib-viz-d3.js repository, which assumed that multiple D3.js tools could be maintained together over time. However, continuing a D3 repository for multiple tools is problematic for a number of reasons:
Consequently, this repository has been created to focus on Gapminder. The following are possible implementations of Gapminder:
In all cases, it is desirable to automate creation of input data and configuration if possible in order to efficiently scale a visualization. TSTool software functionality is being evaluated for data preparation, including the following options:
The following folder structure is recommended for development.
Top-level folders should be created as necessary.
The following folder structure clearly separates user files (as per operating system),
development area (owf-dev), product (App-InfoMapper),
repositories for product (git-repos), and specific repositories for the product.
Repository folder names should agree with GitHub repository names.
Scripts in repository folders that process data should detect their starting location
and then locate other folders based on the following convention.
C:\Users\user\ User's home folder for Windows.
/c/Users/user/ User's home folder for Git Bash.
/cygdrive/C/Users/user/ User's home folder for Cygwin.
/home/user/ User's home folder for Linux.
owf-dev/ Work done on Open Water Foundation projects.
App-InfoMapper/ InfoMapper product files (name of this folder is not critical).
---- below here folder names should match exactly ----
git-repos/ Git repositories for the Angular portal web application.
owf-app-gapminder-d3/ D3 Gapminder web application.This repository contains the following main folders and files.
Need to figure out how to allow developing Gapminder with dependency on D3.js and its
dependencies, while packaging into an owf-gapminder.js that can be distributed.
owf-app-gapminder-d3/
build-util/ Scripts to manage repository, as needed.
gapminder/ Software development files for the InfoMapper.
.git/ Standard Git software folder for repository (DO NOT TOUCH).
.gitattributes/ Standard Git configuration file for repository (for portability).
.gitignore/ Standard Git configuration file to ignore dynamic working files.
README.md This readme file.
site/ Location where website files exist, including data and configuration
for Gapminder.
assets/ Data and other assets for Gapminder visualiation,
gitignored since in development will be copied from
workflow/ for built-in examples,
or copied from other repositories to test other implementations.
src/ Location of Gapminder source files.
workflow/ Workflow to create and copy examples into site folder.This describes a developer mode approach where code for all components may be developed.
Single topic websites that implement the Gapminder as the primary visualization tool should typically have a folder structure similar the following, where the Gapminder is used in a supporting role to implement a visualization. In the future, an installer for Gapminder will be provided so that a repository clone is not required. How easy is it to create a file to distribute Gapminder? Should the following rely on owf-app-gapminder-d3 clone or the js file that results from that?
C:\Users\user\ User's home folder for Windows.
/c/Users/user/ User's home folder for Git Bash.
/cygdrive/C/Users/user/ User's home folder for Cygwin.
/home/user/ User's home folder for Linux.
owf-dev/ Work done on Open Water Foundation projects.
GapMinder-CoSnodas/ Project that uses Gapminder software to implement a website.
---- below here folder names should match exactly ----
git-repos/ Git repositories for the Angular portal web application.
owf-app-gapminder-d3/ Gapminder web application containing test visualizations.
site/ Location of stand-alone website, gitignored.
owf-viz-co-snodas-gapminder/ Workflow files to process input for Colorado SNODAS
data visualization.
THIS IS A LEGACY REPOSITORY USING OLD GAPMINDER CODE.
owf-gapminder-co-snodas/ MAY RENAME OR CREATE A NEW REPO WITH THIS NAME.
web/ Location of stand-alone web files, to be copied into 'site',
gitignored except for scripts and static files.
workflow/ Location of workflow files to process data into 'web',
gitignored except for workflow configuration and static files.The following table lists deployed websites and corresponding implementation repositories that illustrate this configuration.
| Website | Content Generation Repository |
|---|---|
| TBD | ? not sure |
This describes how to develop with GapMinder if only source for the stand-alone applidation code is needed,
where Gapminder is distributed in final form such as js file. Need to figure out.
The following table lists deployed websites and corresponding implementation repositories that illustrate this configuration.
| Website | Web Application Repository |
|---|---|
| TBD | For example owf-viz-co-snodas-gapminder? |
This describes a developer mode approach where code for all components may be developed.
Integated Gapminder/Angular applications use Gapminder to provide a visualization within a larger Angular application, such as the InfoMapper. In this case, the Gapminder is a software component similar to other components used by the Angular application. The Angular application should typically have a folder structure similar the following, where the Gapminder is used in a supporting role to implement a visualization. In the future, an installer for Gapminder will be provided so that a repository clone is not required. However, when actively developing on the Gapminder it is helpful to use the clone.
C:\Users\user\ User's home folder for Windows.
/c/Users/user/ User's home folder for Git Bash.
/cygdrive/C/Users/user/ User's home folder for Cygwin.
/home/user/ User's home folder for Linux.
owf-dev/ Work done on Open Water Foundation projects.
InfoMapper-Poudre/ Angular product that uses Gapminder software to
implement a visualization.
---- below here folder names should match exactly ----
git-repos/ Git repositories for the Angular portal web application.
owf-app-gapminder-d3/ Gapminder web application for core Gapminder development.
HOW ARE FILES DEVELOPED HERE PACKAGED AND DEPLOYED/TESTED
IN THE FULL ANGULAR APPLICATION?
- as npm package (would be nice but what is involved
and do we want to support publicly since a custom component)?
- as assets files (ugly since it mixes software with data)
- something else?
owf-app-infomapper-ng/ Angular InfoMapper web application (may or may not require enhancement).
infomapper/src/assets/app/ Location of deployed web application.
owf-infomapper-poudre/ Workflow files to process input for web application,
deployed to folder above via copy during live development.The following table lists deployed websites and corresponding implementation repositories that illustrate this configuration.
| Website | Angular Application Repository |
|---|---|
| TBD | Maybe just owf-app-viz-demo-ng? |
This describes how to develop with GapMinder if only source for the Angular application is needed,
where Gapminder is distributed in final form such as npm package. Need to figure out.
The following table lists deployed websites and corresponding implementation repositories that illustrate this configuration.
| Website | Angular Application Repository |
|---|---|
| TBD | For example owf-infomapper-poudre or owf-app-infomapper-ng? |
Just clone the repository?
Explain how to run the application and use test data.
A Gapminder application is typically installed using a shell script with Git Bash, Cygwin, or Linux.
copy-to-owf-amazon-s3.batNeed to to provide a link to a specific implementation.
Contributions can be made via normal Git/GitHub protocols:
The Gapminder is maintained by the Open Water Foundation.
The license is being determined. Need to research the origin of the software - was some code copied from another project external to OWF?