Built with blockbuilder.org
Created
January 19, 2020 01:57
-
-
Save molliemarie/3a1e77fd161c572874abcb5671fa66f6 to your computer and use it in GitHub Desktop.
Scatter2_D3_Starter
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> | |
<!--- Load the d3 library --> | |
<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. | |
// 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: | |
// 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` | |
// 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. | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment