This is my implementation of Free Code Camp's Visualize Data with a Bar Chart project.
Built an app that is functionally similar to this. Fulfill the below user stories. Give it your own personal style. You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library.
Dataset provided by freeCodeCamp can be found here.
User stories:
- User Story #1: I can see a title element that has a corresponding
id="title"
. - User Story #2: I can see an x-axis that has a corresponding
id="x-axis"
. - User Story #3: I can see a y-axis that has a corresponding
id="y-axis"
. - 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-xvalue
anddata-yvalue
containing their corresponding x and y values. - User Story #6: The
data-xvalue
anddata-yvalue
of each dot should be within the range of the actual data and in the correct data format. Fordata-xvalue
, integers (full years) or Date objects are acceptable for test evaluation. Fordata-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
id="legend"
. - 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 thedata-xvalue
of the active area.
Web browser: Google Chrome (recommended), Mozilla Firefox