Files
freeCodeCamp/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md
Nicholas Carrigan (he/him) 16e420021c chore: audit data visualisation challenges (#41336)
* chore(learn): audit d3 projects

* chore: audit data vis

* chore: audit json apis

* Update curriculum/challenges/english/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>

* fix: apply suggestions

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>

* fix: no colour backticks

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>
Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

* Update curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.md

Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>
Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
2021-03-05 12:25:29 -07:00

104 lines
2.3 KiB
Markdown

---
id: 587d7fab367417b2b2512bd7
title: Create a Scatterplot with SVG Circles
challengeType: 6
forumTopicId: 301484
dashedName: create-a-scatterplot-with-svg-circles
---
# --description--
A scatter plot is another type of visualization. It usually uses circles to map data points, which have two values each. These values tie to the `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--
Use the `data()`, `enter()`, and `append()` methods to bind `dataset` to new `circle` elements that are appended to the SVG canvas.
**Note:** The circles won't be visible because we haven't set their attributes yet. We'll do that in the next challenge.
# --hints--
Your code should have 10 `circle` elements.
```js
assert($('circle').length == 10);
```
# --seed--
## --seed-contents--
```html
<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--
```html
<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>
```