Skip to content

A platform for teaching and learning data visualization with D3.js and SVG.

License

Notifications You must be signed in to change notification settings

liunaiming/vizhub

 
 

Repository files navigation

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.

About

A platform for teaching and learning data visualization with D3.js and SVG.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 70.2%
  • TypeScript 26.1%
  • CSS 3.3%
  • Other 0.4%