Built with blockbuilder.org
forked from molliemarie's block: Scatter2_D3_Starter
Last active
January 27, 2020 19:30
-
-
Save lauriemerrell/832d5e9e8e0bf9c3b084383ae6a25def to your computer and use it in GitHub Desktop.
Scatter2_D3_Starter
This file contains hidden or 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 hidden or 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" | |
| div.append('p').text('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` | |
| const svg = div.append('svg') | |
| .attr('width', 300) | |
| .attr('height', 400) | |
| const c1 = svg.append('circle') | |
| .attr("cx", 100) | |
| .attr("cy", 100) | |
| .attr("r", 10) | |
| const c2 = svg.append('circle') | |
| .attr("cx", 150) | |
| .attr("cy", 150) | |
| .attr("r", 15) | |
| const c3 = svg.append('circle') | |
| .attr("cx", 200) | |
| .attr("cy", 200) | |
| .attr("r", 20) | |
| // 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. | |
| // - `cy`: 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