Scatter2_D3_Complete

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Second Scatter using D3!</title>
<style>
    /* Set `circle` elements to have a "fill" of "purple" or whatever color you choose */

circle {
    fill: purple;
}
svg {
  border: 1px solid #f0f;
}
</style>

<script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
</body>
<script type="text/javascript">
// 1) Select your `body` and append a `div` element in which you'll render your content. To do this, you'll use the `d3.select()` method, and then the `.append()` method to append your element to your selection.

const div = d3.select('body').append('div')

// 2)  Append a new `p` element to the `div` you just created, and use the `.text()` method to set the text to "My First D3 Scatter"

// How this would look if you defined each separately:
// p_tag = div.append('p')
// text = p_tag.text('My First D3 Scatter')

// Saming thing using chaining: 
div.append('p').text('My First D3 Scatter')

// 3)  Append a container `svg` to your `div` element in which you'll place your circles     
// - Set your svg's `width` to 300, and `height` to `400`

const svg = div.append('svg')
    .attr('width', 300)
    .attr('height', 400)

// 4) Append 3 `circle` elements inside of your `<svg>` (one at a time), setting the properties for each one. We'll improve on this process later: 
// - `cx`: How far to move the circle in the `x` direction (right). Should be 100, 150, and 200. 
// - `y`: How for to move the circle in the `y` direction (down from the top). Should be 100, 150, and 200. 
// - 'r': circle's radius. Should be 10, 15, and 20.

const circle1 = svg.append('circle')
    .attr('cx', 100)
    .attr('cy', 100)
    .attr('r', 10)

const circle2 = svg.append('circle')
    .attr('cx', 150)
    .attr('cy', 150)
    .attr('r', 15)

const circle3 = svg.append('circle')
    .attr('cx', 200)
    .attr('cy', 200)
    .attr('r', 20)

</script>

</html>

https://d3js.org/d3.v4.min.js