Skip to content
A platform for teaching and learning data visualization with D3.js and SVG.
Branch: master
Clone or download
Latest commit 35348b1 Feb 15, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Update production.md Nov 21, 2018
graveyard
packages Merge pull request #69 from datavis-tech/iterate-link-color Feb 16, 2019
.eslintignore Start ESLinting Jul 9, 2018
.eslintrc.js Lint Everything. Closes #81 Jul 9, 2018
.gitignore Ignore package-lock.json I do not have faith in it! Extra KBs in Git … Feb 7, 2019
.gitlab-ci.yml
.gitmodules Removed ui submodule Feb 7, 2019
.gitmodules-ci Use HTTPS for submodules in CI, SSH in dev Sep 16, 2018
LICENSE
README.md Add calls to action at the beginning of README Nov 18, 2018
deploy.sh Iterate deploy script Feb 13, 2019
ecosystem.config.js
lerna.json Establish architectural project structure Jun 16, 2018
package.json

README.md

VizHub

This repository contains the web app deployed to https://vizhub.com.

image try VizHub!

To get involved and stay updated:

See also https://github.com/datavis-tech/vizhub-ui

Table of Contents:

Product

A platform for teaching, learning, and practicing Data Visualization using D3.js and SVG.

Target audience:

  • Teachers of Data Visualization
  • Students of Data Visualization
  • Beta testing will occur with WPI Online Data Visualization course in Fall 2018

Related products:

Architecture

This project aspires to Clean Architecture (video).

DVT2_Architecture.svg

The UI package will be Open Source, following the Open Core Model. This is inspired by the success of this model with CodeSandbox.io. The idea is that the actual architectural core will remain proprietary so that commercial features can be offered, while enabling users and supporters of the product to:

  • inspect and comment on our public backlog
  • provide feedback via GitHub issues
  • contribute UI tweaks/features

Clean Architecture Resources:

Entities

packages/entities

entityDiagram

Use Cases

packages/useCases

useCasesDiagram

Development

Check out this intro to VizHub Development video

This project uses Git submodules, so first run this:

git submodule update --init

At the top level, Lerna is used for organizing packages.

npm install -g lerna
lerna bootstrap

The lerna bootstrap command links dependencies between local packages.

Run npm test to test all packages except web. Run npm run testAll to test all packages including web.

The command lerna bootstrap && npm run testAll can be used to do a full check on the current code.

Web

packages/web

To start the dev server:

cd packages/web
npm run dev

Run npm run testAll to test all packages including web (depends on having the dev server running).

Note You need to run lerna bootstrap for the web package to see changes made in other packages.

Typical workflow:

  • Change code in any package
  • lerna bootstrap && npm run testAll
  • Restart the dev server in a seperate terminal after lerna bootstrap is finished, to get the updates.
  • Access http://localhost:3000 for manual UI testing
    • Note The end-to-end web test emits the IDs of created documents, which you can use to save manual testing time.

The user interface code is organized using Atomic Design video.

You can’t perform that action at this time.