freeCodeCamp

2.2 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7fab367417b2b2512bd7	Create a Scatterplot with SVG Circles	6		Crear un diagrama de dispersión con círculos SVG

Description

Un diagrama de dispersión es otro tipo de visualización. Por lo general, utiliza círculos para asignar puntos de datos, que tienen dos valores cada uno. Estos valores se vinculan con los ejes x e y , y se utilizan para colocar el círculo en la visualización. SVG tiene una etiqueta circle para crear la forma del círculo. Funciona mucho como los elementos rect que rect para el gráfico de barras.

Instructions

Use los métodos data() , enter() y append() para vincular el dataset de dataset a los nuevos elementos del circle que se agregan al lienzo de SVG. Nota
Los círculos no serán visibles porque todavía no hemos establecido sus atributos. Lo haremos en el próximo reto.

Tests

tests:
  - text: Tu código debe tener 10 elementos <code>circle</code> .
    testString: 'assert($("circle").length == 10, "Your code should have 10 <code>circle</code> elements.");'

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

// solution required

2.2 KiB Raw Blame History