Bar Chart Project with testable user stories - Guinea Pigs needed 🐹

1

As you may have heard, @no-stack-dub-sack, @paycoguy, and @Christian-Paul have been hard at work building projects with testable user stories. We are looking for a few volunteers to attempt to build these based on their automated tests.

Note that the test suite may not yet work in browsers other than Chrome.

The goal is for campers to be able to build these projects step by step following user stories. This will make the projects less intimidating and more fun. Oh, and don’t worry - we’ll still have plenty of optional projects where we don’t provide you with any tests. And if you’ve previously built these projects, you don’t need to build them again.

If you’re interested in attempting this, please reply to the thread and let us know you’ve started it. The more people who want to build this, the better, as we can start gathering feedback.

Thanks, and happy coding!

Here is the blank pen for campers to fork: http://codepen.io/freeCodeCamp/pen/MJjpwO

Here is the example project with passing tests: http://codepen.io/freeCodeCamp/pen/GrZVaM

Intro

For this project, we will be visualizing the data that is found in this dataset: https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json. We will be visualizing US Gross Domestic Product on the y-axis, and year on the x-axis. Good luck and happy coding!

User Stories:

  1. My chart should have a title with a corresponding id="title".
  2. My Chart should have an x-axis with a corresponding id="x-axis".
  3. My Chart should have a y-axis with a corresponding id="y-axis".
  4. Both axes should contain multiple tick labels.
  5. My Chart should have a bar for each data point with a corresponding class="bar" displaying the data.
  6. Each bar should have the properties data-date and data-gdp containing date and GDP values.
  7. The data-date properties should match the order of the provided data.
  8. The data-gdp properties should match the order of the provided data.
  9. Each bar’s height should accurately represent the data’s corresponding GDP.
  10. I can mouse over a bar and see a tooltip with corresponding id="tooltip" which displays more information about the data.
  11. My tooltip should have a data-date property that corresponds to the given date of the active bar.
2

I have done the bar chart already so I was trying to see if I could make it fit into the testable user stories.

I was able to get 7/11, but I am blocking on all the user stories about data-date and data-GDP properties. It might be because my D3 is a bit rusty, but I don’t understand what is meant by that.

Update:
I cheated a bit and looked at the solution. I was able to get the data-date and data-gdp properties working, except on the tooltip. I am using d3-tip to do the tooltips and I can’t find a way to get the data-date property on it.

3

@Marie000 Hi there, did you build your project on codepen? If so, can you post it so we can take a look? It would be great to get to the bottom of the issue. I’m going to loop in @Christian-Paul and @paycoguy as they developed the tests for these projects. Thanks!

Also, I updated the links in the OP - if you pull in the test suite using the CDN in that codepen (and get rid of all other dependencies besides D3, it should be a much smoother experience)

4

Here is what I have right now:

I don’t have time to work on it today and try with the new link. I will update you when I can. But the problem really seems to be that we cannot use d3-tip and pass the test for the tooltips. So it’s surely still passable, it’s just a shame because I like d3-tip

1 Like
5

@Marie000 so all of the new D3 projects use the same exact test for testing the presence of the tooltip, and this one: http://codepen.io/freeCodeCamp/pen/JEXgeY, the heat map, actually uses d3-tip, not sure if its used in the same exact way, but maybe worth checking out?

1 Like
6

Thanks for your feedback so far, everyone!

I’m thrilled to announce that our testable challenges now feature a link you can click to report a bug or submit feedback.

I’m closing this topic. We can continue discussing specific issues as they come up over on the testable-projects-fcc repo. Happy coding and QA’ing! :slight_smile: