{"id":19122010,"url":"https://github.com/gunnerjnr/stream-two-final-project","last_synced_at":"2026-04-13T00:06:02.389Z","repository":{"id":53670216,"uuid":"106424267","full_name":"GunnerJnr/stream-two-final-project","owner":"GunnerJnr","description":"A data dashboard displaying the technologies used throughout stream 2 - Backend Development.","archived":false,"fork":false,"pushed_at":"2021-03-19T22:11:55.000Z","size":6747,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-03T08:30:39.401Z","etag":null,"topics":["avengers-data-dashboard","css","csv-data","data-visualization","html","javascript","mongodb","python"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GunnerJnr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-10-10T13:55:29.000Z","updated_at":"2023-03-24T15:43:45.000Z","dependencies_parsed_at":"2022-09-10T08:50:14.716Z","dependency_job_id":null,"html_url":"https://github.com/GunnerJnr/stream-two-final-project","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GunnerJnr%2Fstream-two-final-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GunnerJnr%2Fstream-two-final-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GunnerJnr%2Fstream-two-final-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GunnerJnr%2Fstream-two-final-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GunnerJnr","download_url":"https://codeload.github.com/GunnerJnr/stream-two-final-project/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240177051,"owners_count":19760308,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["avengers-data-dashboard","css","csv-data","data-visualization","html","javascript","mongodb","python"],"created_at":"2024-11-09T05:19:25.372Z","updated_at":"2026-04-13T00:06:02.353Z","avatar_url":"https://github.com/GunnerJnr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DOCUMENTATION FOR STREAM 2 FINAL PROJECT - DATA DASHBOARD\n\n---\n\n# Table of Contents\n\n[Project Name](#project-name)\n\n[Description](#description)\n\n[Testing](#testing)\n\n[Installation](#installation)\n\n[Usage](#usage)\n\n[Contributing](#contributing)\n\n[Credits](#credits)\n\n---\n\n## Project name\n\nCode Institute - Stream 2 Final Project. “Avengers Data Dashboard”\n\n[Back to Table Of Contents](#table-of-contents)\n\n---\n\n## Description\n\nThe Avengers data dashboard is just that. It is a dashboard to display different\ntypes of Avengers information in the form of graphs, bar charts, pie charts,\ntable and more, using technologies such as Flask, DC.js, D3.js, Python, MongoDB\nand more. If you would like to see the project brief for a full breakdown of\nwhat I was instructed to do then please refer to the [Project\nBrief](ProjectBrief.md) file.\n\nLive version of the Avengers data dashboard is available for viewing on Heroku:\n\u003chttps://boiling-everglades-31193.herokuapp.com/\u003e\n\nHere is a link for the data I used in my project - CSV Data source:\n\u003chttps://github.com/fivethirtyeight/data/tree/master/avengers\u003e\n\n[Back to Table Of Contents](#table-of-contents)\n\n---\n\n## Testing\n\nI was trying to think of how unit tests fit into this project so that I could\ntry to use them to test the dashboard data, I am afraid I came up short on this\noccasion, the only way I thought I could of perhaps tested the functionality\nwould of been to use and test some manual dummy data before using the actual\nJSON data, but by the time I realised this, it was too late, and due to lack of\ntime I did not have time to retract on progress and make some.\n\nI did however spend a lot of time testing the responsive nature of the dashboard\nin multiple browsers, and different mobile phones and tablets. This actually led\nme too a bug on IOS mobile devices, I realised that I had my media breakpoints\nset to a min-width of 400px, the device was actually smaller than this and so\nthe dashboard was ugly and didn’t render as expected. A few adjustments to the\ncss solved this issue.\n\nOne thing I can also say due to lack of time, I did not have chance to make all\nof the actual SVG elements of the charts and graphs responsive, although I think\nif I had of had time I would of probably used a javascript approach to redraw\nthe elements on the browser resize using a function of some sort.\n\nI initially had trouble with the intro.js tooltips also as on mobile devices the\nfirst tooltip no matter where positioned seem to always render off screen, I\nmanaged to solve this by changing the div element the step was set up in and now\nit seems to work fine.\n\nI unfortunately ran in to problems with `D3/DC.js` I was hoping to get my bar charts and graphs linked up to the table so that it would filter with the other data. Unfortunately due to time constraints I will not be able to have that feauture right now so I have for now moved the table into its own html page, although that currently now contains a bug where if you run the `intro.js` site introduction it will display as if it was on the dashboard, really the functionality should be removed but I do not have time, so I am documenting the bug. I also wanted to make the charts and graphs responsive theirself, instead of just the container being responsive. I thought the keen dashboard might of helped with this but unfortunately it did not.\n\n[Back to Table Of Contents](#table-of-contents)\n\n---\n\n## Installation\n\n### Running the MongoDB Server\n\n- Firstly, you will need MongoDB installed - [Download MongoDB here if you\n    need it](https://www.mongodb.com/download-center?jmp=nav#community)\n\n- You should then simply be able to run this command in a terminal/cmd window\n\n`'mongod --config [PATH]\\_mongoDB_data\\_config\\_mongodb_config.conf'`\n\n**NOTE:** You will need to ammend the path as neccessary to suit where you\nextracted the file too.\n\n#### Uploading the data for the database to work\n\n• Run mongoDB by running the command mongod in your Terminal/Command Prompt.\n\n• Leave the prompt running as it is and open another Terminal/Command Prompt\nwindow.\n\n• Copy the csv file to the same location as the directory opened in the second\nterminal window.\n\n• Enter the following command:\n\n`'mongoimport  -d avengers -c avengers_project --type csv --file avengers.csv\n--headerline'`\n\n• The database created: avengers\n\n• The collection name: avengers_project\n\n• The data type to be uploaded: csv\n\n• The filename: \\_csv_data\\\\avengers.csv\n\n• Treat the first record imported as the field names: --headerline\n\n**NOTE:** It will take a few minutes to upload the data. You will see a progress\nindicator in the terminal letting you know how much data has approximately been\nuploaded.\n\n#### Running the requirements.txt to install needed packages\n\nFor virtualenv to install all files in the requirements.txt file.\n\n1. cd to the directory where requirements.txt is located\n1. activate your virtualenv\n1. run: `pip install -r requirements.txt` in your shell\n\n![](readme_img/dashboard.png)\n\n[Back to Table Of Contents](#table-of-contents)\n\n---\n\n## Usage\n\n[KeenDashboard](#https://github.com/keen/dashboards)\n\nClick the start tour button in the sites navigation for a full tour on each\nelement and what you can do with it.\n\n[Back to Table Of Contents](#table-of-contents)\n\n---\n\n## Contributing\n\nHere is a link for the data I used in my project - [CSV Data\nsource:](https://github.com/fivethirtyeight/data/tree/master/avengers)\n\n[Back to Table Of Contents](#table-of-contents)\n\n---\n\n## Credits\n\nCode Institute\n\nAndrew Flowers (CSV data)\n\n[Back to Table Of Contents](#table-of-contents)\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgunnerjnr%2Fstream-two-final-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgunnerjnr%2Fstream-two-final-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgunnerjnr%2Fstream-two-final-project/lists"}