Files
freeCodeCamp/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.md
Nicholas Carrigan (he/him) 16e420021c chore: audit data visualisation challenges (#41336)
* chore(learn): audit d3 projects

* chore: audit data vis

* chore: audit json apis

* Update curriculum/challenges/english/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>

* fix: apply suggestions

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>

* fix: no colour backticks

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>
Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

* Update curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.md

Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>
Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
2021-03-05 12:25:29 -07:00

2.8 KiB

id, title, challengeType, forumTopicId, dashedName
id title challengeType forumTopicId dashedName
587d7fa8367417b2b2512bcc Display Shapes with SVG 6 301485 display-shapes-with-svg

--description--

The last challenge created an svg element with a given width and height, which was visible because it had a background-color applied to it in the style tag. The code made space for the given width and height.

The next step is to create a shape to put in the svg area. There are a number of supported shapes in SVG, such as rectangles and circles. They are used to display data. For example, a rectangle (<rect>) SVG shape could create a bar in a bar chart.

When you place a shape into the svg area, you can specify where it goes with x and y coordinates. The origin point of (0, 0) is in the upper-left corner. Positive values for x push the shape to the right, and positive values for y push the shape down from the origin point.

To place a shape in the middle of the 500 (width) x 100 (height) svg from last challenge, the x coordinate would be 250 and the y coordinate would be 50.

An SVG rect has four attributes. There are the x and y coordinates for where it is placed in the svg area. It also has a height and width to specify the size.

--instructions--

Add a rect shape to the svg using append(), and give it a width attribute of 25 and height attribute of 100. Also, give the rect x and y attributes each set to 0.

--hints--

Your document should have 1 rect element.

assert($('rect').length == 1);

The rect element should have a width attribute set to 25.

assert($('rect').attr('width') == '25');

The rect element should have a height attribute set to 100.

assert($('rect').attr('height') == '100');

The rect element should have an x attribute set to 0.

assert($('rect').attr('x') == '0');

The rect element should have a y attribute set to 0.

assert($('rect').attr('y') == '0');

--seed--

--seed-contents--

<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    const w = 500;
    const h = 100;

    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h)
                  // Add your code below this line



                  // Add your code above this line
  </script>
</body>

--solutions--

<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    const w = 500;
    const h = 100;

    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h)
                  .append("rect")
                  .attr("width", 25)
                  .attr("height", 100)
                  .attr("x", 0)
                  .attr("y", 0);
  </script>
</body>