Skip to content

Node.js + D3.js: developed script to parse, compare, and build data from various csv files, then display the results in an interactive visualization.

Notifications You must be signed in to change notification settings

travisgillespie/reformatAndGraphCsvData

Repository files navigation

Sales Report Automation

This guide will help you setup and run automation for this app. I used Node.js and D3.js to automate quarterly sales reports. Node was used to parse, compare, and build data from various csv files. D3 was used to display the report. This program can be downloaded and modified to fit your business needs.

Graph png

Required Downloads

*Steps 2-4: Open your terminal, and cd to the root directory d3_SalesReport

  1. Download Node. Either version 6 or 8 should work. I used version 8 for this project.

  2. If you follow step 2, skip steps 3 & 4. Use the package.json file to install all required modules. In your terminal type: npm install array-to-csv.

  3. Install NPM array-to-csv. In your terminal type: npm install array-to-csv.

  4. Install NPM jsonfile. In your terminal type: npm install jsonfile.

 

Node.js Steps

Storing Files and Naming Conventions

Node can be used to cross-reference multiple files. This program uses csv files. The files should be stored in specific locations to keep your project organized. Node was used to read the csv files and store them as multidimensional arrays. This is how I cross-referenced the data. The code you write in parseWkst.js will depend on the layout of your csv files.

  1. Store a csv file in the project directory: e.g. d3_SalesReport > data > csvContentReport > fileName1.csv
* Note: The path to this file should be defined in parseWkst.js on line 6.

  2. Store the csv file to be cross-referenced in the project directory: e.g. d3_SalesReport > data > csvGlobalReport > fileName2.csv

* Note: The path to this file should be defined in parseWkst.js on line 7.

 

Running the program

  1. Open your terminal and cd to the d3_SalesReport directory.
  2. Type node parseWkst

Retrieving Files

Two files will be created after running the parseWkst program. 2. A json file which will be used in playground.js to build the D3 graph.

* Note: The directory path and name can be defined in parseWkst.js on line 42.

 

  1. A csv file which will be used to display the data using D3.
* Note: The directory path and name can be defined in parseWkst.js on line 53.

  ./objRegions.js ./data/dataCSV/exampleData.csv

D3.js Steps

Data Analysis

The goal is to use this template as a stepping stone to build and view your own data via https server. Currently an example can can be viewed from my portfolio or via your local drive by following these steps:

  1. Open your terminal and cd to the d3_SalesReport directory.
  2. Type one of the following:
  • python -m SimpleHTTPServer
  • python -m SimpleHTTPServer <port number>
    • e.g. python -m SimpleHTTPServer 8080
  1. Wait for the terminal to respond. It should respond that it's serving http on a specific port.
  • e.g. Serving HTTP on 0.0.0.0 port 8000 ...
  1. Navigate to a browser and type the following in the address bar:
  • localhost:<port number>/index.html
    • e.g. localhost:8000/index.html
* Note: Two example files are being used to display the data. If you'd like to run your own report and view that data, follow the steps preceding this section. Then:
  1. Navigate to d3_SalesReport > index.html, scroll down to line 18, replace the path and filename to match your json file path.

  2. Navigate to d3_SalesReport > barChart.js, scroll down to line 15, replace the path and filename to match your csv file path.  

About

Node.js + D3.js: developed script to parse, compare, and build data from various csv files, then display the results in an interactive visualization.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published