Stream 2 Project

Overview

What is this site for?

This is a site for a fictional candidate running for the office of Governor of California. It is primarily focused on displaying the use of a data-driven website.

What does it do?

It gives general information about the candidate and allows users to contact them by various means including a contact form. It also displays data from a school donations database taken from DonarsChoose.org using various visualisations and charts.

How does it work?

The site is built with the Python microframework Flask. It uses MongoDB to store data and D3.js, DC.js and Crossfilter.js to display and filter the data. The main layout of the site is built with HTML5, CSS and Javascript.

Testing

The site has been tested in Chrome, Firefox and Safari. Chrome device mode was used to check it for mobile responsiveness.

Features

Existing Features

• Contact form
• Interactive data display

Bugs

Existing Bugs

• The data charts are not responsive to smaller screen sizes. I tried to find a way to do this but was unable to get it to work at this time. I added a scroll bar so that the user can scroll across to see the hidden part of the charts on smaller screens.
• In general I am not happy with the design for mobile devices. It is not as user friendly at smaller screen sizes as I would like. However due to to time constraints I am unable to rectify it at this time.
• Using Gmail in the email backend to send the contact form messages. Access was blocked once since I deployed the site but I noticed this on final tests. It has now been fixed but I don't know why access was blocked the first time so the problem could arise again.
• The labels on some of the charts are unclear depending on the length of the bars. A better solution would be needed.

Tech Used

Some of the tech used includes:

• Flask
• dc.js
• D3.js
• Crossfilter
• keen-dashboards
• intro.js
• bootstrap
• jquery
• Flask-WTF
• Flask-Mail
• queue.js

Getting the code up and running

1. Firstly you will need to clone this repository by running the git clone <project's Github URL> command
2. Setup a virtual environment for the project
3. After you've that done you'll need to install the dependencies listed in the requirements.txt file.
4. You will need to create a secret key and enter your own mail settings in stream2_project.py.
5. Download the database from DonarsChoose.org
6. You will need MongoDB installed locally to serve the data
7. Start an instance of MongoDB in a separate terminal window by running mongod
8. The project can be viewed on http://127.0.0.1:5000/

My site can be viewed on Heroku here.