Scatterplot Project with testable user stories - Guinea Pigs needed šŸ¹

General
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.

This is a brand-new project that should be a ton of fun to build: a drum kit! 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/bgpXyK

Intro

For this project, we will be visualizing the data that is found in this dataset: https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json. Good luck and happy coding!

User Stories

  1. I can see a title element that has a corresponding id="title".
  2. I can see an x-axis that has a corresponding id="x-axis".
  3. I can see a y-axis that has a corresponding id="y-axis".
  4. I can see dots, that each have a class of "dot", which represent the data being plotted.
  5. Each dot should have the properties data-xvalue and data-yvalue containing their corresponding x and y values.
  6. The data-xvalue and data-yvalue of each dot should be within the range of the actual data.
  7. The data-xvalue and its corresponding dot should align with the corresponding point/value on the x-axis.
  8. The data-yvalue and its corresponding dot should align with the corresponding point/value on the y-axis.
  9. I can see multiple tick labels on the y-axis with ā€œ%M:%Sā€ time format.
  10. I can see multiple tick labels on the x-axis that show the year.
  11. I can see that the range of the x-axis labels are within the range of the actual x-axis data.
  12. I can see that the range of the y-axis labels are within the range of the actual y-axis data.
  13. I can see a legend that has a corresponding id="legend".
  14. I can mouse over any dot and see a tooltip with corresponding id="tooltip" which displays more information about the data.
  15. My tooltip should have a data-year property that corresponds to the given year of the active dot.
1 Like
4

Built this graph today but itā€™s failing one test when it shouldnā€™t be.

Hereā€™s the Codepen link: http://codepen.io/tom-p-uk/pen/jBbMqq.

Itā€™s failing test number 8 of 15. I checked out the criteria for the test by visiting the test JS file here and then did a little bit of debugging. The appropriate code is as follows:

it('8. The data-yvalue and its corresponding dot should align with the corresponding point/value on the y-axis.', function () {
	                var dotsCollection = document.getElementsByClassName('dot');
	                //convert to array
	                var dots = [].slice.call(dotsCollection);
	                FCC_Global.assert.isAbove(dots.length, 0, 'there are no elements with the class of "dot" ');
	                //sort the dots based on yvalue in ascending order
	                var sortedDots = dots.sort(function (a, b) {
	                    return new Date(a.getAttribute("data-yvalue")) - new Date(b.getAttribute("data-yvalue"));
	                });

	                //check to see if the y locations of the new sorted array are in ascending order
	                for (var i = 0; i < sortedDots.length - 1; ++i) {
	                    FCC_Global.assert.isAtMost(+sortedDots[i].cy.baseVal.value, +sortedDots[i + 1].cy.baseVal.value, "y values don't line up with y locations ");
	                }
	            });

After a little bit of debugging it turns out that my scatter plot fails the test because the sort function in the test page sorts my array of dots in descending order rather than ascending, which means it fails at the very first assertion. Might be a good idea to have a look at that test while itā€™s still in beta phase!

5

Just raised an issue on Github, so ignore this.