Minimalist example projects with tests: Treemap Diagram in D3

[QuincyLarson]

Note: We may want to replace this graph with a more practical advanced visualization that involves less boilerplate code. Any thoughts on this, and what a suitable replacement might be?

Soon, campers will be able to build all front end projects right on FreeCodeCamp.com (no need for CodePen). We will also use automated tests to check whether campers have completed all of the agile user stories (and code review will become optional).

This means we need to redesign these projects to have user stories that can be tested. And we should err on the side of having lots of tests (I'm thinking ~10 tests per project).

At the same time, we've heard feedback that campers are intimidated by the highly polished example projects we use. Instead of having fancy example projects, we should have minimalistic project examples that focus on functionality rather than appearance, animations, etc.

So we need:

• [ ] New agile user stories with one automated test each (reply to this issue with the user stories and their tests)
• [ ] Minimal example project that fulfills all of these user stories (reply with a link to CodePen)

The current project: https://www.freecodecamp.com/challenges/show-national-contiguity-with-a-force-directed-graph

[andrealonzo]

@QuincyLarson @no-stack-dub-sack

@Christian_Paul and I were thinking of replacing the Force Directed graph with a Treemap diagram.

The Treemap seems advanced enough, looks practical, and doesn't look too intimidating for campers.

Here are some examples of treemaps:

Benin's exports by product category in 2009

Billionaires by Country in 2010

Let us know what you think about this.

[QuincyLarson]

@paycoguy I agree - this is a cool visualization and I see it used a lot in The Economist and other periodicals. Do you have an idea of what dataset you'd use for this?

[andrealonzo]

@QuincyLarson I was looking on kaggle, and here are some datasets that might work

https://www.kaggle.com/deepmatrix/imdb-5000-movie-dataset IMDB movie dataset List of movies grouped by director, or actor, or country, size of rectangle is gross sales

https://www.kaggle.com/socathie/kickstarter-project-statistics Kickstarter project stats List of titles grouped by category. Size of rectangle is the amount pledged

https://www.kaggle.com/rio2016/olympic-games Rio Olympic medals List of athletes grouped by country. Size of rectangle is the amount of medals

https://www.kaggle.com/rush4ratio/video-game-sales-with-ratings List of games grouped by Platform. Size of rectangle is global sales.

For a test run, I chose the video game data, and here is what the treemap of the top 100 games looks like:

What do you think of this data set?

After playing around with the data, I think it would be useful to filter by years, and maybe an ability "to only show x number of video games"

[QuincyLarson]

@paycoguy awesome - looks great. All 4 of these datasets are interesting. We could give them a choice of datasets, if you're confident all 4 are good ones. Would the tests be dataset agnostic?

[no-stack-dub-sack]

@paycoguy @Christian-Paul @QuincyLarson - could we give them a choice of data sets and still have the tests work for all of them? I know with some of the earlier projects the tests are highly data set dependent... I like the idea of this project as well though, I think it's a solid replacement

[QuincyLarson]

@no-stack-dub-sack that's fine with me. Ideally, I'd like for campers to be able to choose from a variety of data sets on all of these. We can worry about adding those later if it will take a substantial amount of time or require modifying the test suite.

@paycoguy @Christian-Paul if you email me the datasets, I can upload them to s3.

[andrealonzo]

@QuincyLarson @no-stack-dub-sack

It's possible for this project to be data agnostic, but since we can't validate the project against a specific dataset, the tests won't be as rigorous. In general, we would only be testing if their D3 project "looks" like a treemap, and we wouldn't be able to test if their treemap is actually correct.

I think this project is the best choice for being data agnostic because we don't have to worry about the possible of multiple data types that can determine the size of each tile. We'll code up the tests to be agnostic and you all can decide if the tests are good enough.

[QuincyLarson]

@paycoguy Awesome! There's going to be some trade-off between freedom and testability, so just use your best judgement. I'm excited to see the data-agnostic tests :)

[no-stack-dub-sack]

@paycoguy Sounds good, I 100% defer to your judgement on this - and I think it's def good to have at least one data agnostic project, so I'm on board. Last one! Very exciting. Everything is looking great with these D3 projects and the new test suite UI makes for an infinitely better user experience. I think we're well on our way!

[no-stack-dub-sack]

@QuincyLarson So I forked all the example projects over to FCC's official CodePen and updated them all with the new CDNs I created off the new repo under FCC ownership (I knew we were forgetting something when we did that yesterday). So good to go! They have all been added to this collection: http://codepen.io/collection/npZPmR/. I also ran every test suite after updating the CDNs to make sure they all worked still and that there were no issues.

@paycoguy @Christian-Paul So when you guys finish this one, you will no longer be making a PR against my repo - while the same repo still exists on my account, it is now just a fork of the master which lives on FCC as of yesterday. That repo is here: https://github.com/freeCodeCamp/testable-projects-fcc

[QuincyLarson]

@paycoguy @Christian-Paul any updates on this? Everything else is ready to roll and I'm importing it into our seed files. Hoping to have a PR into staging ready by tomorrow with the full curriculum expansion. We can add this last project in later once it's ready 😄

[Christian-Paul]

@QuincyLarson We're working on some final finishing touches, but it's 99% done. We're hoping to make a pull request tonight or tomorrow. Here's what we have so far: http://codepen.io/paycoguy/pen/JERVGa

The tests are data agnostic and we've included three sample datasets

[andrealonzo]

@QuincyLarson @no-stack-dub-sack

We just did PR and updated the Codepen with the latest example Treemap project code.

EDIT by @no-stack-dub-sack:

@QuincyLarson This is ready for QA, and integrated into our main project - I've updated @paycoguy's comment to include our FCC links where we are now hosting the data and the projects, feel free to copy from here on for QA on the forum (although it seems like the D3 projects have not gotten much love so far - fewer people have the capability to QA these since fewer people are this far along in the curriculum, and people don't seem to relish the idea of re-building them if they already have):

---

Tree Map D3 Project

Example Project:

http://codepen.io/freeCodeCamp/pen/KaNGNR

User Stories:

1. My tree map should have a title with a corresponding id="title"
2. My tree map should have a description with a corresponding id="description"
3. My tree map should have <rect> elements with a corresponding class="tile" that represent the data
4. There should be at least 2 different fill colors used for the tiles
5. Each tile should have the properties "data-name", "data-category", and "data-value" containing their corresponding name, category, and value
6. The area of each tile should correspond to the data-value amount
7. My tree map should have a legend with corresponding id="legend"
8. My legend should have legend items with corresponding class="legend-item"
9. The legend items should use at least 2 different fill colors
10. I can mouse over an area and see a tooltip with a corresponding id="tooltip" which displays more information about the area
11. My tooltip should have a "data-value" property that corresponds to the given value of the active tile.

Datasets (can use any of the three):

Video Game Sales https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/video-game-sales-data.json Movie Sales https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/movie-data.json Kickstarter Pledges https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/kickstarter-funding-data.json

[QuincyLarson]

@paycoguy awesome! I've created a forum post here: https://forum.freecodecamp.com/t/tree-map-d3-project-with-testable-user-stories-guinea-pigs-needed/78623

Even though we haven't seen much activity on these threads, we will. I'm going to an announcement to steer traffic toward them and get people QA'ing these.

And I will create a pull request to get this challenge up onto beta tomorrow. Thanks!