2.4 KiB

Raw Blame History

id	title	challengeType	forumTopicId	dashedName
587d7fab367417b2b2512bd7	Creare un diagramma a dispersione con cerchi SVG	6	301484	create-a-scatterplot-with-svg-circles

--description--

Un grafico a dispersione è un altro tipo di visualizzazione. Di solito usa i cerchi per mappare i punti dati, e ogni cerchio ha bisogno di due valori. Questi valori si legano agli assi x e y, e vengono utilizzati per posizionare il cerchio nella visualizzazione.

SVG ha un tag circle per creare la forma del cerchio. Funziona in modo simile agli elementi rect che hai usato per il grafico a barre.

--instructions--

Usa i metodi data(), enter(), e append() per associare il dataset ai nuovi elementi circle che sono aggiunti alla tela SVG.

Nota: I cerchi non saranno visibili perché non abbiamo ancora impostato i loro attributi. Lo faremo nella prossima sfida.

--hints--

Il tuo codice dovrebbe avere 10 elementi 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.4 KiB Raw Blame History