Built with blockbuilder.org
forked from molliemarie's block: BarChartD3_Workshop_3-2019
| license: mit |
Built with blockbuilder.org
forked from molliemarie's block: BarChartD3_Workshop_3-2019
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Second Bar Chart Using D3!</title> | |
| <style> | |
| svg { | |
| border: 1px solid #f0f; | |
| } | |
| /* Set `rect` elements to have a "fill" of "purple" or whatever color you choose */ | |
| rect { | |
| fill: purple; | |
| } | |
| </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. | |
| var p = d3.select('body').append('p').text('My Bar Graph!') | |
| // 2) Append a new `p` element to the `div` you just created, and use the `.text()` method to set the text to "My Bar Chart" | |
| var div = d3.select('body').append('div') | |
| // 3) Append a container `svg` to your `div` element in which you'll place your rectangles | |
| // - Set your svg's `width` to 300, and `height` to `400` | |
| var svg = div.append('svg') | |
| .attr('width', 300) | |
| .attr('height', 400) | |
| // 4) Append 3 `rect` elements inside of your `<svg>` (one at a time), setting the properties for each one. We'll improve on this process later: | |
| // - `x`: How far to move the rectangle in the `x` direction (right). Should be `0` for all rectangles. | |
| // - `y`: How for to move the rect in the `y` direction (down from the top). Should be `10`, `40` `70` | |
| // - `width`: How far to draw the rectangle to the right. Should be `100`,`200`, `300` | |
| // - `height`: The vertical height of each rectangle. Should be `20` for all rectangles | |
| var rect1 = svg.append('rect') | |
| .attr('x', 0) | |
| .attr('y', 10) | |
| .attr('width', 100) | |
| .attr('height', 20) | |
| var rect2 = svg.append('rect') | |
| .attr('x', 0) | |
| .attr('y', 40) | |
| .attr('width', 200) | |
| .attr('height', 20) | |
| </script> | |
| </html> |