D3 Choropleth 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.

This is a brand-new project that should be a ton of fun to build: a Choropleth Map! 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 sample project http://codepen.io/freeCodeCamp/pen/EZKqza

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

Here are the data sets you need for this project:

For this project, we will be utilizing D3 to make a Choropleth Map:

A choropleth map (from Greek Ļ‡įæ¶ĻĪæĻ‚ (ā€œarea/regionā€) + Ļ€Ī»įæ†ĪøĪæĻ‚ (ā€œmultitudeā€)) is a thematic map in which areas are shaded or patterned in proportion to the measurement of the statistical variable being displayed on the map, such as population density or per-capita income.

User Stories

  1. My Choropleth should have a title with a corresponding id="title".
  2. My Choropleth should have a description with a corresponding id="description".
  3. My Choropleth should have counties with a corresponding class="county" that represent the data.
  4. There should be at least 4 different fill colors used for the counties.
  5. My counties should each have "data-fips" and "data-education" properties containing their corresponding fips and education values.
  6. My Choropleth should have a county for each provided data point.
  7. The counties should have data-fips and data-education values that match the sample data.
  8. My Choropleth should have a legend with a corresponding id="legend".
  9. There should be at least 4 different fill colors used for the legend.
  10. When I mouse over a county, a <div> element with corresponding id="tooltip" should become visible.
  11. My tooltip should have a "data-education" property that corresponds to the given education of the active county.
4

I have completed the (old) data viz cert and would like to contribute to this. Could you provide some step-by-step instructions? I understand that we are to build a chart in codepen using the resources provided, but where are the test cases? How do we run them? What is the first step?

5

@olddognewtrix123 Hereā€™s an overview of the new challenges and our plans to transition these: https://forum.freecodecamp.com/t/our-expanded-curriculum-is-now-live-on-beta-freecodecamp-com-and-we-need-your-help-qaing-it/78844

The test cases are built into the CodePen boilerplate (open it up and youā€™ll what I mean - you just have to select the project youā€™re building. The tests include descriptions of the user stories.)

6

@olddognewtrix123 yes, it would be great to get someone to build this as it hasnā€™t been officially QAd at all yet, if you do, let us know how you make out! Thanks!

7

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: