4.1 KiB
4.1 KiB
id | title | isRequired | challengeType |
---|---|---|---|
bd7168d8c242eddfaeb5bd13 | Visualize Data with a Bar Chart | true | 3 |
Description
id="title"
.
User Story #2: My chart should have a g
element x-axis with a corresponding id="x-axis"
.
User Story #3: My chart should have a g
element y-axis with a corresponding id="y-axis"
.
User Story #4: Both axes should contain multiple tick labels, each with the corresponding class="tick"
.
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-date
and 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: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json
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: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
.
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.
Instructions
Tests
tests: []
Challenge Seed
Solution
// solution required