freeCodeCamp/create-a-scatterplot-with-svg-circles.english.md at 1f1c58ae182db96d591844b7c3ef864bdddff54d

Files

Oliver Eyton-Williams f1c9b08cf3 fix(curriculum): add isHidden: false to challenges

This includes certificates (where it does nothing), but does not
include any translations.

2020-05-25 16:25:19 +05:30

2.6 KiB

Raw Blame History

id, title, challengeType, isHidden, forumTopicId

id	title	challengeType	isHidden	forumTopicId
587d7fab367417b2b2512bd7	Create a Scatterplot with SVG Circles	6	false	301484

Description

A scatter plot is another type of visualization. It usually uses circles to map data points, which have two values each. These values tie to the x and y axes, and are used to position the circle in the visualization. SVG has a circle tag to create the circle shape. It works a lot like the rect elements you used for the bar chart.

Instructions

Use the data(), enter(), and append() methods to bind dataset to new circle elements that are appended to the SVG canvas. Note
The circles won't be visible because we haven't set their attributes yet. We'll do that in the next challenge.

Tests

tests:
  - text: Your code should have 10 <code>circle</code> elements.
    testString: assert($('circle').length == 10);

Challenge Seed

<body>
  <script>
    const dataset = [
                  [ 34,    78 ],
                  [ 109,   280 ],
                  [ 310,   120 ],
                  [ 79,    411 ],
                  [ 420,   220 ],
                  [ 233,   145 ],
                  [ 333,   96 ],
                  [ 222,   333 ],
                  [ 78,    320 ],
                  [ 21,    123 ]
                ];


    const w = 500;
    const h = 500;

    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);

    svg.selectAll("circle")
       // Add your code below this line



       // Add your code above this line

  </script>
</body>

Solution

<body>
  <script>
    const dataset = [
                  [ 34,    78 ],
                  [ 109,   280 ],
                  [ 310,   120 ],
                  [ 79,    411 ],
                  [ 420,   220 ],
                  [ 233,   145 ],
                  [ 333,   96 ],
                  [ 222,   333 ],
                  [ 78,    320 ],
                  [ 21,    123 ]
                ];


    const w = 500;
    const h = 500;

    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);

    svg.selectAll("circle")
       .data(dataset)
       .enter()
       .append("circle")

  </script>
</body>

2.6 KiB Raw Blame History