Built with blockbuilder.org
Last active
March 7, 2019 00:51
-
-
Save molliemarie/d3a89f4b30746bfd8c34103fa8b58406 to your computer and use it in GitHub Desktop.
BarChartD3DataJoin_Workshop_3-2019
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 Bar Chart Using D3 AND Data Joins!</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"> | |
// - 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 div = d3.select('body').append('div'); | |
// - Append a new `p` element to the `div` you just created, and use the `.text()` method to set the text to "My Bar Chart" | |
div.append('p').text('My Bar Chart') | |
// - 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) | |
// 1) 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 | |
// This is the dataset to drive the layout: | |
var data = [{ | |
y: 10, | |
width: 100 | |
}, | |
{ | |
y: 40, | |
width: 200 | |
}, | |
{ | |
y: 70, | |
width: 300 | |
}, | |
]; | |
var rects = svg.selectAll('rect') | |
.data(data) | |
.enter().append('rect') | |
.attr('x', 0) | |
.attr('height', 20) | |
.attr('y', function(d) { return d.y }) | |
.attr('width', function(d) { return d.width}) | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment