Built with blockbuilder.org
Last active
January 21, 2020 01:43
-
-
Save molliemarie/479623ebed8afe3ef5e1e68c6941be44 to your computer and use it in GitHub Desktop.
Scatter2_D3_Complete
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. | |
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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment