From 17be165d6648a5f069b0c5b2e7b9b63c7ebb06da Mon Sep 17 00:00:00 2001 From: Prayag <52105313+prayagd@users.noreply.github.com> Date: Fri, 24 Apr 2020 17:04:53 +0530 Subject: [PATCH] Add solution d3challenges (#38222) * added solutions to data visualization with D3 * Update add-a-tooltip-to-a-d3-element.english.md * Update add-attributes-to-the-circle-elements.english.md * Update add-axes-to-a-visualization.english.md * Update add-document-elements-with-d3.english.md * Update add-inline-styling-to-elements.english.md * Update add-labels-to-scatter-plot-circles.english.md * Update change-styles-based-on-data.english.md * Update change-the-color-of-an-svg-element.english.md * Update change-the-presentation-of-a-bar-chart.english.md * Update create-a-bar-for-each-data-point-in-the-set.english.md * Update create-a-linear-scale-with-d3.english.md * Update create-a-scatterplot-with-svg-circles.english.md * Update display-shapes-with-svg.english.md * Update dynamically-change-the-height-of-each-bar.english.md * Update dynamically-set-the-coordinates-for-each-bar.english.md * Update invert-svg-elements.english.md * Update learn-about-svg-in-d3.english.md * Update select-a-group-of-elements-with-d3.english.md * Update set-a-domain-and-a-range-on-a-scale.english.md * Update style-d3-labels.english.md * Update work-with-dynamic-data-in-d3.english.md * Update use-a-pre-defined-scale-to-place-elements.english.md * Update use-dynamic-scales.english.md * Update use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.english.md * Update work-with-data-in-d3.english.md --- .../add-a-tooltip-to-a-d3-element.english.md | 45 ++++++++++++- ...tributes-to-the-circle-elements.english.md | 38 ++++++++++- .../add-axes-to-a-visualization.english.md | 67 ++++++++++++++++++- .../add-document-elements-with-d3.english.md | 10 ++- .../add-inline-styling-to-elements.english.md | 17 ++++- ...-labels-to-scatter-plot-circles.english.md | 46 ++++++++++++- .../change-styles-based-on-data.english.md | 16 ++++- ...nge-the-color-of-an-svg-element.english.md | 28 +++++++- ...the-presentation-of-a-bar-chart.english.md | 7 +- ...-for-each-data-point-in-the-set.english.md | 26 ++++++- .../create-a-linear-scale-with-d3.english.md | 16 ++++- ...-a-scatterplot-with-svg-circles.english.md | 35 +++++++++- .../display-shapes-with-svg.english.md | 22 +++++- ...y-change-the-height-of-each-bar.english.md | 28 +++++++- ...et-the-coordinates-for-each-bar.english.md | 28 +++++++- .../invert-svg-elements.english.md | 26 ++++++- .../learn-about-svg-in-d3.english.md | 22 +++++- ...ect-a-group-of-elements-with-d3.english.md | 15 ++++- ...a-domain-and-a-range-on-a-scale.english.md | 15 ++++- .../style-d3-labels.english.md | 37 +++++++++- ...defined-scale-to-place-elements.english.md | 54 ++++++++++++++- .../use-dynamic-scales.english.md | 41 +++++++++++- ...and-maximum-values-in-a-dataset.english.md | 15 ++++- .../work-with-data-in-d3.english.md | 17 ++++- .../work-with-dynamic-data-in-d3.english.md | 16 ++++- 25 files changed, 634 insertions(+), 53 deletions(-) diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.english.md index bb42ec996d..efb0058b07 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.english.md @@ -106,8 +106,49 @@ tests: ## Solution
-```js -// solution required +```html + + + + + ```
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.english.md index 1b2382f65c..71d3fc8dc2 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.english.md @@ -103,8 +103,42 @@ tests: ## Solution
-```js -// solution required +```html + + + + ```
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.english.md index fa0dbf93b1..9518ead02c 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.english.md @@ -130,8 +130,71 @@ tests: ## Solution
-```js -// solution required +```html + + + + ```
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.english.md index 6fcc08e8b3..105dac465d 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.english.md @@ -78,8 +78,14 @@ tests: ## Solution
-```js -// solution required +```html + + + ```
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.english.md index cdb93dc2c6..f6a765501b 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.english.md @@ -64,8 +64,21 @@ tests: ## Solution
-```js -// solution required +```html + + + + ```
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.english.md index 4ad5fa8039..23c46728ad 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.english.md @@ -109,8 +109,50 @@ tests: ## Solution
-```js -// solution required +```html + + + + ```
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.english.md index b38b362377..f7e13ef2e0 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.english.md @@ -86,8 +86,20 @@ tests: ## Solution
-```js -// solution required +```html + + + + ```
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.english.md index fd62ef5a8e..3fb3faee79 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.english.md @@ -72,8 +72,32 @@ tests: ## Solution
-```js -// solution required +```html + + + + ```
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.english.md index e773411c16..5ac09a4132 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.english.md @@ -106,13 +106,10 @@ tests: .enter() .append("div") .attr("class", "bar") - // Add your code below this line - .style("height", (d) => (d*10 + "px")) - - - // Add your code above this line + .style("height", (d) => (d * 10 + "px")) + ``` diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.english.md index 1b3a849207..4a635c54d7 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.english.md @@ -84,8 +84,30 @@ tests: ## Solution
-```js -// solution required +```html + + + + ```
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.english.md index 9261242849..e4129faa91 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.english.md @@ -69,8 +69,20 @@ tests: ## Solution
-```js -// solution required +```html + + + + ```
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.english.md index b21ecfca86..ea5b1d18e6 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.english.md @@ -79,8 +79,39 @@ tests: ## Solution
-```js -// solution required +```html + + + + ```
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.english.md index 4703aa2484..5023052756 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.english.md @@ -74,8 +74,26 @@ tests: ## Solution
-```js -// solution required +```html + + + + ```
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.english.md index 93c115dfbd..ab23ba02cb 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.english.md @@ -99,8 +99,32 @@ tests: ## Solution
-```js -// solution required +```html + + + + ```
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.english.md index 164582f488..cd11194bae 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.english.md @@ -103,8 +103,32 @@ tests: ## Solution
-```js -// solution required +```html + + + + ```
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/invert-svg-elements.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/invert-svg-elements.english.md index 337f6649dc..0ac2792be0 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/invert-svg-elements.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/invert-svg-elements.english.md @@ -93,8 +93,30 @@ tests: ## Solution
-```js -// solution required +```html + + + + ```
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.english.md index 04e0d7a059..914c03aa92 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.english.md @@ -72,8 +72,26 @@ tests: ## Solution
-```js -// solution required +```html + + + + + ```
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.english.md index 2d0b781078..7387ae743f 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.english.md @@ -64,8 +64,19 @@ tests: ## Solution
-```js -// solution required +```html + + + + + ```
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.english.md index ba3b039db6..c86a2123c3 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.english.md @@ -86,8 +86,19 @@ tests: ## Solution
-```js -// solution required +```html + + + + ```
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/style-d3-labels.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/style-d3-labels.english.md index 949e17127a..42257895f5 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/style-d3-labels.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/style-d3-labels.english.md @@ -82,8 +82,41 @@ tests: ## Solution
-```js -// solution required +```html + + + + ```
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.english.md index 5c1a2deb2d..3b451ab4a3 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.english.md @@ -150,8 +150,58 @@ tests: ## Solution
-```js -// solution required +```html + + + + ```
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.english.md index 909b0a43d9..26963b5039 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.english.md @@ -117,8 +117,45 @@ tests: ## Solution
-```js -// solution required +```html + + + + ```
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.english.md index 57b0c504b5..ee2d62c6b1 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.english.md @@ -80,8 +80,19 @@ tests: ## Solution
-```js -// solution required +```html + + + + ```
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/work-with-data-in-d3.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/work-with-data-in-d3.english.md index fcd85bdc20..e2e4cd0193 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/work-with-data-in-d3.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/work-with-data-in-d3.english.md @@ -81,8 +81,21 @@ tests: ## Solution
-```js -// solution required +```html + + + + ```
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.english.md index 7ffdea2605..85b8cc4d17 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.english.md @@ -80,8 +80,20 @@ tests: ## Solution
-```js -// solution required +```html + + + + ```