2.3 KiB
2.3 KiB
id | title | required | challengeType | videoUrl | localeTitle | |||
---|---|---|---|---|---|---|---|---|
587d7fab367417b2b2512bd7 | Create a Scatterplot with SVG Circles |
|
6 | Crear un diagrama de dispersión con círculos SVG |
Description
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
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