Data Visualization Projects - Visualize Data with a Scatterplot Graph
- Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/bgpXyK.
- Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.
- User Story #1: I can see a title element that has a corresponding
- User Story #2: I can see an x-axis that has a corresponding
- User Story #3: I can see a y-axis that has a corresponding
- User Story #4: I can see dots, that each have a class of
dot, which represent the data being plotted.
- User Story #5: Each dot should have the properties
data-yvalue containing their corresponding x and y values.
- User Story #6: The
data-yvalue of each dot should be within the range of the actual data and in the correct data format. For
data-xvalue, integers (full years) or Date objects are acceptable for test evaluation. For
data-yvalue (minutes), use Date objects.
- User Story #7: The
data-xvalue and its corresponding dot should align with the corresponding point/value on the x-axis.
- User Story #8: The
data-yvalue and its corresponding dot should align with the corresponding point/value on the y-axis.
- User Story #9: I can see multiple tick labels on the y-axis with
%M:%S time format.
- User Story #10: I can see multiple tick labels on the x-axis that show the year.
- User Story #11: I can see that the range of the x-axis labels are within the range of the actual x-axis data.
- User Story #12: I can see that the range of the y-axis labels are within the range of the actual y-axis data.
- User Story #13: I can see a legend containing descriptive text that has
- User Story #14: I can mouse over an area and see a tooltip with a corresponding
id="tooltip" which displays more information about the area.
- User Story #15: My tooltip should have a
data-year property that corresponds to the
data-xvalue of the active area.
- Here is the dataset you will need to complete this project:
- You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like:
- Once you're done, submit the URL to your working project with all its tests passing.
- Remember to use the Read-Search-Ask method if you get stuck.