From dda47971188d6190278f8c95bd24db313b806277 Mon Sep 17 00:00:00 2001 From: James Hogan Date: Tue, 11 Jun 2019 17:48:33 +0100 Subject: [PATCH] Hints+Solution for D3 Display Shapes Challenge (#29513) * Hints+Solution for D3 Display Shapes Challenge * fix: removed stub info --- .../display-shapes-with-svg/index.md | 36 +++++++++++++++++-- 1 file changed, 33 insertions(+), 3 deletions(-) diff --git a/guide/english/certifications/data-visualization/data-visualization-with-d3/display-shapes-with-svg/index.md b/guide/english/certifications/data-visualization/data-visualization-with-d3/display-shapes-with-svg/index.md index fbb9e2aaf7..96b373b8ea 100644 --- a/guide/english/certifications/data-visualization/data-visualization-with-d3/display-shapes-with-svg/index.md +++ b/guide/english/certifications/data-visualization/data-visualization-with-d3/display-shapes-with-svg/index.md @@ -3,8 +3,38 @@ title: Display Shapes with SVG --- ## Display Shapes with SVG -This is a stub. Help our community expand it. +This challenge can be approached in a similar fashion to the previous one; with the difference being that, this time, you must add a specified shape **within** the appended SVG node. SVG supports several shape definitions, but in this instance, we will use **rect**. -This quick style guide will help ensure your pull request gets accepted. +## Hint 1 - +Check that you have appended the **rect** using D3's 'append()' method. (Be sure to enclose **rect** in quotation marks). + +## Hint 2 + +Now assign attributes to the shape using D3's '.attr()' method. You can chain multiple uses of this method. Remember when assigning x and y co-ordinates that within the SVG area, point (0,0) occurs on the top-**left**. As such, while x values dictate how far right an element moves, y values will dictate how far **downward** it moves from the origin point. + +## Solution (!!Spoiler Alert!!) + ``` + + + +```