A modular open-source toolkit for building web and electron data visualization applications
MIT License
Project (pronounced project /ka/) is a modular open-source toolkit for building web and electron data visualization applications. It offers a boilerplate and toolset for building self-hosted data-centric and electron ready visualization applications. Geared towards sharing of supplemental materials associated with scientific publications, Project allows visitors to interact with visualizations, download associated data and images and try the visualization with their own uploaded or publicly available datasets. For developers the toolkit comes preconfigured with the popular design frameworks (Twitter Bootstrap, Angular UI) and cutting edge build tools (gulp, jspm, SystemJS) and examples integrating interactive visualizations using d3.js, AngularJS, and BioJS.
Note: Project is experimental. Many things will change. If you are interested in this project or have issues please feel free to contact me.
If you are not familiar, it would be worthwhile to read up on jspm, SystemJS and gulp.
If you don't already have jspm or gulp you should install them globally.
npm install -g gulp-cli jspm
git clone -b master https://github.com/Hypercubed/Project-Chi.git --single-branch --depth 50
cd Project-Chi
npm install # jspm install is run post-install by npm
gulp dev # uses the default "example" dataset (same as gulp dev --dataset=./dataset/example)
You are now ready to develop the project in the app folder. See "Separation of template and dataset" below.
gulp dev
, run development server (building is not required)gulp build
, build into the dist
directorygulp dist
, build and run server from dist
directorygulp deploy
, build and push to gh-pages
gulp dev-electron
, run development server, open in electrongulp dist-electron
, build and run server from dist
directory, open in electrongulp build-electron
, build into the dist
directory, then build electron app.
app/ <- browser application resources
bundles/ <- resource bundles
common/ <- shared tools
components/
directives/
filters/
partials/
services/
styles/
components/ <- site components (pages)
about/
error/
boot.js
app.js
app.css
routes.js
electron.js <- electron entry point
index.html <- single page application
gulp/
tasks/ <- gulp tasks
build.js
deploy.js
jspm.js
electron.js
other.js
server.js
config.js <- gulp config
dataset/ <- datasets
example/ <- default example dataset
... <- see File Structure of datasets below
.tmp/ <- temporary build goes here
dist/ <- build goes here
node_modules/ <- npm packages are installed here
jspm_packages/ <- jspm packages are installed here
package.json <- metadata used by npm and jspm
system.config.js <- SystemJS configuration generated by jspm
gulpfile.babel.js <- gulp script
CHANGELOG.md
README.md
credits.md
todo.md
By default all content in the app
directory will be served by the development server when running gulp dev
and built into the dist
folder when running gulp build
. However, to encourage contribution back to the project-
repository and enable using the same project-
source across multiple projects the developer may put project specific resources and configuration into a separate directory. This folder can then be served and built along with the project-
core. For example, if you create a extra
folder inside the dataset
directory the following commands will work as indicated:
gulp dev --dataset=./dataset/extra
runs the development server, serving the combination of the app
directory and dataset/extra
directories as the web root. Files in dataset/extra/app
override app
and dataset/extra/gulp/config.js
augments (deep-extends) gulp/config.js
. If no dataset is given ./dataset/example
is assumed.
The gulp build
, gulp dist
, gulp deploy
all work similarly.
File structure of a sub-project (dataset) is similar that of the Project- root structure. All directories and files are optional.
.
app/ <- application resources here override Project-Chi/app
components/ <- site components combine with and override Project-Chi/app/components/
common/ <- shared tools that combine with and override Project-Chi/app/common/
data/ <- special data folder that will be symlinked on build, good for large data
index.html <- optionally override Project-Chi/app/index.html (usually not needed)
gulp/
config.js <- gulp config augments (deep-extends) Project-Chi/app/gulp/config.js`
TBR
Yes, please.
This work was supported by a research grant from the Japanese Ministry of Education, Culture, Sports, Science and Technology (MEXT) to the RIKEN Center for Life Science Technologies.
TBD
Copyright (c) 2015-2016 RIKEN, Japan.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.