mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-04-06 10:00:53 -04:00

Files

camperbot 01a2e6c031 chore(i18n,learn): processed translations (#51414 )

2023-08-28 21:25:41 +05:30

2.8 KiB

Raw Blame History

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
587d7fab367417b2b2512bd7	Створіть точкову діаграму за допомогою кругів SVG	6	301484	create-a-scatterplot-with-svg-circles

--description--

Точкова діаграма — ще один вид візуалізації. Вона зазвичай використовує круги, щоб позначити точки даних, які мають по два значення. Ці значення прив’язують до осей x та y; їх використовують, щоб розмістити круг у візуалізації.

SVG має тег circle для створення круга. Він працює схоже до елементів rect, які ви використовували для стовпчикової діаграми.

--instructions--

Використайте методи data(), enter() та append(), щоб прив’язати dataset до нових елементів circle, які додані до SVG.

Примітка: круги будуть невидимими, оскільки ми не встановили їхні атрибути. Ми зробимо це у наступному завданні.

--hints--

Код має містити 10 елементів circle.

assert($('circle').length == 10);

--seed--

--seed-contents--

<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>

--solutions--

<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.8 KiB Raw Blame History Unescape Escape