Car Zacts is a data visualization project for exploring different types of cars using D3 Visualization. This project is performed as part of CUNY 608 - Data Visualization course.
When I bought my first car, I did not know much. I still don't understand most of the parts and important parameters in it. I decided to understand better about cars to get my second car. When a data is presented in visual pattern, it is more easy to understand. Hence this project will have lot of visuals to understand car types, models, brands, parameters, etc. By performing this excercise, it is possible to find the car which suits your needs.
Visualizations has always played a major role in understanding the data patterns. Current explosion in open source technologies has given some powerful libraries to visualize the data in the way we have not seen in past. Once such library is called D3(Data-Drive Documents)
We live in the age where cars is a mandatory one. It is not luxary anymore. There are many datasets in internet. But the quality of datasets needs to be improved and updated. For this project, I have used the dataset which is provided by US Department of Energy. Every year, it releases fuel economy data for most of the cars in US region. It includes various data datafacts of each car model in that year. It is very useful information to find more about each car and its type.
It is often very difficult to know many cars at a single stretch. This view was developed with the goal to show all the important facts in intutive way with visualization. Top section shows number of cars and the variables.
It contains 6 different variables from the parent dataset. While driving, we often see important car facts in form of speed-o-meter. Generally those dials show speed and fuel information. Here similar view is followed with D3 visual. It is pretty intutive for the parameters which we see. When dial changes to next value, it transisions to next state in smooth fashion. All of the development is performed in D3. Zero miles represents the improper or null data in the dataset.
It works pretty intutively. When you mouse hover on the specific car, the dials show the important numbers for that specific car. At the similar time, you would have noticed the images of that car. Yes, it goes and fetches that specific car information and shows the image of it. It provides many images of that specific model. This will help us to understand more about that car model.
This is a classic way to understand data structure. Data is showed in hierachy fashion which we are always familiar. It also provides an option to change different
Complete visual is created via D3 and javascript. The original data is in csv format. It is changed to hierachial data via Underscore.js. Then the data is converted into JSON format with underscorejs. Then the dropdown is created and validated with Javascript. It provides option to select various parameters. All the parameters are shown in format of tree.
Tree is created with the order of selected parameters. If a parameter is selected in first dropbox, it is not shown in next Upcoming dropbox. So it makes the user selection easy. Once selected, the user should click on "Draw Tree" button. It creates a tree visualization. Select on the node or category which you want to see in detail. For eg, Year 2001, will have different car types. So in that way it can go until six different parameters.
Complete visual is created via D3 and javascript. The original data is in csv format. Only 2017 data is passed as input. Then it is changed to hierachial data via Underscore.js. It shows the sub-compact, compact, two-seater, midsize and large car categories in one specfic chart. It is often very hard to see huge amount of data in one chart. But this visual does a better job of doing that.
For the flexiblity, all the parameters have been passed internally. In default, it shows 2017 data with different categories in cars. Then the car brands are shown as a branch to it. Each car model is shown after the car brand.
Complete visual is created via D3 and javascript. The data is formatted and clensed via javascript. But selected input parameters are passed as input data. It contains data from 2012 to 2017. All years data is combined into one single dataset. Zero miles represents the improper or null data in the dataset.
This visualization shows the parameters which affects mileage. Also specific data can be filtered by selecting one small area in any of the columns. Also the columns can be interchanged easily. For ex, we can acheive 80 miles, if we have less engine displacement, less cylinders and less gears. It also shows the year of manufacturing in that specfic year.
I found the results which I got was very userful. Each D3 visualization was trying to explain some fact in intutive way. Sure this can also be represented in traditional charts. But good visualization attacts the audience and brings their attention.
I have created lot of pre-defined charts. Never created one from scratch. Before this project, I was lacking in java script and did not know much about D3. After starting this project, intitially it took lot of time to learn about Javascript and D3. Once I learnt more about it, I was able to incroporate any data with D3 object.
Overall it was a good project. Came to know more about cars and D3. This course gave a solid background on visualizations. Now I can confidently use it my data science career.