D3 Challenges

[QuincyLarson]

For each challenge, please reply to this GitHub issue with:

1. Challenge description text
2. Test suite (using the assert method)
3. The seed code, which is pre-populated in the editor at the beginning of the challenge
4. A working solution that makes all tests pass

We still need to come up with a list of concepts to cover, where each topic can be taught interactively, then translate these concept into the names of the challenges.

---

Edit:

With inputs from @elibei, these are the topics we would like to cover under D3 [WIP]

• [ ] Chart Geometry
  • [x] Understand how to Plot Data
  • [ ] Understand the X, Y and Z Axes
  • [ ] Understand the Process of Translation
  • [ ] Understand how to use Coordinates
• [X] D3 Basics
  • [X] Appending elements using D3
  • [X] Working with Data
  • [X] Dynamic Data
  • [X] Styling your elements
  • [X] Logic in your style
  • [X] Adding classes using D3
  • [X] Dynamically updating height
  • [X] Clean up the bars
  • [X] Increase bar size
  • [X] Add margins
• [X] SVG
  • [X] Using SVG
  • [X] Displaying a bar using SVG
  • [X] Add spacing between the bars
  • [X] Changing heights of the bars
  • [X] Flipping the bar chart
  • [X] Changing color of the bars
  • [X] Adding labels
  • [X] Styling your labels
  • [X] Adding hover effects
  • [X] Adding tooltips
• [X] Scatter Plots
  • [X] Creating circles
  • [X] Labeling Circles
• [X] Scales
  • [X] Creating a Scale
  • [X] Setting domain and range
  • [X] d3.min() and d3.max()
  • [X] Dynamic Scales (Setting x and y scales)
  • [X] Using pre-defined scales
• [X] Axis
  • [X] Adding Axis
• [ ] Loading CSV Data
• [ ] Loading JSON Data

[alayek]

@QuincyLarson I will try to finish this off tomorrow.

[QuincyLarson]

@alayek awesome!

[QuincyLarson]

@alayek these are coming along great. Have you had a chance to finish these? Also, could you go through and add tests to these? We are ready to import these and start QA'ing them.

[HKuz]

Here's a first draft of the D3 section Introduction. I'm not sure all the language is ESL friendly, so feedback there is appreciated. I figured since this section falls in the 4th overall segment of the curriculum, campers should be familiar with most of the concepts/vocab. Any thoughts or comments are welcome.

Introduction for the D3 Challenges

D3.js, or D3, stands for Data Driven Documents. D3 is a JavaScript library to create dynamic and interactive data visualizations in the browser. It's built to work with common web standards, namely HTML, CSS, and Scalable Vector Graphics (SVG).

D3 takes input data and maps it into a visual representation of that data. It supports many different data formats. D3 lets you bind (or attach) the data to the Document Object Model (DOM). You can use HTML or SVG elements with D3's built-in methods to transform the data into a visualization.

D3 gives you a lot of control over the presentation of data. This section covers the basic functionality and how to create visualizations with the D3 library.

[HKuz]

And I couldn't find an XKCD comic specifically addressing data visualization, but this one was a great example of it in practice 😄

[QuincyLarson]

Wow - that is an excellent description! I think it's pretty lay-person and non-native English speaker accessible, as well. Great job! Also, I hadn't seen that XKCD comic before. Yes - I agree that it's a good one to use 👏

[HKuz]

Cool, thanks @QuincyLarson - I'll drop it in the seed file in the next iteration 👍

[QuincyLarson]

Thanks for your help everyone! We've loaded these challenges into the seed files and plan to deploy them to beta as soon as possible.

I'm closing this issue. If anyone wants to discuss these further, please reopen it.

[manoj10101996]