code-institute-submissions / know-your-kryptonite-data-visualisation-dashboard Goto Github PK

Anthony Keogh: student in code institute - full stack development. Know your Kryptonite is the name of the project and it is a data visualisation dashboard that will give the user feedback on how to maintain a healthy work/life balance. The superman themes and movies are known all over the world and are a simple of strength. But even superman has a weakness which is a rare crystal call kryptonite. An ordinary person’s kryptonite could be issues in the workplace relating to tasks, workload, not meeting the standards required or working too many hours. This app helps you recognise the triggers and tips the balance in your favour to a healthier life both physically, emotionally or behaviourally.

Objective of project from code institute to CREATE A DATA DASHBOARD that has the following features: • Build a data dashboard that visualizes a dataset of your choice • Your data can be stored locally (e.g., in a js file) or sourced from an API • Visualise your data using D3.js and dc.js

 I wanted the design to look as simple as possible, because the main vocal point was the question and any fancy design would take away from it and dilute the importance of the questions. The blue, green and purple work really well together to separate the sections of the app without being too over bearing. When viewing the app in mobile it looks so simple but effective, and if anything that didn’t have a real purpose i took out, because i wanted to make the transition between each question fluent and i achieved this nicely.  The logo speaks for itself and provides an anchor or statue of the overall app, a person on the go on the mobile with the symbol of superman on their t-shirt and the headline ‘’Know your kryptonite’’ the same colour as red symbol.
 The app asked the user 9 fundamental questions that will generate a great insight into the users work/life balance by asking them to rate each question out of 10. The input buttons are easy to use, nothing confusing and therefore the user experience is simple, straightforward but effective. 
  The bar and pie at the bottom are there to show visual information of the answers they have given and get a better understanding straight away of where their weakness is and know they have to get better at it to have a more balance work/life.
                                                   The wireframe diagram   


                               (You will find the wireframe for this project in wireframe for kryptonite.png file)

Components

D3.js: D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation. Crossfilter.js: Crossfilter is a JavaScript library for exploring large multivariate datasets in the browser.

DC.js: is a javascript charting library with native crossfilter support, allowing highly efficient exploration on large multi-dimensional datasets (inspired by crossfilter's demo). It leverages d3 to render charts in CSS-friendly SVG format. Charts rendered using dc.js are data driven and reactive and therefore provide instant feedback to user interaction. dc.js is an easy yet powerful javascript library for data visualization and analysis in the browser and on mobile devices.

Flask: Flask is a micro web framework written in Python. It is classified as a microframework because it does not require particular tools or libraries. It has no database abstraction layer, form validation, or any other components where pre-existing third-party libraries provide common functions.

Queue.js: Queue.js is a simple and efficient queue implementation for JavaScript whose dequeue function runs in amortised constant time. As a result, for larger queues it can be significantly faster than using arrays.

MongoDB: MongoDB is a cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with schemata.

JQuery:jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.

Languages Html: Hypertext Markup Language is the standard markup language for creating web pages and web applications. With Cascading Style Sheets and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web.

CSS: Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

         CSS framework Bootstrap: Bootstrap is a free and open-source front-end web framework. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

Javascript: JavaScript, often abbreviated as JS, is a high-level, interpreted programming language that conforms to the ECMAScript specification. It is a programming language that is characterized as dynamic, weakly typed, prototype-based and multi-paradigm.

Testing and errors I had problems testing my app because i made a few errors along the way, but when i traceback back my steps to fix some of them, the charts still did not work. Its one of this cases where to fix it someone would have to sit next to me and explain the errors i made, because when i ask for help online i was constantly telling me to go to various files and folder and correct the mistakes which i did, but when it came to running the charts, it just didnt work. Maybe it was some small errors that ultimately made the difference to having 2 correctly running charts. But on the plus side i learned alot and improved my logical and problem solving skills hugely.

Credits and Acknowledgements Flask-PyMongo — Flask-PyMongo 2.2.0.post3 documentation Tutorial — PyMongo 3.7.2 documentation How to Create an Interactive Dashboard with Crossfilter and Dc.Js https://dc-js.github.io/dc.js/examples/bar.html

https://www.w3schools.com/ https://developer.mozilla.org/ https://www.quora.com/ slack You Don't Know JS: Up & Going by Kyle Simpson Github examples of visualisation charts