2.1 KiB
2.1 KiB
id | title | required | challengeType | |||
---|---|---|---|---|---|---|
587d7fab367417b2b2512bd7 | Create a Scatterplot with SVG Circles |
|
6 |
Description
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
data()
, enter()
, and append()
methods to bind dataset
to new circle
elements that are appended to the SVG canvas.
NoteThe 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, '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