-
-
-
Scatterplot of Cars Horsepower vs. MPG
Writeup

Fun fact. For some reason this code does not work in Chrome but works in everything else.

For this assignment I decided to create a simple scatter plot that would allow me to practice with my HTML, Javascript, and D3. The data itself is basic information about a car model and its specs based on an X-Y axis of MPG and Horsepower. You are able to zoom into the graph by brushing over a specific part and zooming back out b y double clicking. There are 3 colors on the graph which represents one of the 3 origins a car may be from. Blue = US, Orange = Europe, Red = Japan.

For this project I opted to work alone and not in a group because of current semester scheduling. This proved to be fairly difficult since I felt as if I was learning everything from scratch. This project took me about a week to complete because of my lack of knowledge and time avaliable. A geew things I struggled with was the overlapping of the brushing and tooltip techniques. I originally wanted the tooltip containing the information about the car to hover above the point selected. However it ended being under the graph. I also wanted to create a legend with the 3 origins and their respected colors, however I couldnt seem to figure that out completly. Another thing I wish I did was to sperate my HTML, Javascript, and CSS into different files instead of keeping it in my main. For some reason I felt like writing eveything in one long file which turned out to be difficult the longer my code got

My code itself is currently a mess due to the fact that there are many ways to create a graph like this and I blended all those ways togther to create this monstrosity. I do feel like I learned a decent amount about Javascript and HTML and I would like to keep learning so a project like this doesnt take me forever and a day.