README.md 3.74 KB
Newer Older
Porter Libby's avatar
Porter Libby committed
1
# IFS Datavis Tool 2
Porter Libby's avatar
Porter Libby committed
2
## v0.1.3
Porter Libby's avatar
Porter Libby committed
3
Contributors: Porter Libby
Porter Libby's avatar
test    
Porter Libby committed
4

Porter Libby's avatar
Porter Libby committed
5
6
7
8
[![GitHub issues](https://img.shields.io/github/issues/probably-not-porter/datavis)](https://github.com/probably-not-porter/datavis/issues)<br>
[![GitHub license](https://img.shields.io/github/license/probably-not-porter/datavis)](https://github.com/probably-not-porter/datavis/blob/master/LICENSE)<br>
![GitHub repo size](https://img.shields.io/github/repo-size/probably-not-porter/datavis)<br>
[![Website shields.io](https://img.shields.io/website-up-down-green-red/http/shields.io.svg)](http://cluster.earlham.edu:9900/)<br>
Porter Libby's avatar
fix    
Porter Libby committed
9

Porter Libby's avatar
Porter Libby committed
10
**Docs:**
Porter Libby's avatar
Porter Libby committed
11
[ [ Database Map ] ](docs/DATABASE.md) [ [ Customization ] ](docs/CUSTOM.md) [ [ Mobile App ] ](docs/CUSTOM.md)
Porter Libby's avatar
docs    
Porter Libby committed
12

Porter Libby's avatar
Porter Libby committed
13
14

[ Live Demo Version ](http://cluster.earlham.edu:9900/)
Porter Libby's avatar
Porter Libby committed
15

Porter Libby's avatar
Porter Libby committed
16
17


Porter Libby's avatar
Porter Libby committed
18

Porter Libby's avatar
Porter Libby committed
19
A visualization tool for the IFS database using Node.js and the ArcGIS api. Uses queries to fetch data from the Earlham Field Science database and show that data in a graph format, as well as a map format. The goal of this application is to be useful for both information purposes, as well as for field work purposes. This requires that the app be usable on an android device, so that field data can be visualized in real time, but the tool must also be user-friendly enough that someone unfamiliar with the work could use it to look at data from a particular IFS trip.
Porter Libby's avatar
Porter Libby committed
20

Porter Libby's avatar
Porter Libby committed
21
22
23
24
25
<div style='display: inline'>
    <image width='30%' src="https://i.ibb.co/XYzb6Gh/Screenshot-20191126-193944.jpg"></image>
    <image width='30%' src="https://i.ibb.co/3CSJsL8/Screenshot-20191126-193902.jpg"></image>
    <image width='30%' src="https://i.ibb.co/HNJ51Hz/Screenshot-20191126-193845.jpg"></image>
</div>
Porter Libby's avatar
Porter Libby committed
26
27
28

**Map view**, **Graph view**, and **Data view** shown respectively.

Porter Libby's avatar
Porter Libby committed
29
## Usage
Porter Libby's avatar
Porter Libby committed
30
31
32
This app is set up to be usable on both mobile and desktop platforms. Keep in mind that whatever machine is hosting the Node server might need to be connected to the same network that your Database is set up on. 

It is possible to have the database and this tool running on the same machine, which would allow users to access the front-end of the tool from either the device running both programs, or any device connected to the same LAN as the host device.
Porter Libby's avatar
Porter Libby committed
33

Porter Libby's avatar
Porter Libby committed
34
First, the <strong>Data view</strong> will open, which can be used to select a specific set of data to view. Once a selection has been made, the user has the option to create a <strong>permalink</strong>, which can be used to return to the same query again, or <strong>export a .csv file</strong> of the data selected, which can be used with a few other processing tools. Once a selection is complete, the <strong>Graph View</strong> and <strong>Map view</strong> will light up to show the user that there is new data to be viewed.
Porter Libby's avatar
Porter Libby committed
35

Porter Libby's avatar
Porter Libby committed
36
37

### Desktop Setup
Porter Libby's avatar
Porter Libby committed
38
1. clone repository and enter parent directory
Porter Libby's avatar
Porter Libby committed
39
2. Follow the format below to create a `.env` file.
Porter Libby's avatar
Porter Libby committed
40
41
42
43
3. use `npm install` to add dependencies to node_modules folder
4. use `node index.js` to start a local development server
5. open `localhost:3000` in your favorite browser!

Porter Libby's avatar
Porter Libby committed
44
### Mobile Setup
Porter Libby's avatar
Porter Libby committed
45
46
1. Install a UNIX terminal emulator like [Termux (Android)](https://play.google.com/store/apps/details?id=com.termux&hl=en_US).
2. Install some basic tools in the emulator:
Porter Libby's avatar
Porter Libby committed
47
48
49
    1. ```pkg install git```
    2. ```pkg install nodejs```
    3. ```pkg install nano```
Porter Libby's avatar
Porter Libby committed
50
4. clone the repository.
Porter Libby's avatar
Porter Libby committed
51
3. Follow the format below to create a `.env` file.
Porter Libby's avatar
Porter Libby committed
52
53
54
55
4. Use `npm install` inside the directory to install dependencies.
5. Use `node index.js` to run the server.
6. open `localhost:3000` in your browser.

Porter Libby's avatar
Porter Libby committed
56
## Format template for .env file
Porter Libby's avatar
Porter Libby committed
57

Porter Libby's avatar
Porter Libby committed
58
```
Porter Libby's avatar
Porter Libby committed
59
60
61
62
63
DB_NAME=[database user name]
DB_HOST=[database host name]
DB_DATABASE=[database name]
DB_PASSWORD=[databse password]
DB_PORT=[database port]
Porter Libby's avatar
Porter Libby committed
64
65
```

Porter Libby's avatar
Porter Libby committed
66
## Node Dependencies
Porter Libby's avatar
Porter Libby committed
67
68
69
70
71
- dotenv@^8.1.0
- ejs@ ^2.7.1
- express@^4.17.1
- pg@^7.12.1
- restful-api@^0.1.8
Porter Libby's avatar
Porter Libby committed
72