Data Visualization Projects - Visualize Data with a Bar Chart
- Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/GrZVaM.
- Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.
- User Story #1: My chart should have a title with a corresponding
- User Story #2: My chart should have a
g element x-axis with a corresponding
- User Story #3: My chart should have a
g element y-axis with a corresponding
- User Story #4: Both axes should contain multiple tick labels, each with the corresponding
- User Story #5: My chart should have a
rect element for each data point with a corresponding
class="bar" displaying the data.
- User Story #6: Each bar should have the properties
data-gdp containing date and GDP values.
- User Story #7: The bar elements'
data-date properties should match the order of the provided data.
- User Story #8: The bar elements'
data-gdp properties should match the order of the provided data.
- User Story #9: Each bar element's height should accurately represent the data's corresponding GDP.
- User Story #10: The
data-date attribute and its corresponding bar element should align with the corresponding value on the x-axis.
- User Story #11: The
data-gdp attribute and its corresponding bar element should align with the corresponding value on the y-axis.
- User Story #12: I can mouse over an area and see a tooltip with a corresponding
id="tooltip" which displays more information about the area.
- User Story #13: My tooltip should have a
data-date property that corresponds to the
data-date 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.