A bar chart with United States GDP data.
- HTML
- CSS
- JavaScript
- D3.js
Build a bar chart fulfilling the following user stories.
-
User Story #1: My chart should have a title with a corresponding
id="title"
. -
User Story #2: My chart should have a
g
element x-axis with a correspondingid="x-axis"
. -
User Story #3: My chart should have a
g
element y-axis with a correspondingid="y-axis"
. -
User Story #4: Both axes should contain multiple tick labels, each with a corresponding
class="tick"
. -
User Story #5: My chart should have a
rect
element for each data point with a correspondingclass="bar"
displaying the data. -
User Story #6: Each bar should have the properties
data-date
anddata-gdp
containingdate
andGDP
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 thedata-date
of the active area.