Bar Chart Visualization
A visualization of the United State’s GDP since 1947.
I built this visualization for freeCodeCamp’s first Data Visualization Projects.
This is my first ever interactive bar chart built with D3.js. I found the documentation for the library difficult to use, and judging from the questions, comments, and answers I saw elsewhere on the internet while researching for my project, it seems that many other users have struggled with the same issues.
My biggest technical hurdles on this project were:
- struggling to get the xScale to work nicely (switching from scaleLinear to scaleBand() worked in the end)
- getting the tick marks on the x-axis to display as I wanted them to
- getting tooltips to render at the cursor’s location
The brief for the Visualize Data with a Bar Chart project was as follows:
- My chart should have a title with a corresponding id=“title”.
- My chart should have a g element x-axis with a corresponding id=“x-axis”.
- My chart should have a g element y-axis with a corresponding id=“y-axis”.
- Both axes should contain multiple tick labels, each with the corresponding class=“tick”.
- My chart should have a rect element for each data point with a corresponding class=“bar” displaying the data.
- Each bar should have the properties data-date and data-gdp containing date and GDP values.
- The bar elements’ data-date properties should match the order of the provided data.
- The bar elements’ data-gdp properties should match the order of the provided data.
- Each bar element’s height should accurately represent the data’s corresponding GDP.
- The data-date attribute and its corresponding bar element should align with the corresponding value on the x-axis.
- The data-gdp attribute and its corresponding bar element should align with the corresponding value on the y-axis.
- I can mouse over an area and see a tooltip with a corresponding id=“tooltip” which displays more information about the area.
- My tooltip should have a data-date property that corresponds to the data-date of the active area.