brittanyistenes / metrostop

An interactive graph for an end-to-end view. A metrostop is a visual representation of a product's lifecycle which can be used for the maintenance, optimization, analysis and conception of a product's life cycle processes.

Metrostop

An interactive graph for an end-to-end view. A metrostop is a visual representation of a product's lifecycle which can be used for the maintenance, optimization, analysis and conception of a product's life cycle processes.

What is a Metrostop View?

The Metrostop application is a graphical interface used to map the steps of an end-to-end process from beginning to end. It takes an input of data points and generates a visualization with the essential events in the processes on a high level and down to low level events that occur in the lifecycle of a product.

Getting Started

The application is capable of consuming CSV files and JSON formatted files.

To run it locally either:

1. simply open the latest app.html from the dist folder (/dist/app.html)
2. or run it directly from the code using Node
   1. Install the latest version of Node.js available to you.
   2. Open a command line and cd in to project folder.
   3. run command npm install
   4. run command npm start
   5. Open a browser and enter url localhost:8080

To visualize a diagram dataset, open the settings menu (on the left) and upload a dataset (example datasets can be found in the data/ folder).

Requirements

Production

Developement Requirements

• D3.js Version 7.0.0
• Node.js

1. Install the latest version of Node.js available to you.
2. Open a command line and cd in to project folder.
3. run command npm install
4. run command npm run build/dev
5. Open a browser and enter url localhost:8080