DS4100 - Information in Visualizations Final Project

Project Summary

For this project we were tasked with making an interactive vizualization for the Massachusetts Sustainable Business Network, an organization that focuses on creating a sustainable economy through supporting small, local business initiatives. We decided on making a visualization that combines a Masschusetts map divided by zipcode, along with a treemap showing business type and a table with individual business information. The map of Massachusetts shows where members are located, and all three visualizations can be used to filter each other. Please visit the link below to see the visualization, watch the demo, and test it out yourself while learning a little more about the Massachusetts Sustainable Business Network!

Link to Github Pages: https://neu-ds-4200-s20.github.io/s-l-project-sbn4/

Initial Project Instructions and Setup: S-L Project Template

This template will help you get started with your project. Please look through all these materials so you know how to organize your project.

The GitHub Pages Website

Make sure you publish your project to github pages, and put the URL here: https://neu-ds-4200-s20.github.io/s-l-project-sbn4/

Setup

Under no circumstances should you be editing files via the GitHub user interface. Do all your edits locally after cloning the repository.

1. Clone this repository to your local machine. E.g., in your terminal / command prompt CD to where you want this the folder for this activity to be. Then run git clone <YOUR_REPO_URL>

2. In README.md update the URL above to point to your GitHub pages website.

3. CD or open a terminal / command prompt window into the cloned folder.

4. Start a simple python webserver. E.g., one of these commands:

   • python -m http.server 8000
   • python3 -m http.server 8000
   • py -m http.server 8000 If you are using Python 2 you will need to use python -m SimpleHTTPServer 8000 instead, but please switch to Python 3 as Python 2 will be sunset on 2020.01.01.

5. Wait for the output: Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/)

6. Now open your web browser (Firefox or Chrome) and navigate to the URL: http://localhost:8000

Root Files

• README.md is this explanatory file for the repo.

• index.html contains the main website content. It includes comments surrounded by <!-- and --> to help guide you through making your edits.

• style.css contains the CSS.

• LICENCE is your source code license.

Folders

Each folder has an explanatory README.md file

• data is where you will put your data files.

• favicons contains the favicons for the course projects. You shouldn't change anything here.

• files will contain your slides (PDF) and video (MP4).

• images will contain your screenshots, diagrams, and photos.

• js will contain all JavaScript files you write.

  • visualization.js is the main code that builds all your visualizations. Each visualization should be built following the Reusable Chart model

• lib will contain any JavaScript library you use. It currently includes D3.

Workflow

As you work with your team, you may have issues merging your changes. We recommend you pick one member of the team to be the project manager and deal with merging any pull requests.

Instead of all working directly out of the main master branch, you can try adopting a Git branching model for development. See, e.g., this article by Vincent Driessen and the included image:

Grading

Make sure to check these aspects of your work, which are important for every submission:

• Coding was done properly:

  • Your code was regularly committed and not edited via the GitHub user interface online.
  • You have clear, commented, and validated code.
  • Your web page loads properly and looks as expected in the latest Firefox and Chrome browsers.
  • Any code from other sources (modified or copied straight) is acknowledged.

• Your visualization works as required:

  • Styles are consistent across views.
  • None of the visualizations change size or move on the screen as you interact with them.