Data dashboard for cars in the 90's

---

What is this?

Click here to see a live version of the website

I had a data set about the cars in the 90's and using the technologies that I have learned throughout Interactive Frontend Development course I decided to build this web application .My ambition was to make the site responsive even if I used D3.js.

---

Technologies used :

• HTML5
• CSS3
• Bootstrap
• JavaScript
• jQuery
• D3.js
• DC.js
• Crossfilter.js

---

Requirements :

• 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

---

Guidelines:

• Create a Single-Page Application (SPA)
• Incorporate links or buttons to allow your user to navigate the site and reset/control the site functionality
• 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 site on different screen sizes and browsers. Please note that if you are building a data dashboard, only your chart containers are expected to be responsive. Charts using D3.js are not responsive as they are designed for desktop or large-screen viewing.
• Create wireframes/mockups before embarking on full-blown development.
• The site can also make use of CSS frameworks such as Bootstrap, just make sure you maintain a clear separation between the library code and your code.
• Conduct tests to ensure that all of your website’s functionality works well.
• Write a README.md file for your project that explains what the project does and the need that it fulfills.
• Use Git & GitHub for version control.

About project:

Wanted to be fairly simple and friendly for the any user who wants visualize a data set. I tried to use only a few colors that will express old but fun. I manage to make the website responsive on all platforms using Bootstrap and JavaScript. Also I have build a image slider with controls which will change image, title and paragraph content at the same time and an automatic image changer using JavaScript and jQuery. Although there are external libraries that are already build I wanted to make it from scratch to test my knowledge, to get experience and to face different problems along the way . One of the problems was when I managed to crash to browser because I had an infinite loop. If you have any suggestions please let me know.

Deployment

I used GitHub Pages for deployment using my master branch as the source.

Testing

For the testing I used :

• Google Developer Tools (responsive mode)
• Running the website in different browsers
• Running the website on different devices phones and tablets (apple, android)

Credits

Content

The text about the cars was copied from https://www.zeroto60times.com/2016/03/most-iconic-1990s-cars/

Media

The photos in the site were obtained from Google.