Click here to view website

Developer: Mark Wilde

1. Project Instructions
2. Purpose
3. UX
   • Wireframes
   • Design
   • User Stories
4. Features
5. Technologies
6. Testing
7. Deployment
8. Installation
9. Credits

Guidelines for project development:

• Build a data dashboard that visualizes a dataset of your choice.
• Visualize your data using D3.js and DC.js.
• Create a Single-Page Application.
• Incorporate links or buttons to allow your user to navigate the site and reset/control the site functionality.
• Create a website of around 4-5 pages.
• Incorporate main navigation and grid layout.
• Whenever possible, strive to use semantic HTML5 elements to structure your HTML code better.
• Make sure your site is as responsive as possible. You can test this by checking the website on different screen sizes and browsers.
• We advise that you write down user stories and create wireframes/mockups before embarking on full-blown development.
• The site can also make use of CSS frameworks such as Bootstrap.
• You should conduct and document tests to ensure that all of your websites functionality works well.
• Write a README.md file for your project.
• Use Git & GitHub for version control.
• Deploy the final version of your code to a hosting platform such as GitHub Pages.

This website provides statistical information about the passengers and crew of the RMS Titanic in the form of data visualization using open source Javascript libraries.

It is a simplistic static website that focuses on telling the story of those on board through various data models. It is concerned with four distinct areas:

1. Crew & Classes
2. Gender
3. Adults & Children
4. Survival Rates

Pencil was used to create the wireframes.

• The website incorporates some parallax images between the data chart sections to give the users a more in depth experience.

• It was decided to include a second basic view page so that users can view the data charts in isolation. They are much closer together in basic view mode. The reasoning behind this decision was that perhaps some users might enjoy seeing the data charts working in unison as they click on the various interactive components.

• A simple navbar and footer were implemented. The navbar includes scroll spy so that a user can click on a heading and be brought to that section. The footer includes a link to the titanic wiki page and this websites github repository.

• There is a refresh button in the navbar so that users can reset all graphs at any time. They may wish to start over and work through the interactive charts again.

• The Bootstrap framework underpins the project and was implemented as per convention.

• The project implemented D3.js, DC.js, Queue.js and Crossfilter.js to build and display the data charts .

• The websites color scheme and layout were chosen so as to give the website some personality and to make the data charts more visceral and visually appealing.

• The pictures and art where chosen to tell a visual narrative with regards the Titanic. With the pictures showing various stages of the Titanic's journey from beginning to end.

Several user stories were considered before development began:

1. "As someone who is interested in the Titanic disaster, I would like to be able to visit a website and be presented with official statistics regarding those onboard."

2. "As someone who is interested in the Titanic disaster, I would like to view data visualization charts representing key statistics of those onboard, to help me visualize the factors at play; and get a feel for the numbers involved. For example, what was the ratio of men to women? How many third class children survived the disaster?, and so on."

3. "As someone who is interested in the Titanic disaster, I would appreciate having access to a simple, easy to navigate website. Where I can explore some of the key facts underpinning the disaster.

4. I would also appreciate some images of the Titanic being displayed on the website, to help ignite my imagination."

5. "I would appreciate a link to further, more in-depth information about the titanic, to be included on the website."

6. "If possible I would like to feel some enthusiasm while clicking through the data charts and watching them dynamically interact. It is hoped that I may garner insights, or discover a narrative I may not have been aware of, before visiting the website."

• A page hosting a robust photo collection of the Titanic.
• A page hosting personal stories about some of the passengers who perished at sea, and those who survived the disaster.

• Cloud9
  • The project was developed using the Cloud9 Integrated Development Environment.

• HTML

  • The project uses HTML to create the pages.

• CSS

  • The project uses CSS to style the pages.

• Bootstrap CSS Framework

  • The project uses Bootstrap for styling and responsive design.

• FontAwesome Icons

  • The project uses FontAwesome for the social media icons and the navbar buttons.

• JQuery

  • The project uses Bootstrap's JQuery for responsiveness.

• D3.js

  • The project uses D3.js for manipulating documents based on data.

• DC.js

  • The project uses DC.js to leverage d3 and render charts in CSS-friendly SVG format.

• DC CSS

  • The project uses DC.css as per convention.

• Crossfilter.js

  • The project uses Crossfilter.js for fast multidimensional filtering for coordinated views.

• Queue.js

  • The project uses Queue.js for loading multiple files before running the rest of the code.

• The project uses Git as it's version control system.

• The project uses a Github repository.

The website has been deployed to Github Pages and can be accessed here

This project has been saved to a Github repository from the beginning of development. Hosting it to Github Pages was very straightforward. In the repository, from the settings menu, Github Pages was activated and the master branch was included as the source. A message is then generated by Github containing the following information: Your site is published at https://markwilde33.github.io/CI-project-two/

In my case, as with a previous project, clicking on the link returned a 404 error. A fix for this issue can be found at Stackoverflow, here are the instructions:

<!-- input the following commands in your terminal -->

$ git commit --allow-empty -m "Trigger rebuild"

$ git push

This corrected the error and the website loaded as intended.

from the console type:

$ git clone https://github.com/markwilde33/CI-project-two.git
$ cd CI-project-two

Open index.html in your web browser.

App available at http://127.0.0.1:5000/

Code Institute

The Html Fundamentals Module, CSS Fundamentals Module, JavaScript Fundamentals Module and the Interactive Front End Development Module were used for guidance.

• Wikipedia was used for researching the Titanic.

• Titanic data provided by the British Board of Trade was used to create a CSV file. As the author was unable to acquire a CSV file which contained the information he wished to present, a CSV file was created specifically for this project. This process took considerably longer than had been originally hoped.

• wallhere was used for Titanic pictures and images.

• I received inspiration for this project from Code Institute, The Net Ninja, Brad Traversy and Corey Schafer.